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 - 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
- In the Website Builder editor, go to the section of your site where you want to place the contact form.
- Click Contact in the component menu on the left side of your editor.
- 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
- 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 still need to create the email account with us in the control panel.
- Enter a subject for the emails for you to be able to recognise the emails in your Inbox.
- 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 the contact form
A contact form will 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 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 Done.
Step 7 - Edit the field settings
Each field type has different settings that you can adjust.
- Click the pencil icon next to the field.
- Enter a title for the field. It will be visible to your visitors.
- 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.
- 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.
- 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
When a contact form has been sent successfully, your visitors will see a confirmation message.
Click 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 - 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.