This feature available on All Plans
Overview
Form Integrations allow you to submit your list entries to third-party services automatically. Once you enable an integration, all new entries to that form will be sent to the service you configured.
Note: Pre-existing entries are not retroactively submitted.
Getting There
From the Campaign Builder, click the widget settings icon on your Form Container, then click open the Advanced section using the link on the left. Then, in the Integrations subsection, click the Configure integrations button.
This will open the Integration Settings pop-up; you'll then want to click the Google Maps, Mailchimp or Webhook option, depending on the integration you'd like to establish.
Google Maps
What does it do?
Google Maps is used by people the world over to find and verify addresses anywhere on the planet. The integration can be configured to suggest and auto-fill the entrant's address in your form.
Setup Notes
- The Google Maps integration works with the standard Address 1 field type to show matching addresses in a drop-down as the entrant types; if the entrant clicks an address, it will automatically fill in the rest of the address fields in your form. If you don't have an Address 1 field, the integration will not work properly.
- This feature does require a Google Maps API key, which ShortStack does not provide.
Settings
- Profile name - A title for the Google Maps profile, in case you plan on using more than one in a single ShortStack account.
- Profile description - An optional field for describing any differences between this and any other Google Maps profiles on your account.
- API key - A string of characters provided to you by Google Maps that allows you to use their API on a third-party platform (like ShortStack). Information on finding your API key can be found on Google's Use API Keys support doc.
Mailchimp
What does it do?
Mailchimp is a newsletter marketing service that allows users to design, send, and track email newsletter campaigns. The Mailchimp integration can be configured to add the entrant's details to the Mailchimp list you choose.
Setup Notes
- MailChimp requires that users opt-in to receive your newsletter, so you must have a boolean (yes/no) checkbox field on your form for this purpose. If you don't have one when you set up your integration, you'll see a warning.
- MailChimp also requires an email address, so you must have an email address field on your form. Similar to the checkbox, if you don't have one when you set up your integration, you'll see a warning.
Settings
- Enable integration - Checking this box enables the Mailchimp form integration.
- Mailchimp API Key - Use this field to add your API key. The key can be found by clicking Mailchimp API Key, or inside your MailChimp account under Account > Extras > API Keys.
- Mailchimp audience - This drop-down allows you to select an audience from your Mailchimp account; this is where the entries will be sent when the form is submitted.
- Choose a field for the opt-in checkbox - With this drop-down, you can select a checkbox from your form to use as the opt-in field.
- Send this notice to new subscribers - Select the notice sent to your new entries from Mailchimp. These notices are configured in your Mailchimp account.
-
Mailchimp Tags (optional) - This allows you to add Mailchimp tags to entries that are submitted via ShortStack. Use the ShortStack Field drop-down to select a custom Text or List Field (which can be hidden, if desired) to set this value for each entry.
Field Mapping
In this section, you'll see three columns: Mailchimp Label shows the fields ("labels") you have established in your Mailchimp account. The next column, Mailchimp Type, lists how Mailchimp has classified that specific field on its end. The drop-downs in the ShortStack Field column allow you to tie a specific field in your ShortStack form to the corresponding Mailchimp label - select the field from the drop-down that you want to map to the selected Mailchimp field.
Webhook
What does it do?
A webhook is a piece of code that allows users to pass information collected in one place (in this case, your ShortStack form) and pass it to a third party.
Writing/creating a webhook from scratch requires considerable coding knowledge, for which we wouldn't be able to provide support. We recommend using a program called Zapier to set up webhooks for third-party apps for which we don't have native integrations.
In our Setting Up a Webhook with Zapier help doc, you'll see step-by-step instructions on how to get webhook code generated using that tool.
Choosing/Adding a Profile
To set up a webhook, you'll need to choose or set up a webhook profile - each profile contains specific settings for what data from your entries are sent. To select an existing profile, you'll click the profile to select it, then click Select at the bottom. There are also icons on the right to duplicate or edit each profile before selecting it, if needed.
Once you've selected a profile, you'll be directed back to the Integration Settings pop-up, and the name of the profile you selected will be displayed.
To add a new profile, click the Add button at the bottom of the Integration Settings pop-up and the Webhook Profile Details pop-up will appear; this is where the bulk of your webhook setup is done on ShortStack's end.
Settings
- Profile name - This field sets the name of this webhook profile.
- Profile description (optional) - Write a short description of what this profile will be used for; while this is optional, it's recommended to help keep profile organization neat and tidy.
- Webhook URL - Whether you use Zapier or write your own webhook code, you'll end up with a URL to use for your webhook - paste that URL into this field.
- Content type - With this drop-down, you can set up the type to be either application/x-form-www-urlencoded or application/json. This should automatically populate once you paste in your URL, and should only be changed if you understand the difference between the two types.
-
Secret key (optional) - Add a secret key here if you're planning on using one to secure your webhook. More information on this can be found in our Securing Webhook Form Integrations help doc.
Field Mappings
In this section, select the fields that contain the data that you'd like to be captured via the webhook. You can change the order of the fields by clicking and dragging the icon on the left side of each field. To edit any specific field, click the
icon, and to remove the field from the profile entirely, click the
icon. You can also toggle the display of how the field names appear by clicking Toggle Display.
If you need to add more fields — or a standard field that isn't already shown — click Add One Field or Add All Standard Fields at the bottom of the Field Mappings section.
Once you've finished setting up your mappings, click Save at the bottom. Then, click your newly-created profile in the Select Webhook Profile pop-up, and click Select to use it.
Troubleshooting
Most integration errors are caused by one or more of the following issues:
- The external service's fields have changed.
- The external service contains a required field that the ShortStack form isn't collecting.
- The account information (API Token, webhook URL, etc.) has changed and needs to be updated.
- The external service is currently inaccessible.
When ShortStack has trouble sending an entry to an integrated service, the error will be noted within the affected entry in your ShortStack form database.
To identify errors:
- Select Lists from the main menu.
- Click the name of the list to view its entries.
- Any entries that experienced integration errors will display a warning icon. Click the icon for details on the error.
Adding a Webhook Token
Depending on the CRM you are using, you might need to use a webhook token to make the integration work. Here's how to add a webhook token.
- In the field mapping section, Add One Field.
- In the Type drop-down, select Set Constant.
- In the Constant Value field, paste your webhook token.
- In the Output Field Name, type WebhookToken.
- Click OK.