20

Formstack

You can connect forms to your Customer.io workspace to automatically add people and trigger campaigns when they submit your forms. This makes it easy to capture and respond to leads.

How it works

Formstack is a form builder that lets you create forms and add them to your website. This integration lets you identifyThe Customer.io operation that adds or updates a person. When you identify a person, Customer.io either adds a person if they don’t exist in your workspace, or updates them if they do. Before you identify someone (by their email address or an ID), you can track them anonymously., update, and trigger events for people who submit your forms.

When someone submits a form, we’ll automatically identifyThe Customer.io operation that adds or updates a person. When you identify a person, Customer.io either adds a person if they don’t exist in your workspace, or updates them if they do. Before you identify someone (by their email address or an ID), you can track them anonymously. them and update their attributes. We also collect the submission as an event that you can use to trigger campaigns and respond to people who submit your form.

To connect your form to Customer.io:

1. Scan your form: Link us to a page containing your form, so we can read the form fields and map them to attributesA key-value pair that you associate with a person or an object—like a person’s name, the date they were created in your workspace, or a company’s billing date etc. Use attributes to target people and personalize messages. Attributes are analogous to traits in Data Pipelines. in Customer.io. You’ll need to scan each form you want to connect to Customer.io.
2. Install the custom forms JavaScript snippet: This is a different snippet than our other JavaScript integrations; you only need to install the snippet once.
3. Test your implementation: Submit your form with a test profile—a profile that doesn’t represent a real person—to make sure that your fields map correctly before you send real submissions.

1. Scan your Formstack form

You’ll give us the URL of a page containing your form. We’ll scan the page and map the form fields to attributesA key-value pair that you associate with a person or an object—like a person’s name, the date they were created in your workspace, or a company’s billing date etc. Use attributes to target people and personalize messages. Attributes are analogous to traits in Data Pipelines. in Customer.io. While we scan your form to map fields to attributes, this process doesn’t capture form submissions. You’ll need to install the custom forms JavaScript snippet to complete the setup process.

Formstack doesn’t assign friendly name attributes to fields. So, after you scan your form, you’ll need to update the names of your fields in Customer.io to map to human-readable attributes. When you’re done scanning your form, see Map Formstack fields to attributes for more information.

1. Go to Integrations > Directory and select the Forms integration.
2. Select Custom and click Connect form.
3. Enter the URL of your form (or a page containing your form) and click Scan for Forms.
4. Select the form(s) you want to connect to your workspace and click Choose Form. If your page contains multiple forms, you can select each form and set a Name. The Name is how you’ll select forms in the UI.
5. Map Form Fields to Attributes and click Set Up Form.

   By default, we map the names of each field directly to an attribute. Click to prevent Customer.io from capturing a field. Take care when mapping fields; attribute names and values are case sensitive. If you segment or trigger campaigns based on attribute names and values, you want to make sure that you assign attributes and values correctly.

   

   
6. Re-map fields to attributes. Formstack fields appear as in the format field113891598, typically from top-to-bottom, left-to-right as you read your form. You’ll need to inspect your form to determine which name attribute corresponds to the field label, so that you can accurately update fields in Customer.io. See Map Formstack fields to attributes for more information.

If you haven’t already, Install the custom forms JavaScript snippet. Go to the Settings tab to find the snippet.

Map Formstack fields to attributes

We use the name attribute from form fields when we scan your form, but Formstack does not assign a friendly name attribute to fields. Instead, Formstack assigns a numeric identifier value to the name attribute in each field in the format field113891598, which you’ll probably want to update to a human-readable attribute name. To update form attributes in Customer.io, you need to know which name attribute corresponds to the field label, so that you can update field/attribute names in Customer.io.

When you scan a form, fields generally appear in Customer.io from top-to-bottom, left-to-right. To be sure that you map fields correctly, you can find the names of your fields by examining the HTML on your form page, or in Formstack by going to Forms, selecting your form, and then clicking the field you want to find the identifier for. The URL updates with each field you select; the final segment in the URL path represents the field identifier (in the format field<identifer>).

2. Add the custom forms JavaScript snippet to your site

In Formstack, you add JavaScript to a theme. You cannot add a script to the default theme. You either need to create a new theme or copy an existing one so that you can edit it.

The custom forms JavaScript snippet is not the same as our basic JavaScript snippet. You must install the Connected forms JavaScript snippet to send data from scanned forms back to Customer.io.

Because this snippet is different from our other JavaScript integrations, you might want to create a new set of credentials specifically for your forms integration.

To find and install this snippet:

1. Go to the Settings tab of your Forms integration. If you’re not already on the Forms integration, go to Integrations > Connections and select your Forms integration.
2. Click JS Snippet, select the credentials you want to use for your forms integration, and click Copy.

   

   
3. In Formstack, go to the form containing your theme.
4. Click Style and then click Advanced Code Editor.
5. Paste the custom forms JavaScript snippet into the Header HTML or Footer HTML; it doesn’t matter which.
6. Click Save Changes.

Now you can take advantage of form submissions to trigger campaigns, personalize messages, and more. See Use form data in Customer.io for more information.