Form customisation in Theme Editor

This article outlines the basic steps to customise a form according to custom guidelines

Theme Editor

The Theme Editor allows you to customize the appearance of your forms by applying pre-designed themes or creating your own.

Accessing the Theme Editor:

In the UI Form Builder, the toolbar at the top contains a palette icon. Clicking on this icon opens the Theme Editor, where you can either select a ready-made theme for your form or create a new one.

When selecting or creating a theme, you can instantly preview how your form will look with the applied theme.

Theme Storage and Reusability:

Themes are stored in the database in a custom resource called QuestionnaireTheme. This setup allows flexibility in form design:

• You can apply the same theme to multiple forms.

• You can use different themes with the same form without needing to duplicate the form. This is particularly useful if you want to provide tailored designs for different clients. Simply create one form and assign a set of themes based on client needs.

How to Use a Theme:

• You can set a default theme in the configuration, and it will be applied to all forms. More details can be found here.

• You can also pass a theme as a parameter when generating a link to a specific form. More details can be found here.

How to Create a New Theme:

To create a new theme, select the Add New Theme option. This opens the theme editor, which consists of the following sections:

1. General Settings

   • Theme Name: Assign a name to your theme.

   • Default Language: Set the default language if you’re creating a theme for multilingual forms. When a language is selected, an additional translation icon will appear. Clicking on this icon opens a separate window where you can provide translations for the buttons used on the multilingual form.

2. Colors

   In this section, you can customize the color scheme of your form:

   • Primary Color: The main color used across the form.

   • Page Color: The background color for the page where the form is displayed.

   • Form Color: The background color for the form itself.

   • Toolbar Color: The color for the form's toolbar.

The color for the tooltip and hover will be set automatically according to the Primary color or the user can specify it via the accent color of the input.

1. Brand Image

   You can add a brand image to your form in two possible locations:

   • Top-right corner of the form.

   • Bottom-left corner of the form.

   To include the image, provide a publicly available URL for the image file.

2. Font

   In this section, you can select the font family and set the font size for your form. Three options are available for the font family: Product Sans, Inter and Metropolis.

3. Inputs

   In this section, you can customize the appearance of input fields:

   • Accent Color: Set the accent color for input fields, which typically affects borders and highlights.

   • Text Color: Define the color of the text entered in the input fields.

   • Background Color: Set the background color for input fields.

   • Font Size: Adjust the font size for text within the input fields.

4. Buttons

   In this section, you can customize the appearance of buttons in your form:

   The following settings are available for the Submit, Print, Amend, and Save buttons:

   • Button Appearance:

     • Button Text: Set the text for the close button.

     • Button Color: Set the background color of the close button.

     • Button Text Color: Define the color of the text on the close button.

After creating the theme, you need to click the save button.