Design your form to match your brand and color scheme. A clear and inviting form encourages site visitors to submit. You can change the overall look and feel of the form, or click an individual form field to change its design.
Learn how to:
Designing Your Site Forms
Choose from a preset design with similar colors and themes, or customize your form's design to match your needs.
To design your site forms:
- Go to your Editor and click a form.
- Click the Design icon
in the top bar.
- Select a design from the preset designs. Click an option to see the form change on the page. The content of the form remains the same.
- (Optional) Click Customize Design to further customize the site form.
- Customize your form by changing the design of the form's input fields, submit button and background.
First choose what part of the form you want to design:
- Input fields: Update the design of all the form fields.
Note: This option changes every form field. Click an individual field to design only that field. - Submit button: Customize the design of the form's submit button.
- Form background: Customize the background of the form (space around the form fields).
Then customize the element using the following design options:
- Fill Color & Opacity: Customize the background color of the element. Click the color box to select the background color and drag the slider to increase or decrease the opacity.
- Border: Add and customize the border of the element. Click the color box to select the border color and drag the slider to increase or decrease the opacity. Choose what style the border should be under Border Style.
- Corners: Curve the corners of the element. Enter a value on each corner, or click the Lock icon to change all the values together.
- Shadow: Add a shadow to the element.
- Click the Enable Shadow toggle to enable it.
- Customize your shadow using the options:
- Angle: Select the shadow angle.
- Distance: Drag the slider to increase or decrease the distance of the shadow.
- Size: Drag the slider to increase or decrease the size of the shadow.
- Blur: Drag the slider to increase or decrease the shadow blur.
- Text: For input fields and submit button, you can change the text color and font.
- Input fields:
- Field title: Change the color, opacity and text of the title above the form field.
- Input text: change the color, opacity and font of the placeholder text that goes inside the form field.
- Submit button:
- Regular: Click the Regular tab to change the design of the button on the form.
- Hover: Click the Hover tab to change the design of the button when visitors hover over it.
Designing Individual Form Fields
If you only want to make design changes to specific fields on your form (e.g. Name and Phone Number) you can select an individual field to design.
To design individual form fields:
- Go to your Editor and click a form.
- Click the field inside the form you want to design (e.g. Birthday).
- Click the Design icon above the form field.
- Choose a preset design for the form field. Depending on the field you've selected you will see different options. For example, text fields allow you to design the text color and background, while date picker fields (e.g. Birthday) allow you to select from different calendar designs.
- (Optional) Click Customize Design to further customize the field.
- Customize your form field using the available options.
Customize the form field. Some fields have more than one tab (i.e. Regular and Hover). Click between the tabs to customize them.
- Fill Color & Opacity: Customize the background color of the field. Click the color box to select the background color and drag the slider to increase or decrease the opacity.
- Border: Add and customize the border of the field. Click the color box to select the border color and drag the slider to increase or decrease the opacity. Choose what style the border should be under Border Style.
- Corners: Curve the corners of the field. Enter a value on each corner, or click the Lock icon to change all the values together.
- Shadow: Add a shadow to the field.
- Click the Enable Shadow toggle to enable it.
- Customize your shadow using the options:
- Angle: Select the shadow angle.
- Distance: Drag the slider to increase or decrease the distance of the shadow.
- Size: Drag the slider to increase or decrease the size of the shadow.
- Blur: Drag the slider to increase or decrease the shadow blur.
- Text: Change the text color, font and size of the field.
