Contact Form

Overview

Let your customers get ahold of you with our Contact Form!  Customize forms in our builder to make sure you capture exactly the information you need.

Add a Contact Form

  1. Go to the Add Element section and select the business section.
  2. Drag the Contact Form feature into the website.
  3. Once you've placed the feature, you can configure its fields as you wish.

How to set up your Contact Form

The contact form allows you to provide visitors with a variety of input fields, specifically text, dropdown, radio buttons, checkboxes, date, time, email, phone number, and numbers. Your first step should therefore be:

1. Decide what information you'd like to get from your visitors

2. Add appropriate fields by using the Add New Field button or modify existing fields using the edit (pencil icon) button

3. Click on the Email Settings tab, set an email address to receive form responses.

4.Set the confirmation and error messages you'd like to display when a  visitor submits the form.

5. Set the form-response email subject.

Integrations

You can extend the reach of your contact form, by integrating it with Google Sheets or a 3rd party application using webhooks.

 

Google Sheets Integration

Have contact form submission data instantly added to a spreadsheet in Google Sheets. All contact fields in the form will be populated into the spreadsheet, including a timestamp of when the form was submitted.

Steps

Click the Integrations tab in the contact form’s general settings area.

Expand the Google Sheets option 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, choose the one you’d like to connect to this form.

Choose if you want to add a data to an existing spreadsheet or to a new one

Select the spreadsheet you’d 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.

Additional Considerations

  • 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 also 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 info 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.

MailChimp Integration

MailChimp is a great tool for distribution of email campaigns, newsletters, and so on. By using the new form integration, site owners can manage contact lists of potential clients (site visitors) by collecting the email addresses, which are submitted to the form and sending them automatically to MailChimp.

You must have a MailChimp account. Once you have an account, create a mailing list in your MailChimp account where the contact details will be collected.

Steps

Click the Integrations tab in the contact form’s general settings area.

Expand the MailChimp option and choose CONNECT TO MAILCHIMP.

 

Sign in with your MailChimp credentials.

Select your MailChimp contact list from the drop-down menu.

Configure your form fields. In addition to the email address, the form can automatically send first name and last name fields to MailChimp. You must setup the email / first name / last name fields within the form.

Constant Contact Integration

This is a similar integration to MailChimp, but allows site owners to create mailing lists in their Constant Contact account.

You must have a Constant Contact account. Once you have an account, create a mailing list in your Constant Contact account where the contact details will be collected.

Steps

Click the Integrations tab in the contact form’s general settings area.

Expand the Constant Contact option and choose CONNECT TO CONSTANT CONTACT

Sign in with you Constant Contact credentials.

Select your Constant Contact list from the drop-down menu.

Configure your form fields. In addition to the email address, the form can automatically send first name, last name, and phone number to Constant Contact. The user is required to set up the email / first name / last name fields within the contact form. Email address and text message are added by default.

 

Webhooks Integration

Numerous online and cloud services offer integrations via a path called webhooks. Webhooks send notifications to a specific web address called the endpoint URL.  In your editor, 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 simply 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've added a webhook URL, it will send a POST request to the end point with the data in the body in JSON format, when the contact form is submitted on the website. Here's an example of the JSON data that will be sent:



{"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!"}

 

Please Note: that “Submission Date” and “Form Title” will always be provisioned, the other fields (field_name : value) are based on the fields which are configured in the form.

Creating an Endpoint URL

Endpoints are setup on 3rd party services (e.g. Zapier or Slack), or another server that you control.  These endpoints are specifically set up to receive notifications from the webhook.

Integration Ideas

Zapier - Connect contact form data to Zapier for unlimited possibilities.  Connect with virtually any modern cloud service, including CRMs like Salesforce, Sugar CRM, Zoho and more.

Slack - Robust messaging APP,  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 3rd party services.

Example Webhooks / Endpoint URL Setup on Slack

In the Slack app, open the main account dropdown, then click on Apps & Integrations.

The slack website will open up.  In the upper-right corner, click the Build button.

Click on 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.

Then head back to your editor and paste your Webhooks URL into Webhooks field.  Click Done to complete the setup.

Preview your site and submit the contact form to test the integration.

If you see the message in your selected channel, congrats you’re all set up!  Now you’ll receive a message on Slack each time your contact form is submitted.

File Attachments

Files can be attached to contact form submissions. This can be accomplished by creating a file attachment field in the contact form. Links to uploaded files are available in the form submissions’ download file, as well as in any of the form integrations such as Webhooks and Google Sheets.

Steps

Add a new field to any contact form.

Select file attachment from the drop down menu. You can edit the placeholder text to change the name of this field.

A link to upload files will be added to your form.

Change design

Change the way the contact form looks using the following options:

General

General: Change the form's title, email, and submit button text as well as add additional input fields

Email Settings: Change the form's thank you, error message and/or to what page the form sends the visitor after it is submitted.

Design

Color: Change the background color or image, text color, and border of your selected tab.

Text Style: Change the text style of your selected tab.

More

Spacing: Set the padding and margin of the element.

CSS: Change the element's CSS.

HTML: Change the element's HTML.