In this guide we show you how to insert a contact form in your Website Builder site.

Step 1 - Drag the Contact form component in the workspace

Step 2 - Set form email address

Step 3 - Edit contact form

Step 4 - Click Edit fields

Step 5 - Click Add fields

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 - Adjust size and placement of the contact form

---

Step 1 - Drag the Contact form component in the workspace

Click and drag the Contact form component from the left menu to where you want to place it on the page.

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 be sent to. You can choose an existing address or create a new one. It needs to be created on your domain.
2. Enter a subject for the emails, for you to be able to recognise the emails in your Inbox.
3. Click Save to continue.

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

---

Step 3 - Edit contact form

By default, a contact form will 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 fields

Here you can edit the settings for existing form fields, delete fields and add new fields with different options. You can add as many fields that you want.

In this guide, we are adding 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 Insert fields.

---

Step 7 - Edit the field settings

Each field type has different settings that you can adjust.

1. Enter a title for the field, it will be visible to your visitors.
2. Depending on the field type, you can have several options. Click in the option to edit the description, click the X at the end to remove it, or click Add option to add a new one.
3. 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.
4. 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 floating contact form settings.

---

Step 9 - Adjust styling for the contact form

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

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

---

Step 10 - Click Success message for contact form settings

When a contact form has been sent successfully, your visitors will see a confirmation message.

Click Success message in the floating contact form settings, to edit the default message.

---

Step 11 - Enter a success message

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

---

Step 12 - Adjust size and placement of the contact form

Now that the form has been completed, it's time to adjust placement and size on your website page. 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?