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.

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.

wsb_contactform9.png

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.

contact_form_new1.png

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.

wsb_contactform1-2.png

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.

contact_form_new2.png

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.

wsb_contactform1.png

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.

wsb_contact_form14-12-2023.png

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.

wsb_contactform3.png

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.

contact_form_new3.png

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.

wsb_contactform5.png

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.

contact_form_new6.png

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.

wsb_contactform7.png

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.

contact_form_new4.png

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.

contact_form_new5.png

Related articles:

Was this article helpful?

Can’t find what you are looking for?

We're here for you.

Chat with us 24/7 - every day of the year

are answered as soon as possible

Phone us on weekdays from 10am to 2pm (UTC)
+44 20 8106 0910