Form

The Form Modules can be styled locally or globally. The advantage of global styling is that it automatically styles all the form modules on your website at the same time, offering extra styling options and saving your time. It is possible to find Form Global Styling under the Module Design section of the Global Styling tab of the editor.

 


Two form modules

The two modules make it possible to have two different pre-defined layouts - for example one in light colors and one in dark. This is useful in cases on your website where you want to have multiple forms on backgrounds of various colors throughout your site and therefore need a light and a dark version of the form in order to be able to place forms anywhere. By having two form styling options, you won't need to style any of your forms locally.    

As a default, the Form 2 module inherits the Global Styling properties from the Form module. If you want the Form 2 module to have its own, independent styling, just change the Global Styling settings of the Form 2 module. 


1. General

The general settings refer to spacing. It is possible to define the overall spacing in terms of margin - which adjusts the space outside of an element; and padding - which adjusts the space inside of an element. 

 

2. Labels

Style the labels of your form in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, alignment and spacing.

 

3. Checkbox / Radio Labels

Style the checkbox and radio labels in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options. Note that increasing the font of the label will increase simultaneously the text and the checkbox/radio label. Furthermore, you can choose whether you like the inputs to be side by side (horizontally) or stacked on top of each other (vertically) - enable the Stack each Input setting to display the inputs vertically. Finally you can also define their spacing. 

 


4. Consent links

Style the consent links in terms of font color, weight, and text decoration.


5. Inputs

5.1. Text

Style the inputs in terms of font color, size, family, weight, letterspacing, italic and uppercase options.

 

5.2. Background and Border

Define a background color, transparency and border for the input boxes.

 

5.3. Spacing

Define the spacing for the inputs, text and selects areas.

 

6. Subtitles

Style the subtitles of your form in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, alignment and spacing.


7. Submit Button

7.1. Content

In this section you can define the button placement - to the left, centered or to the right.

 

7.2. Styling

Define the button text in terms of font color, size, family, weight, line height and uppercase letters. You can also define the background and border for the button, as well as spacing, both in terms of margin and padding.

 

8. Thank you message

Define the font color, size, family, weight, line height and uppercase letters for the thank you message. It is also possible to change the background, border and spacing of the area where the thank you message can be read after the visitor submits the form.

 

9. Captcha

9.1. Content

In this section you can define the captcha placement - to the left, centred or to the right.

 

9.2. Styling

Define the spacing for the captcha.

 

10. Note Field

Style the note field in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, alignment and spacing.

 

11. Overview

In the image below you can have an overview of the elements that can be styled.

 

12. Apply Global Styling

As soon as you save your Global Styling, all the Form Modules will inherit that styling. However, if later you choose to style a form locally, it will overwrite the global styling but only for that specific Form Module. Click here to read more about the Form Module local styling!

 

Anything we’ve not covered?

Contact Us