# 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[](#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.](/journeys/attributes/) 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[](#add-your-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.](/journeys/attributes/) 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](#js-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](#map-formstack-fields-to-attributes) for more information.  You only need to scan a form once If you use the same form on multiple pages, we’ll treat them as the same form (so long as the custom forms JavaScript snippet is installed on all pages containing the form). 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. [![map form fields to attributes](https://docs.customer.io/images/forms-map-fields.png)](#5d00a9288e24a6f49201c4559804fa69-lightbox) 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](#map-formstack-fields-to-attributes) for more information. If you haven’t already, [Install the custom forms JavaScript snippet](#js-snippet). Go to the *Settings* tab to find the snippet. ### Map Formstack fields to attributes[](#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`).  Test a form submission to check your Formstack mappings Because Formstack fields don’t have friendly names, we strongly recommend that you test a form submission to make sure that your fields map to the correct attributes. After you map your form and install the custom forms JavaScript snippet, submit a form and find the person in the **People** tab in Customer.io. If that person doesn’t have the correct attributes, you can update the field/attribute names in Customer.io to match the Formstack field names. ## 2\. Add the custom forms JavaScript snippet to your site[](#js-snippet) 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](https://help.formstack.com/s/article/Custom-Form-Themes-and-CSS). 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**. [![click JS snippet on the forms settings page](https://docs.customer.io/images/forms-settings.png)](#b0ff4d3b26e724b4ec06510f615d8a74-lightbox) 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**. [![add Custom forms JavaScript in formstack](https://docs.customer.io/images/forms-formstack.png)](#025f3a29c71b1fad89422b064a917fa5-lightbox) Now you can take advantage of form submissions to trigger campaigns, personalize messages, and more. See [Use form data in Customer.io](/integrations/data-in/connections/forms/forms-in-campaigns) for more information.