Styles Tab

Styles Tab

S
Written by Sarah Bassett
Updated over a week ago

To alter the visual aspects of your form, navigate to the Styles Tab within the form builder. In this section, you can tailor the appearance of your form by adjusting elements such as colors, borders, and additional design features. Customising the look of your form allows you to create a cohesive and aesthetically pleasing user experience that aligns with your brand identity.

Layout

Here you will find your form layout settings. In this section, you can toggle inline forms and show labels on or off.

Inline Forms: Inline forms allow you to put form inputs side by side instead of all inputs below one another.

Show Label: If you do not want to show the input field label, turn it off here.

Form Style

Form Style - Background

In the Form Style section, customise the look of your form by adding borders and colours. To change the background colour, click on the colour box and select a colour or add a custom code.

Form Style - Border

You can add borders by choosing a border type from the dropdown, such as dotted, dashed, lined, or none. The border width can be adjusted by adding a number or clicking the up and down arrows. To change the border colour, click the colour icon and select a choice or type in a custom code.

Form Style - Corner Radius

You can round the corners by adding a radius. Simply type a number in the given field. The higher the number, the rounder the corners will be.

Form Style - Width

Modifying the form's width is also possible by adding a number in the given field. The higher the number, the wider the form will be.

Padding

There are different spacing options available for adjusting your Form. Depending on the Edit option you are working on, the settings will only apply to that option. For example, editing the Bottom padding.

  • Padding Left, Right, Top, and Bottom

This Four (4) different padding fields moves the Form to the left, right, top, or bottom depending on the field you add padding to. Simply type a number into the given field to add padding to the top, bottom, left, or right based on your preferences.

Shadow

It allows you to customise the border of your Form, such as the colour, size, width, and radius.

  • Colour

Colour helps you choose a colour for your border. Simply click on the colour icon and select a colour you would like to use, or add a custom colour code to match your company's branding.

  • Horizontal and Vertical

The width option allows you to select how thick the border is horizontally or vertically.

  • Blur

You can customise the edge of your border to make it blur and reduce the edge sharpness.

  • Spread

This will help you spread the corner of your border edge and make it curve.

Field Style

Field Style - Background

In the Field Style section, customise the look of your form by adding borders and colours. To change the background colour, click on the colour box and select a colour or add a custom code.

Field Style - Font Colour

You can enhance the appearance of your form by altering the font colour. Click on the colour box to select a colour, or type your custom colour code in the given field.

Field Style - Border

You can add borders by choosing a border type from the dropdown, such as dotted, dashed, lined, or none. The border width can be adjusted by adding a number or clicking the up and down arrows. To change the border colour, click the colour icon and select a choice or type in a custom code.

Field Style - Corner Radius

You can round the corners by adding a radius. The higher the number you type in the given field, the rounder the corners.

Field Style - Width

Modifying the form's width is also possible by adding a number in the given field. The higher the number, the wider the field width will be.

Field Style - Padding

Padding

There are different spacing options available for adjusting your Form. Depending on the Edit option you are working on, the settings will only apply to that option. For example, editing the Bottom padding.

  • Padding Left, Right, Top, and Bottom

This Four (4) different padding fields move the Form to the left, right, top, or bottom depending on the field you click on. Simply type a number into the given field to add padding according to your preferences.

Field Style - Shadow

Shadow

The shadow option allows you to customize the border of your Form, such as the colour, size, width, and radius.

  • Colour

Here you can choose a colour for your border. Select a colour by clicking on the colour icon, or enter a custom colour code to match your company's branding.

  • Horizontal and Vertical

The width option allows you to select how thick the border is horizontally or vertically.

  • Blur

You can customise the edge of your border to make it blur and reduce the edge sharpness.

  • Spread

This will help you spread the corner of your border edge and make it curve.

Label

Colour

In the Label section, customize the look of your form by adding colours. To change the label colour, click on the colour box and select a colour or add a custom code.

Font Family

This allows you to select the font style for your label. Click on the dropdown menu and select a font you would like to use for the field label.

Size

Here you can select the font size of your label by typing a number in the field.

Weight

This will help you to thicken the font you chose for your label, making it into a bold font. Type a number into the given field to change the weight. The higher the number, the bolder the font will be.

Placeholder

Colour

In the Placeholder section, customise the look of your form by adding colours. To change the label colour, click on the colour box and select a colour or add a custom code.

Font Family

This allows you to select the font style for your placeholder. Click on the dropdown menu to select the font you would like to use.

Size

Click on this section to select the font size of your placeholder and type a number in the box to set your font size.

Weight

This will help you to thicken the font you chose for your placeholder, making it into a bold font. Type a number in the given field to add weight to the placeholder font. The higher the number, the bolder the font will be.

Custom CSS

You can add custom CSS to your form in the Custom CSS box to modify the design of your forms, such as input fields' shapes, colours, buttons, and more.

Consult with a web developer familiar with CSS if you are unfamiliar with this option.

Background Image

The background image is intended to cover the entire page, providing a visually appealing backdrop for the form.

To view the background image, click on the Preview option.

Header Image

The header image is designed to cover the entire width of the form and remains positioned at the top of the form.

To view the header image, click on the Preview option.

Miscellaneous

Agency Branding

In the Miscellaneous section, toggle on or off the company Branding option to show or remove agency branding at the bottom of your form. Turning it off allows you to place your form on a different funnel from the agency's.

Need more help?
โ€‹
Join us for live daily support - Book now.

Did this answer your question?