Learn how to use the Contact Form widget to collect visitor inquiries, contact details, and messages from your Booking Website Pro site.
Use the Contact Form widget to add a web form to your site. The Contact Form widget allows you to provide visitors with a variety of input areas: specific text, drop-down, radio buttons, check boxes, date, time, email, and phone numbers. You can use the form for email newsletter opt-ins, customer questions, or simply to gather feedback from your site visitors.
We do not recommend duplicating contact forms, as this typically results in issues in the duplicated contact form.
Setting up and Configuring Forms
Content Editor: Configuring the Form
To access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.
Tabs in the Content Area
Modify the existing fields by clicking the name of the field in the list.
To add new fields, click Add Field.
After clicking an existing field or adding a new field, additional settings will appear. Many settings will depend on the Field type selected.
- On radio buttons and check boxes, you can add images to display for the options. The images will not appear in the email received from the form submissions, but the selected label appears (even if hidden on the site).
- Note that the appearance of input fields on your live site may differ slightly from what you see in the editor, depending on the browser used to view the form.
Contact Field Settings and Considerations
- Most field types will have these options:
- Required field. If a required field is left blank, upon trying to submit the form, a red box will appear around it. While there isn't currently an indicator added (for example, an asterisk, one can be manually added to the Field label or Placeholder.
- Start a new line in this field.
- Field size. Customize the width of the field.
- On radio buttons and check boxes, you can add images to display for the options. The images will not appear in the email received from the form submissions, but the selected label appears (even if hidden on the site).
- Time field: the Use 24-hour clock toggle only affects the time displayed in submissions; the time picker format site visitors see will be dependent on their browser settings.
-
File attachment field:
- The file name must not include a space when uploaded.
- The file size limit for attachments is 10MB.
- Only one file can be uploaded per file attachment field (if multiple files will need to be uploaded, a field will need to be included for each).
- The following file formats are supported: .pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt, .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar in addition to all video file formats.
- Submitted file attachments expire after 90 days.
- Files are not added to the Media Manager.
- Phone number field: The Phone number field will check for validation to ensure formatting conditions are met; if they are not, an error with a message will appear. The conditions are at least one number and no invalid characters. In addition to numbers, valid characters are spaces, plus signs (+), dashes (-), and periods (.).
- By default, reCAPTCHA validation is added to new forms. This protects your form from spammers and speeds up the form submission process for site visitors
- Select a reCAPTCHA position
- Select to display the reCAPTCHA as an icon or text in the form
- reCAPTCHA cannot be disabled
To set the email address and subject for receiving form responses, click New Submission notification.
Make sure to enter the email address in the form. Submissions will be sent to the field to have a copy of the information submitted.
If the Form submissions will be sent to is empty, the primary email in the content library will be used. If no such email exists, the account owner will be used as the default submission recipient. All responses go to the form responses page.
Click Actions after submission to set up the following:
- Thank you, and Error messages. Use the Rich Text Editor to add color, emphasis (bold, italics, and underline), and bullets to add text in the boxes.
- Redirect settings. You can redirect to a page on your website or an external website.
-
Email settings: an auto-reply, by default, will be sent to the form submitter along with a copy of their submission (as long as their provided email address is valid). When toggled on, there are additional settings listed below.
- Auto-reply to form submitter. By default, an auto-reply will be sent to the form submitter (as long as their provided email address is valid). To turn this off, toggle the Auto-reply to form submitter option off.
- Form name. You can also set the Form name (the name you enter here will show in the sent email’s “From” field). If the Auto-Reply setting has been toggled off, this setting will not be available.
- Email subject line. If the Auto-Reply setting has been toggled off, this setting will not be available.
- Email message. If the Auto-Reply setting has been toggled off, this setting will not be available.
- Include a copy of the submitter’s form response in the email. This is on by default. Uncheck the box to disable it. If the Auto-Reply setting has been toggled off, this setting will not be available.
Tracking
To add tracking code to your form, click Tracking, and paste the conversion code or AdWords in the field provided.
To extend the reach of your Contact Form, integrate it with various third-party solutions.
To add an integration, in the content area, click the Integrations tab.
We no longer offer Mailchimp or Constant Contact as contact form integrations. If you previously had them installed, they will still be available for your site.
- Click Google Sheets, and click Sign in with Google.
- Click Allow to grant permissions to connect to your Google account. If your computer is connected to multiple Google accounts, select the account you would like to connect to this form.
- Select if you want to add data to an existing spreadsheet or to a new one.
- Select the spreadsheet you would like to submit the form data to. You can select the spreadsheet from a list, or use the search bar to find a specific sheet.
Note
- If you have multiple forms on the site, you can connect each one to a different spreadsheet, including spreadsheets in different Google accounts.
- You can connect a couple of forms to the same spreadsheet. In this case, make sure that the fields and order in the form are identical to fit the information submitted.
- Submitting form data to a Google spreadsheet does not prevent you from downloading the data as a .csv file or from receiving form submission emails.
Numerous online and cloud services offer integrations through a path called Webhooks. Webhooks send notifications to a specific web address called the endpoint URL. You can connect the contact form to send an event when the contact form is submitted.
To connect the contact form to another service using Webhooks, you need to create a custom endpoint URL with your desired service and paste it into the Webhooks integration field in the contact form. Once you add a Webhook URL, and the form is submitted, a POST request is sent to the endpoint with the data in the body in JSON format. The following is an example of the JSON data:
{"Submission Date":"06/02/2016 10:23:54","Form Title":"Contact Us","Name":"John Smith","Email":" test@example.com ","Phone":"(555).555.1212","Message":"Webhook Form Submission!"}
Note
Submission Date and Form Title will always be provisioned. The other fields ( field_name : value) are based on the fields configured in the form.
All field information is set as a string and contained in quotation marks. For example, 7 is sent as "7".
Endpoints are set up on third-party services (for example, Zapier or Slack), or another server that you control. These endpoints are specifically set up to receive notifications from the Webhook.
- Slack. A robust messaging app that you can connect to receive notifications as soon as form data is submitted.
- Custom Integration. Create your own custom Webhooks to integrate with the contact form. For example, save submissions into a database or connect to custom apps or third-party services.
- In the Slack app, open the main account drop-down, then click Apps & Integrations.
- The Slack website opens. In the upper-right corner, click Build.
- Click Make a Custom Integration.
- Select Incoming Webhooks.
- Select an existing channel, or create a new channel where your messages will post to.
- Copy your Webhooks URL.
- Adjust the settings and options to your liking, then click Save Settings.
- Open the Content Form editor and paste your Webhooks URL into the Webhooks field.
-
Click Done.
Preview your site and submit the contact form to test the integration.
You will receive a message on Slack each time your contact form is submitted.
The Hubspot connector is designed to seamlessly integrate your web design projects with Hubspot's powerful CRM capabilities, our connector is the bridge between your website activities and customer relationship management.
Note that Hubspot is an app and will need to be managed through the app store after installation.
This connector is designed to integrate your web design projects with Mailchimp's powerful marketing automation capabilities, forming a vital link between your website activities and email marketing strategies.
Note that MailChimp is an app and will need to be managed through the app store after installation.
Note
We no longer offer Mailchimp or Constant Contact as contact form integrations. If you previously had them installed, they will still be available for your site.
The ActiveCampaign connector is crafted to integrate your web design projects with ActiveCampaign's robust email marketing and automation capabilities, establishing a crucial link between your website activities and sophisticated marketing strategies.
Note that ActiveCampaign is an app and will need to be managed through the app store after installation.
The Automation Builder is your gateway to seamless integration between your Website Builder and a myriad of marketing and CRM platforms. This powerful tool allows for bidirectional data flow, enabling not just data transfer from your Website Builder to platforms like MailChimp and ActiveCampaign but also vice versa. It's designed to enhance flexibility and efficiency, simplifying complex workflows across various services.
Note that Automation Builder is an app and will need to be managed through the app store after installation.
To access the design editor select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.
Layout
On the Layout tab:
- Click the layout icon to select a layout design for the contact form.
- To change the form alignment, click Left or Right.
Item
On the Item tab:
- To make edits to the field style and field text, click Fields.
- To edit the button style and button text, click Button. To revert back to the theme style, click Revert to theme button.
Frame
On the Frame tab:
- To make edits to the frame style, click Frame Style. You can change the background by adding a color or image.
- To change the text style of the title, click Form Title.
- To change the text style of the submission notification, click Submission Message
You can connect the email address to the content library, or to an email field in collections. Additionally, you can add collection fields such as apartment ID or team member name to the email subject or as external fields sent in the form. Those additional fields will be available not just in the form email but also when accessing the form responses data from site overview tab in the Site Dashboard.
Note
Only possible on dynamic pages.
To add connected data to a contact form:
-
Right-click the widget, and click Connect to Data.
- Select the email address from the Connect Email to drop down.
- (Optional) Select additional fields you want to include in the contact form email.
- (Optional) Click Edit Content and make any necessary changes to the content. All changes will be synced with your content library.
- Click Done.
There are a few places responses can be accessed: the Site Dashboard, in the editor, and from the form itself.
Note
Form submissions sent from the preview link or in-site preview will be delivered to the designated recipient (or account owner if a recipient hasn't been designated). However, they won’t appear in the site responses or be included in the CSV export.
- From your site list, click the three dots (
) icon next to the site where the form appears, click Site Dashboard, then select Form Response (located in the side bar of options, under Site Overview).
- To export the responses, click Export to CSV in the top-right corner of the Form Responses section.
- To manage responses, click Manage Responses.
- The Form Responses page opens and allows you to remove any response to any form on the site. You can search for relevant responses in the Search responses search box. Ensure you search for the exact name, phrase, or characters.
-
Click on the relevant form tab to open a table which includes:
- The date of the form response submission.
- The input from each of the form fields.
- The option to delete the form response.
- To export form responses in CSV format, click Export to CSV in the top, right corner of the Form Responses section. Note that this button is only visible if the form has responses on the live site.
In the side panel, click More, then click Settings.
- Click Manage Form Responses.
- The Form Responses screen opens and allows you to remove any response to any form on the site. You can search for relevant responses in the Search responses search box. Ensure you search for the exact name, phrase, or characters.
-
Click on the relevant form tab to open a table which includes:
- The date of the form response submission.
- The input from each of the form fields.
- The option to delete the form response.
To export responses from the form:
- In the editor for the site, navigate to the desired form.
- Right click on the form.
- In the contextual menu, select Download responses.
If the option isn't available, this may indicate there have been no responses on the live site.
To respond to a customer’s contact form submission directly from your email, simply click Reply to Customer in the email you receive from Website Builder. This will automatically populate the submitter’s email address in the "To" field, allowing you to reply directly. Please note, if the customer provided multiple email addresses, only the first one will be used.
Note
When replying this way, the email might be marked as spam, depending on the submitter's email and settings. To help ensure the submitter receives your reply, consider copying their email address and sending a new email instead.
To obtain consent from your visitors upon contact form submission, add a new field to your contact form and select either Opt-In or Free Text as the Field Type.
Opt-in vs Free Text
The Opt-in field must be checked by the submitter before the form can be submitted. This field also includes default text, which reads, By checking, I agree to share my form responses.
In contrast, the Free Text field only displays the desired notification. As a multi-purpose field, it doesn’t include any default or suggested text.
To add an Opt-in or Free Text Field:
- Access the content tab of the form.
- To access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor.
- Click Add field.
- Click Into the Field type drop down and select either Opt-in or Free Text.
- Configure the field as desired.
The issue was caused by a security change on Google's end that we had to comply with.
To fix it:
- Navigate to myaccount.google.com/connections.
- Search for Website Builder.
- Click Delete all connections you have with Website Builder.
- Go back to the editor, and try to connect again.
If you are not able to receive any form submissions that are being sent using the Contact Form widget, most likely it is because our mail is being filtered as spam on your email server.
If you do not receive emails from Website Builder, check your spam folder. If you still do not see the email, make sure to allowlist the IP addresses 167.89.22.215, 149.72.216.48, 149.72.184.31, 149.72.166.161 and 149.72.162.205 in your email provider's settings.
Additional troubleshooting tips:
- Check the form responses to ensure the contact form is working. You can click the contact form and click form responses to download it.
- Check to see if the email is valid. If you enter multiple emails, remember to use a comma between emails (no spaces) to separate them.
- Check your spam folder.
- Check your email filter and denylist settings to ensure that they are not being blocked.
- Add no-reply@multiscreensite.com to your email allowlist.
- Create a new page and insert your contact form there to see if it works.
- Turn off any custom scripts in your site in the site settings.
Note
If your contact form still does not work after running through the troubleshooting checklist, contact your email provider to look into why our contact form email submissions are not being received.
If it is working on another page on your mobile site but not the page it is meant to work on, that usually means there is a custom script interfering with your contact form working. Either reset the page or check the page and site head HTML for any custom scripts that might be causing this issue.
There is a setting that is on by default that will send an automated email along with a copy of their submission.
To manage this setting:
- To access the content editor is available in the floating menu. Click the element to open the floating menu, then click the option for the content editor
- Select the Submission tab
- Click Actions after submission
- Scroll down to Email Settings