Widgets: Contact Forms

Widget Categories: Business

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.

Warning

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
Tabs in the Content Area
Form Items (On-Site Form Components)
Contact form Fields

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.

Note

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).

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 new line at 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 attacment 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.

  • 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 (.).

Submit Button

Customize the text you want to appear on the Submit button.

reCAPTCHA

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.

Note

reCAPTCHA cannot be disabled.

Form title

Type a Form title. To hide the form title, click the eye (24517315481495-eye_icon.png) icon.

Note

If you change the title of the form, the title only changes after a new response is submitted. To change the form name quickly, we suggest you submit a test response and wait a few minutes for the form to update.

Submissions (Options and settings for after a form is submitted)
New submission notification

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 field in order 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.

Actions after submission

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 submitter’s form response in the email. This is on by defult. Uncheck 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 conversion code or AdWords in the field provided.

Integrations tab (third-party offerings)

On the Integration tab, send successful submission data to a third-party service. For more information, see the section below, Contact Form Integrations (Additional Configuration Options).

Contact Form Integrations (Additional Configuration Options)

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.

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.

Google Sheets Integration

Use the Google Sheets integration to instantly add contact form submission data to a spreadsheet in Google Sheets. All contact fields in the form will be populated into the spreadsheet, including a time stamp of when the form was submitted.

  1. Click Google Sheets, and click Sign in with Google.

  2. 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.

  3. Select if you want to add data to an existing spreadsheet or to a new one.

  4. 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.

Webhooks Integrations

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".

Create an Endpoint URL

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.

Integration Ideas
  • 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.

Example Webhooks/Endpoint URL Setup on Slack
  1. In the Slack app, open the main account drop-down, then click Apps & Integrations.

  2. The slack website opens. In the upper-right corner, click Build.

  3. Click Make a Custom Integration.

  4. Select Incoming Webhooks.

  5. Select an existing channel, or create a new channel where your messages will post to.

  6. Copy your Webhooks URL.

  7. Adjust the settings and options to your liking, then click Save Settings.

  8. Open the Content Form editor and paste your Webhooks URL into Webhooks field.

  9. 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.

HubSpot (App)

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.

MailChimp (App)

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.

ActiveCampaign (an App)

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.

Automation Builder by Albato (an App)

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.

Design Editor: Designing the Form

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

Add Connected Data (Dynamic Content)

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. For more use cases, see the Product Overview . For more information on connected data, see Connected Data.

Note

Only possible on dynamic pages

To add connected data to a contact form:

  1. Right-click the widget, and click Connect to Data.

    24517220640919-contact_form_connectdata.png
  2. Select the email address from the Connect Email to drop down.

  3. (Optional) Select additional fields you want to include in the contact form email.

  4. (Optional) Click Edit Content and make any necessary changes to the content. All changes will be synced with your content library.

  5. Click Done.

Form Responses Overview: Submissions from Your Site

Manage, Export and Delete Responses

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.

Site Dashboard (Manage, Delete, and Export)

To navigate to the form responses in the site dashboard:

  1. From your site list, click the three dots (three_dots_horiz_icon.png) 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).

  2. To export the responses, click Export to CSV in the top-right corner of the Form Responses section.

  3. To manage responses, click Manage Responses.

  4. 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.

  5. 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.

In the Editor (Manage and Delete)

To navigate to the form responses in the editor:

  1. Click SEO & Settings, then click Manage Form Responses.

  2. 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.

  3. 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.

From the Form Itself (Export Only)

To export responses from the form:

  1. In the editor for the site, navigate to the desired form.

  2. Right click on the form.

  3. In the contextual menu, select Download responses.

    Note

    If the option isn't available, this may indicate there have been no responses on the live site.

Respond to Customer Contact Form Submissions

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.

Configure a GDPR-Friendly Contact Form

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:

  1. Access the content tab of the form.

  2. Click Add field.

  3. Click Into the Field type drop down and select either Opt-in or Free Text.

  4. Configure the field as desired.

FAQs and Troubleshooting

Note

If the Submission recipient 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.

With the Googlesheets integration, I received a this app is blocked error
I'm not receiving form submissions

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 IONOS, 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.

How do I set it up for a submitter to receive an automated email after submission?

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:

  1. Select the Submission tab.

  2. Click Actions after submission.

  3. Scroll down to Email Settings.

For more information on actions after submissions, see Actions after submission.