Documentation ⇢ Theme Editor

Theme Editor


Overview

The Theme Editor allows you to visually adjust the look and feel of your form, such as the logo, fonts, backgrounds,and borders, etc.

The Interface

The Theme Editor consists of two main areas. The top area is the style category buttons and the bottom area provides a preview of your form.

Clicking on any of the category buttons will display all related property buttons for that category. You can then click on each of the properties buttons to display the properties tab.

Depending on the category, each property button will display different properties tabs, such as color picker, font selector, etc. When you change any of those settings, the result will be displayed instantly on the form preview area.

Creating a New Theme

To create a new theme, click the “Edit Theme” menu on the main navigation or select “Create New Theme” from the dropdown on the top right corner of the Theme Editor.

Build your theme by adjusting the properties as needed, and then click the “Save Theme” button.

Editing a Theme

To edit a theme, select the theme name from the dropdown. The preview of the selected theme will be displayed, and you can continue adjusting the theme.

Once you are finished, click the “Save Theme” button to apply the changes.

Adding Custom CSS Code

There are times you will need to use custom CSS code to fine-tune your theme or perform specific tasks, which cannot be done with the Theme Editor (such as aligning a few fields into a single line).

The Theme Editor allows you to add any valid CSS code to your theme. On the Theme Editor, click the dropdown on the right top corner and select the “Advanced” menu. You will be prompted to enter your CSS code. Once you have finished, make sure to save your theme to apply any changes.

Using a Theme

Once you have created a theme, you can apply the theme to any form you want. To apply a theme to one particular form, go to the Form Manager and click the “Theme” icon. Select the theme you would like to use and click the Save button. Refresh your form to see the result. If the new theme has not being applied, delete your browser cache and then refresh your form again.