Forms Design and customize your form

You can customize forms to match your brand's colors, add images, change the font, and more.

Learn more about the types of forms you can create.

Learn how to create a form.

In this article:

• Access form customization options
• Customize an inline form
• Customize a modal pop-up form
• Customize a floating box form
• Customize a floating bar form
• Change the "Submit" button text
• Advanced customization

Access form customization options

A form's customization options are located under the "Style" tab in the form builder.

To access this tab for any form:

1. Click "Site" on the left menu of your account.

2. Click the "Forms" option on the Site menu.

3. Locate the form you wish to work with, then click the "Edit" button.

4. The form builder will load. All editing and style options will appear in the right pane. Click the "Style" tab located on the right pane.

Customize an inline form

With the inline form, you can choose a layout and customize the styling for the form and submit button.

Layout

Click either option to choose a horizontal or vertical layout for your form.

Form Style

The "Form Style" box lets you customize how the form will appear to your website visitors. Form style customization options include:

Form Style Customization Options	Description
Background	Change the background color of your form or make it transparent. Background images are not supported by this form type.
Font Color	Change the color of the text that appears on your form.
Font	Change the font type on the form to match your brand.
Border	Use this option to add a border to your form. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double.
Corner Radius	Use this option to make the corners of your form rounded or square. The corner radius is set as a pixel value.
Width	Use this option to adjust the width of your form. Width is set as a pixel value.

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options	Description
Background	Change the background color of the submit button.
Text	Change the color of the button text.
Border	Use this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double.
Corner Radius	Use this option to make the corners of your button rounded or square. The corner radius is set as a pixel value.
Padding	Padding is the space around your button. You can use this option to increase or decrease the padding. This is set as a pixel value.

Note that you will not be able to adjust the button's height or width here. You will need to use custom CSS in order to make these adjustments.

Customize a modal pop-up form

With the modal pop-up form, you can choose a layout and customize the styling for the form, input fields, and submit button.

Layout

There are four options you can choose from for your form: no image, image on the left, image at the top, or image in the middle.

Modal Style

The "Modal Style" box lets you customize how the form will appear to your website visitors. Modal style customization options include:

Modal Style Customization Options	Description
Background	Click the color picker to change the color of your form or add a background image.
Font Color	Change the color of the text that appears on your form.
Font	Change the font type on the form to match your brand.
Width	Use this option to adjust the width of your form. Width is set as a pixel value.
Padding	Padding is the space around your form. You can use this option to increase or decrease padding. This is set as a pixel value.
Corner Radius	Use this option to make the corners of your form rounded or square. The corner radius is set as a pixel value.
Shadow	Use this to add a shadow to your form. Doing so will help it stand out. You can choose from the following options: None, Light, Medium, and Heavy.

Inputs

Inputs refer to the fields that website visitors will use to submit their personal information to you. Input customization options include:

Input Customization Options	Description
Background	Click the color picker to change the color of the input fields.
Font Color	Click the color picker to change the color of the input field text.
Corner Radius	Use this option to make the corners of input fields rounded or square. The corner radius is set as a pixel value.

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options	Description
Background	Change the background color of the submit button.
Text	Change the color of the button text.
Border	Use this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double.
Corner Radius	Use this option to make the corners of your button rounded or square. The corner radius is set as a pixel value.
Padding	Use this option to adjust the padding of your button. Padding is set as a pixel value.

Note that you will not be able to adjust the button's height or width here. You will need to use custom CSS in order to make these adjustments.

Customize a floating box form

With the floating box form, you can choose a layout and customize the styling for the form, input fields, and submit button.

Layout

There are four options you can choose from for your form: no image, image on the left, image at the top, or image in the middle.

Box Style

The "Form Style" box lets you customize how the form will appear to your website visitors. Form style customization options include:

Box Style Customization Options	Description
Background	Click the color picker to change the color of your form or add a background image.
Font Color	Change the color of the text that appears on your form.
Font	Change the font type on the form to match your brand.
Width	Use this option to adjust the width of your form. Width is set as a pixel value.
Padding	Padding is the space around your form. You can use this option to increase or decrease padding. This is set as a pixel value.
Corner Radius	Use this option to make the corners of your form rounded or square. The corner radius is set as a pixel value.
Shadow	Use this to add a shadow to your form. Doing so will help it stand out. You can choose from the following options: None, Light, Medium, and Heavy.

Inputs

Inputs refer to the fields that website visitors will use to submit their personal information to you. Input customization options include:

Input Customization Options	Description
Background	Click the color picker to change the color of the input fields.
Font Color	Click the color picker to change the color of the input field text.
Corner Radius	Use this option to make the corners of input fields rounded or square. The corner radius is set as a pixel value.

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options	Description
Background	Change the background color of the submit button.
Text	Change the color of the button text.
Border	Use this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double.
Corner Radius	Use this option to make the corners of your button rounded or square. The corner radius is set as a pixel value.
Padding	Use this option to adjust the padding of your button. Padding is set as a pixel value.

Note that you will not be able to adjust the button's height or width here. You will need to use custom CSS in order to make these adjustments.

Customize a floating bar form

With the floating bar form, you can customize the form style and submit button. Layout options are not available with this form type.

Bar Style

The "Bar Style" box lets you customize how the form will appear to your website visitors. Bar style customization options include:

Bar Style Customization Options	Description
Background	Change the background color of your form. Background images are not supported by this form type.
Font Color	Change the color of the text that appears on your form.
Font	Change the font type on the form to match your brand.

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options	Description
Background	Change the background color of the submit button.
Text	Change the color of the button text.
Border	Use this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double.
Corner Radius	Use this option to make the corners of your button rounded or square. The corner radius is set as a pixel value.
Padding	Use this option to adjust the padding of your button. Padding is set as a pixel value.

Note that you will not be able to adjust the button's height or width here. You will need to use custom CSS in order to make these adjustments.

Change the "Submit" button text

You can change the text of the "Submit" button for any form.

1. From the Forms Overview page, click the "Edit" button for the form you wish to work with.

2. Click the "Submit" button in the form builder.

3. The right menu will display the button label and a field. Type the text you wish to use for the button.

The new button text will save automatically.

Advanced customization

Each form type has a custom CSS option available. This is for advanced users who are familiar with CSS and are comfortable with using it. The custom CSS option is located under the "Style" tab for each form and can be used to add further modifications to any form element. For example, you can use this option to:

• Adjust the width and height of input fields
• Adjust the width and height of the submit button
• Adjust font size
• Adjust the font type for singular elements. For example, you can use this to make the button text font different from the rest of the form

If you want to learn more about using CSS, see this CSS Tutorial from w3schools.com.

To use the custom CSS option:

1. From the form builder, click the "Style" tab.

2. Scroll down until you see the "Custom CSS" box.

3. Click the "Inspector" button then click the form element you wish to modify.

4. Once you click the element you wish to customize, it will appear in the "Custom CSS" box. Type the CSS into this box.

The CSS you add to the form element will save automatically.