How do I add a contact form to my Website Builder site?

This guide shows you how to insert a contact form in your Website Builder site.

• Step 1 - Drag the Contact form component to the workspace
• Step 2 - Set form email address
• Step 3 - Edit the contact form
• Step 4 - Click Edit fields
• Step 5 - Click Add
• Step 6 - Select a type of field
• Step 7 - Edit the field settings
• Step 8 - Click Style for contact form settings
• Step 9 - Adjust styling for the contact form
• Step 10 - Click Success message for contact form settings
• Step 11 - Enter a success message
• Step 12 - Enable Captcha
• Step 13 - Adjust the size and placement of the contact form

Don't have access to Website Builder? You can try it out for free for 14 days and create a website in no time. Start your free trial now

Step 1 - Drag the Contact form component to the workspace

1. In the Website Builder editor, go to the section of your site where you want to place the contact form.
2. Click Contact in the component menu on the left side of your editor.
3. Click and drag the Contact form component onto your workspace and place it where you want the form to be.

Note: You can only have one contact form per page, so if the component is greyed out, this means you already have a contact form on the selected page.

Step 2 - Set form email address

1. Select the email address that the form should send to. You can choose an existing address or create a new one. Note that it needs to be made on your domain. So if, for example, you have the domain one-example.com, it needs to be a @one-example.com address. If you're using an external email provider, you must create an email account with us in the control panel.
2. Enter a subject for the emails so you can recognise the emails in your inbox.
3. Click Save to continue.

If you want to change the email address later, click on the contact form and select Edit contact form --> Email settings.

Tip: Set up an email filter to move all contact form emails to a specific folder on your email account.

Step 3 - Edit the contact form

A contact form will, by default, have a Send button and three fields: Name, Email and Message.

Click Edit contact form to add or edit fields.

Step 4 - Click Edit fields

Click Edit fields to change the default field settings.

Tip: You can change the default button text to something of your own choosing. Just click in the Button text field and start typing.

Step 5 - Click Add

Here you can edit the settings for existing form fields and delete and add new fields with different options. You can add as many fields as you want by clicking the Add button in the top-right corner.

In this guide, we add a checkbox for your visitors to sign up for newsletters, but you can add whatever you want.

Step 6 - Select a type of field

You can add several types of fields to your contact form. In this guide, we are adding checkboxes.

Select the field you want to add and click Done.

Step 7 - Edit the field settings

Each field type has different settings that you can adjust.

1. Click the pencil icon next to the field.
2. Enter a title for the field. It will be visible to your visitors.
3. Depending on the field type, you can have several options. Click on the option to edit the description, click the bin icon at the end to remove it, or click Add option to add a new one.
4. If it is required that your visitors select at least one option, then keep this box checked. When a field is required, an error message appears when they try to send the form when a field is missing. You can enable and write the error message in the field at the bottom of the window.
5. Click Save to update the form with your new field settings.

Step 8 - Click Style for contact form settings

By default, the contact form will use the Template style, but you can adjust it to a custom one.

Click Style in the movable menu.

Step 9 - Adjust styling for the contact form

You can change the settings for the font and the send button.

• Font: type, size and colour.
• Button: styling (colour, shape and border) and font size for the button.

Step 10 - Click Success message for contact form settings

Visitors will receive a confirmation message when a contact form has been sent successfully.

Click the Success message in the movable menu to edit the default message. The message will be saved automatically once you enter it in the field.

Step 11 - Enter a success message

By default, the contact form will use the following message: "Thank you for your message". You can personalise it by adding your own text.

Step 12 - Enable Captcha

Captcha is an excellent tool that helps you protect your form from bot attacks and spam messages. 

It will automatically be enabled if you create a new contact form on your site. However, you can also control it manually inside the form settings. 

1. Select the Contact form component.
2. Click Edit contact form.
3. In the floating menu that pops up, click on Captcha.
4. Slide the Show Captcha toggle to enable/disable the Captcha and select a language from the drop-down menu.

Step 13 - Adjust the size and placement of the contact form

Now that the form has been completed, it's time to adjust its placement and size. Click Save and Publish to make the form available online.

Related articles:

• How do I add social media links to my site?
• How do I make a link in Website Builder?