By default, your full contact form includes four fields: (1) Name, (2) Email, (3) Phone, and (4) Message. The Email field is the only required field.

In addition to the default fields, you have the option to further customize your form by renaming the existing fields or adding new ones. You can include single-line text fields, radio buttons, checkboxes, and select dropdowns, all of which will seamlessly match the form's style. To begin customizing your form, refer to the guide below:

To edit the default field names, log in and navigate to the EDIT screen. Find the page(s) containing your form and click on the page content to activate the editor toolbox.

From the editing toolbox, select the </> icon.

This will switch to the "Code View" of your page's content. You will see the actual website code for the page. Locate the section where your form is located; it should resemble the following:

For each field, you can customize the Label Text and Field Name.

For example, if you wish to change the "Phone" field to "Your Phone Number," find the following code:

To change the Label Text, look for the following:

Which can be changed to:

Next, you’ll want to change the Field Name; look for something like the following:

Within the field code, you’ll see the following:

The name of the field is within the [] brackets. So you’d change this to:

Note: We recommend matching your Label Text with your Field Name, like in the above example, as the Field Name is used in the generated email notifications.

Once you are done, click the </> icon from the top right of the code view to switch back to the visual editor and see your updated form!

You’ve successfully renamed your form field! If everything looks good, don’t forget to hit Save Changes and proceed through the publishing process to make your updates live!

A single-line text field is useful for collecting user-entered text for short 2-5 word answers (ie. company name, age, zip code, etc)

To start, copy the code below to your clipboard:

To add this in, you’ll first need to be logged in and on the EDIT screen. From here, navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox, and click the </> icon to activate the “Code View.”

Within this code, find where your form is located; it should look something like this:

Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste the code you copied above so that it falls before or after the other field’s code:

You will want to change the Label Text and Field Name of this field, as outlined in the first section above.

Multi-Line text fields are great for long-form questions

To start, copy the code below to your clipboard:

To add this in, you’ll first need to be logged in and on the EDIT screen. From here, navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox, and click the </> icon to activate the “Code View.”

Within this code, find where your form is located. It should look something like this:

Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste the code you copied above so that it falls before or after the other field’s code:

You will want to change the Label Text and Field Name of this field, as outlined in the first section above.

Select Dropdown fields are great for long, predefined options.

To start, copy the code below to your clipboard:

To add this in, you’ll first need to be logged in and on the EDIT screen. From here, navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox, and click the </> icon to activate the “Code View.”

Within this code, find where your form is located. It should look something like this:

Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste the code you copied above so that it falls before or after the other field’s code:

You will want to change the Label Text and Field Name of this field, as outlined in the first section above, but you’ll also want to customize the dropdown options available to your users. To do this, simply add/remove the following from the code you copy and pasted: <option>Option 1</option>

You’ll notice the first <option> is set up slightly differently. This is an optional default option to tell users what to do, as noted by the disabled="disabled" and selected="selected" code. Feel free to edit the text for this option as well or remove the option entirely.

Radio Button fields are another great way for showcasing single-answer options.

To start, copy the code below to your clipboard:

Copy

To add this in, you’ll first need to be logged in and on the EDIT screen. From here navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox and click the </> icon to activate the “Code View”.

Within this code find where your form is located, it should look something like this:

Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste your code you copied above so that it falls before or after the other field’s code:

Copy

You will want to change the Label Text and Field Name of this field, as outlined in the first section above, but you also will need to customize your radio button options Value and Display Text. To do this, simply find the following within the code you copy and pasted:

Copy

The Value here is what you see as: value="1", simply change the 1 to whatever text you want to show up in your email notifications. The Display Text is what you see as: Option 1, which shows right before the closing </label> tag. This is the text the user will see for this option, change this to whatever you’d like.

Note: You can add/remove an unlimited number of radio button options. To create additional radio buttons in a set, simply copy and paste the above code before or after other options and customize the button Value.

Important: When changing the Field Name, please note that all radio buttons in a set must share the same field name. Do not give them a different Field Name, or else they will each be treated as a different field entirely.

Checkboxes are great for when multi-choice questions.

To start, copy the code below to your clipboard:

To add this in, you’ll first need to be logged in and on the EDIT screen. From here, navigate to the page(s) with your form on it and click on your page content to activate the editor toolbox, and click the </> icon to activate the “Code View.”

Within this code, find where your form is located. It should look something like this:

Each field is contained within this code: <div class="form-item"> ... </div>, so be sure you paste the code you copied above so that it falls before or after the other field’s code:

You will want to change the Label Text and Field Name of this field, as outlined in the first section above, but you also will need to customize your checkbox options Value and Display Text. To do this, simply find the following within the code you copy and paste:

The Value here is what you see as: value="1", simply change the 1 to whatever text you want to show up in your email notifications. The Display Text is what you see as: Option 1, which shows right before the closing </label> tag. This is the text the user will see for this option, change this to whatever you’d like.

Note: You can add/remove an unlimited number of checkboxes. To create additional checkboxes in a set, simply copy and paste the above code before or after other options and customize the checkbox Value.

Important: When changing the Field Name, please note that all checkbox buttons in a set must share the same field name. Do not give them a different Field Name, or else they will each be treated as a different field entirely. In addition, Checkbox Field Names require a slightly different naming convention to work properly. Please be sure to not remove the trailing [] brackets from the Field Name.