The Contact Form widget allows you to add a complete web form to your site. You can use it for email newsletter opt-ins, customer questions, or simply to gather feedback from your site visitors.

To add a Contact Form:

3. Modify existing fields or add new fields to collect the information you want.

4. Setup the recipient's email address and subject for receiving form responses and customize the confirmation and error messages visitor will see upon submission.

5. (Optional) Add a tracking code or conversion code into your form.

6. Add Google Sheets, Mailchimp, Constant Contact, or a third-party application using Webhooks.

To manage and delete responses received from a contact form:

Note: This option will not be available if there were no form responses on the live site.

You can respond to a customer's contact form submission directly from your email. When you receive an email from Maisey with the details of the contact form submission, click Reply to Customer in the body of the email. This allows you to reply to the email address of the customer. If the customer listed more than one email address, it will only be sent to the first email address listed.

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

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

MailChimp is a great 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 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 website builder 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.

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 your Constant Contact credentials.

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

Configure your form fields. In addition to the email address, the website builder 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.

Numerous online and cloud services offer integrations via 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 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, the contact form will send a POST request to the endpoint 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":"[email protected]","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.

Endpoints are set up 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.

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.

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 and paste your Webhooks URL into the 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.

Open the Design Editor by clicking the design tab on the top left corner or by right-clicking the widget and selecting 'Edit Design' to change the button layout, items, frame, and spacing. 

Click the Layout tab, then click the layout icon to choose a different layout design for the contact form. Change the form alignment by clicking left or right, depending on how you want the field spaces to align.

Click the Item tab to make edits to the field style and field text as well as the button style and button text. You can make changes to the design of the fields and buttons, such as background color and border styles, and make changes to the field text and button text, such as size, font, alignment, and more. Revert back to the global style by clicking the 'Revert to global design' button.

Click the Frame tab to make edits to the frame style. You can change the background by adding color or image, change the text style of the submission notification, add a border and customize the font in the form title.

Click the Spacing tab to make edits to the padding and margins of the contact form. Learn more about spacing here.

Files can be attached to a contact form. This can be accomplished by creating a file attachment field in the contact form. Visitors will be given a link in order to upload their files through the contact form.

To add this option to your form:

Contact forms are a great tool to gain valuable information from visitors and customers. Make sure to enter your email address in the Delivery Settings recipients step in order to have a copy of the information submitted.