Contact Form
Use the Contact Form widget to create a comprehensive form with a variety of fields.
To add this form, open the Widgets tab and search for the Contact Form widget.
Drag this widget into the desired location of your editor and it will open the content and design options.
Form Items
Use this section to add and manage the form items. To add a new field in your form click “+Add field” and enter the field label, field type, placeholder text, and define other options.
You can re-arrange fields by clicking and dragging, and you can delete by selecting the “x.”
Some field types allow images to be added: Checkboxes and radio buttons. By using images with checkboxes or radio buttons, users will see an image next to each option. This provides users a clearer choice.
Scroll down to edit the text on the submit button and the title, as well as add reCaptcha validation.
Submission
Use the “New submission notification” section to define the email address where form submissions will be sent. Leaving the field empty will allow all form submissions to go to the primary email address in the Business Info section of your site’s Content Library. This is the ideal method, as it allows all the forms on your site to stay synced to one email, and allows the submission email to be updated on all forms at the same time by changing it in the Business Info area.
If individual forms require specific submission recipients, you may enter them into the individual forms, if multiple emails are added a comma can be used to separate them.
Example: jim@site.com,pam@site.com,michael@site.com).
This tab is also where you will set the:
Email Subject Line: If left empty, the default 'Email subject line' will include your form title and its page name.
From Name: If left empty, the default 'From' name will be your sites web address.
Use the “Actions after submission” section to:
- Define a thank you message
- Define an error message
- Enable and define a redirect after submission
- Set up an auto-reply email that will be sent to the user after they submit a message to the form.
Use the “Tracking” section to add a tracking code, such as AdWords.
Replying To From Submission
When a form submission is received, you can reply to the submitter by using your email client's "Reply" button. This will then create a new email reply with the submitter's email address pre-populated in the new message. This reply will also include a copy of the original email that they sent in.
Integration
Use this section to send data to a third-party service.
To integrate your form with one of these services, click the relevant tab and follow the instructions to sign in to the service. If you don’t have an account, you can first create one by visiting the third party site (Google, MailChimp, Constant Contact)
Google Sheets
To integrate your contact form with a Google Sheet so that the information from the form submission is automatically added to a Google spreadsheet, navigate to Integration > Google Sheets, and click Sign In With Google.
After signing in from the popup window and providing the builder the necessary permissions, you then have the option to use a pre-existing spreadsheet, or create a new spreadsheet specific to that contact form. We recommend in most cases to create a new spreadsheet for the form, to ensure the data will be properly collected.
Once the Create New Spreadsheet option has been selected, your Google sheet will now be created, connected to the form widget, and ready to collect the form's data.
Webhooks
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.
Connect To Data
To connect the form to a collection you will first add the contact form to a dynamic page. Learn more about creating dynamic pages on our training doc here.
- With the form on the dynamic page, open the widgets option panel and click the gear icon.
- Select Connect To Data.
From the new window, you can connect the following form fields to fields from the collection:
- Email subject suffix
- First additional field
- Second additional field
