Contact Form Integrations

Integrate your Contact Form with Google Sheets, Mailchimp, Constant Contact, or a third-party application via Webhooks to expand its reach.

To add integrations, right-click the Contact Form, select Edit Content, and then navigate to the Integrations tab.

Google Sheets Integration

To add contact form submission data to a spreadsheet in Google Sheets, use the Google Sheets integration. The spreadsheet will contain all contact fields from the form, as well as a timestamp from when the form was submitted.

1. Click Sign in with Google, then Google Sheets.
2. Allow connecting to your Google account by clicking Allow. If your computer is linked to multiple Google accounts, choose the one you want to connect to this form.
3. Choose whether to add data to an existing spreadsheet or create a new one.
4. Choose the spreadsheet to which you want to submit the form data. You can choose a spreadsheet from a list or search for a specific sheet using the search bar.

• You can connect each form on the site to a different spreadsheet, including spreadsheets in different Google accounts if you have multiple forms on the site.
• You can link several forms to the same spreadsheet. In this case, ensure that the form's fields and order are identical to the information submitted.
• When you submit form data to a Google spreadsheet, you can still download the data as a.csv file and receive form submission emails.

MailChimp Integration

MailChimp is a tool for distributing email campaigns, newsletters, and other similar content. Site owners can manage contact lists of potential clients (site visitors) by collecting email addresses submitted to the form and sending them automatically to MailChimp using the new form integration.

You must have an account with MailChimp. Create a mailing list in your MailChimp account to collect contact information once you have an account.

1. Click MailChimp, followed by Connect to MailChimp.
2. Enter your MailChimp login information.
3. From the drop-down menu, select your MailChimp contact list.
4. Set up your form fields. In addition to the email address, you can send the first and last name fields to MailChimp automatically. Within the form, you must configure the email, first name, and last name fields.

You can only connect MailChimp to the fields First Name, Last Name, and Email. The integration will only work if the fields on the Contact Form have the same name. If you select Leave this field empty from the drop-down menu, a field may be left empty.

If you have already configured your MailChimp integration and want to test your form with a test email (for example, test@test.com), MailChimp may block test emails without notice. We recommend using a real email to test your MailChimp integration.

Constant Contact Integration

This integration is similar to MailChimp in that it allows site owners to create mailing lists in their Constant Contact accounts.

You must have an account with Constant Contact. Create a mailing list in your Constant Contact account where the contact information will be collected once you have an account.

1. Click Connect to Constant Contact after tapping Constant Contact.
2. Sign in using your Constant Contact login information.
3. From the drop-down menu, select your Constant Contact list.
4. Set up your form fields. In addition to the email address, you can send the first name, last name, and phone number to Constant Contact automatically. Within the contact form, the user must configure the email, first name, and last name fields. By default, an email address and a text message are added.
   

Webhooks Integrations

Many online and cloud services provide integrations via a method known as Webhooks. Webhooks deliver notifications to a unique web address known as the endpoint URL. When the contact form is submitted, you can connect it to send an event.

To use Webhooks to connect the contact form to another service, create a custom endpoint URL with your desired service and paste it into the Webhooks integration field in the contact form. When you enter a Webhook URL and submit the form, a POST request is sent to the endpoint with the data in the body in JSON format. An example of JSON data is shown below:

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

The date and Form of Submission Title will always be granted. The other fields (field name: value) are based on the form's fields.

All field data is set as a string and enclosed in quotation marks. For example, the number 7 is sent as "7."

Create an Endpoint URL

Endpoints are created on third-party services (such as Zapier or Slack) or on a server that you control. These endpoints are specifically configured to receive Webhook notifications.

Integration Ideas

• Zapier. Connect the data from the contact form to Zapier for limitless possibilities. Connect to almost any modern cloud service, including CRMs such as Salesforce, Sugar CRM, Zoho, and others.
• Slack. A powerful messaging app to which you can connect to receive notifications when form data is submitted.
• Custom Integration.  Make your own custom Webhooks to connect to the contact form. Save submissions in a database, for example, or connect to custom apps or third-party services.
  

Example Webhooks/Endpoint URL Setup on Slack

1. Open the main account drop-down in the Slack app, then click Apps & Integrations.
2. The Slack website is launched. Click Build in the upper-right corner.
3. Click Make a Custom Integration.
4. Choose Incoming Webhooks.
5. Choose an existing channel or create a new one to which your messages will be posted.
6. Take note of your Webhooks URL.
7. Make any necessary changes to the settings and options, then click Save Settings.
8. Copy your Webhooks URL and paste it into the Webhooks field in the Content Form editor.
9. Click the Done button.

To test the integration, preview your site and fill out the contact form.

Each time your contact form is submitted, you will receive a message on Slack.

File Attachments

By adding a file attachment field to the contact form, files can be attached to submissions. Links to uploaded files can be found in the form submissions' download file, as well as in any of the form integrations like Webhooks and Google Sheets.

The type of file that can be uploaded is unrestricted.

Visitors to the site will be unable to upload files larger than 10MB.

1. To open the Content editor, click a contact form.
2. Click Add field on the Form Items tab, and then select File attachment from the Field type drop-down.
3. Type Placeholder text to change the name of the field.
4. A file upload link has been added to your form.