- 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
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
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
- 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.
- 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 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.
- Enter a title for the field, it will be visible to your visitors.
- 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.
- 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.
- 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:
- LINK
- LINK