Design your contact form

After adding a contact form, you can customize how it looks. This guide will show you how to change the style, colors, and layout of your website’s forms.

The Form block includes different design styles of forms that you can choose from:

1. Select List View in the top-left corner of the editor. It’s the icon that looks like three horizontal lines above each other.
2. Click the Form block in the List View:

3. In the block settings sidebar on the right, click on the Styles tab (represented by a black and white circle icon):

4. Choose a style:
   • Default shows the field names outside the input fields with no animation.
   • Animated shows the field names inside the input fields, a brief animation, and also highlights the field a visitor clicks.
   • Outlined shows the field names inside the input fields, a brief animation, and an outline around the form block settings all the time.
5. Click the Save or Publish button at the top of the screen to save your changes.

Placeholder text is sample text that can appear in a form field before the visitor clicks on it, and then disappears when they click to start typing their own text. It can be useful to show your visitors an example of the type of content you expect them to type in the form.

To add placeholder text to a contact form:

1. Click the input field you want to add placeholder text to.
2. Enter the placeholder text you want to use.
3. Click the Save or Publish button at the top of the screen to save your changes.

By default, the fields within a form will fill the width of the form’s container. You can change the width of individual fields by taking the following steps:

1. Select List View in the top-left corner of the editor. It’s the icon that looks like three horizontal lines above each other.
2. Click a form field in your Form block in the List View.
3. Open the block settings sidebar on the right.
4. Scroll down to the Width setting and set the width to 25%, 50%, 75%, or 100%.
   • If you want two fields to appear side by side, set each one to 50%. When there is room, multiple fields can appear on one line.
5. Click the Save or Publish button at the top of the screen to save your changes.

To adjust the overall colors of your form, take the following steps:

1. Open List View and locate the Form block and the individual fields within it:

2. With the overall Form block selected, open the block settings sidebar on the right and then click on the Styles tab (the black and white circle icon).
3. Using the color settings, you can control the color of the text in the form, the background color, and the color of links used in the form:

4. Next, click on an individual form field’s label or input and again open the block settings sidebar.
5. Here, you can control the following colors for each individual form field:
   • Label Text: the text that appears above the form field.
   • Field Text: the (optional) placeholder text, as well as the input text in a field.
   • Field Background: the background of the input section of a form field.
   • Border: the border around the form field.
6. Enable the “Sync field styles” toggle to apply your changes to all fields, or disable it to control each field individually.
7. Click the “Save” button at the top of the screen.

By default, the styles you apply to individual label or field text will apply to all of your form fields. You can disable this setting for individual form fields and apply unique styles to just that field’s label and input sections.

To style an individual field follow these steps:

1. Select List View in the top-left corner of the editor. It’s the icon that looks like three horizontal lines above each other.
2. Click an individual form field in your Form block in the List View:

3. Open the block settings sidebar on the right.
4. Toggle the “Sync fields style” button off to apply styles to the individual form field.

5. Click the label or the input field, and use the block settings sidebar to apply color, and typography settings to the field.
6. Click the Save or Publish button at the top of the screen to save your changes.

You can change the overall look and feel of all the forms you add to your site through the Styles option in the Site Editor. Follow these steps to apply styles to all of your forms:

1. From your site’s dashboard, visit Appearance → Editor.
2. Click the Styles option from the Design menu.
3. Click the Blocks option at the bottom of the Styles menu.
4. In the Search field, locate either the Form block or any specific form field or the Label or Input to customize individual elements.
5. Apply your preferred styles.
6. Click “Review change” to save your changes.