Styling Your Form

Styling Your Form

Use the Form tab to add custom design to your form. On this tab you can configure the general design settings for the whole form. These settings will be applied for all blocks by default unless you set specific settings for individual blocks which take precedence over general settings.

Configuring Text

Select the font you need from the Font list, the font size in pixels from the Font size list and set the text color using the Text color picker:

Styling with CSS

If you want to custom tune your forms then click on the Form tab and insert your own CSS using HTML classes you can check using browser developer tools.

Your design of a form will be protected from external CSS with Shadow DOM when the form is embedded. But if you have an old form, you might need to select Move Form to separate CSS space if you want to preserve its design. You will no longer see this checkbox after it is selected, and the form is saved and reloaded. You need to make sure this checkbox is cleared for an old form if you want it to respect your external CSS.

Using "CSS" Field

Use the CSS field to enter your CSS to adjust the look of the whole form and its elements.

For example, if you have created a simple registration form:

You might want to add the following CSS :

The CSS above will convert the form into the following more colorful version:

Using "CSS Class" field

Sometimes you will need to use the CSS Class field to add your own class name to the form. This can help, for example, to reuse the same CSS for different forms of similar type.

For example, for a popup form:

Or you can only give the class name to the form, but your CSS using this class can be directly embedded to the page where the form is used.