Neon One Help Center home page
Neon One Help Center home page
support

Articles in this section

Contact Form Integrations

Last updated

To extend the reach of your Contact Form, integrate it with Google Sheets, Mailchimp, Constant Contact, or a third-party application using Webhooks.

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

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.

MailChimp Integration

MailChimp is a tool for the 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 email addresses, which are submitted to the form and send 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.

  1. Click MailChimp, and then click Connect to MailChimp.
  2. Sign in with your MailChimp credentials.
  3. Select your MailChimp contact list from the drop-down menu.
  4. Configure your form fields. In addition to the email address, you can automatically send first name and last name fields to MailChimp. You must set up the email, first name, last name fields within the form.

Note

The only fields you can connect to MailChimp are First Name, Last Name, and Email. The integration will only work if you configure the fields with the exact same name on the Contact Form. A field may be left empty if you select to Leave this field empty in the drop-down menu.

Tip

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

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.

  1. Click Constant Contact, and then click Connect to Constant Contact.
  2. Sign in with your Constant Contact credentials.
  3. Select your Constant Contact list from the drop-down menu.
  4. Configure your form fields. In addition to the email address, you 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 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

  • Zapier. Connect the 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. 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.

File Attachments

Files can be attached to submissions 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.

Note

There are no restrictions on the type of file that may be uploaded.

Site visitors are not be able to upload files larger than 10MB.

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