Mapping to Your Webform

Mapping your form to Chili Piper allows you to integrate your existing forms with Chili Piper. After someone fills out the form on your website, Chili Piper's booking tool handles your scheduling and routing.

In this article, we will cover how to map your form to Chili Piper in two ways:

1. Map to field API names
2. Map your form using Lead Object structure

The first method is most commonly used with the javascript snippet found in your Router settings. The second method may be required if using our Javascript API. 

______

Map to field API names

1. Access your form field API names

1. Navigate to the page on your website where the form is installed
2. Right Click, Inspect on the form field you would like to map
3. Look for name= in the code
4. The field API name is the full string in quotes following name=

In the example below, the form field name for the Phone Number field is phone.

You will need to find the API names for First Name, Last Name, and Email, as these are all required fields. Any additional fields you choose to map are only necessary if used in your Queue rules or if you have Lead/Contact creation ON in your Router settings.

2. Create a Chili Piper form and map to your CRM fields

In your Workspace, navigate to Forms from the Left Sidebar Navigation and + Add New Form

1. Create a mirror of your webform fields
2. Map to the Lead and/or Contact field
3. Place the API field name from Step 1 under Form field name

Note: Form field name must match the form code exactly. This field is case-sensitive. The CRM fields you select in your form must also match the fields used in your Queue rules.

Let's do an example, here is a test form that we want to map. By using inspect element, we find:

Our form mapping will look like this:

Note: the form mapping includes other fields such as Label, Error message, and Required/Hidden on the right-hand side. These fields can be used for forms used with booking links but are not relevant for your Concierge setup.

If you are using Salesforce, you will see both Lead / Contact objects listed here. With HubSpot CRM, only the Contact will be available. 

3. Add your form to your Router

After you have mapped your website form to your form in Chili Piper, make sure you add it to the Router:

Now you are ready to test your Router!

If you notice submissions are coming through Reports with [not provided] as shown below, this is usually an indication that one or more of the fields in your form mapping is off and needs to be updated:

______

Map your form using Lead Object structure

If you are using our Javascript API or custom code to save or pass through inputs, you might be mapping your field values to new names using Salesforce Lead Object structure.

This is common when using Pardot forms, as Pardot form field values are commonly random strings of numbers that are not readable by Chili Piper or your CRM or when using the Javascript API with Hubspot forms in an iframe.

Here is an example:

$form.serializeArray().forEach(function(el){data[el.name]=el.value})
ChiliPiper.submit("account", "inbound-router", { 
lead: { 
FirstName: data.firstname, 
LastName: data.lastname, 
Email: data.email, 
Company: data.company

For each form field, we have the Lead Object API name followed by data.[form field API name]

We are telling the code that we want to call the form field this new name, so our form mapping in Chili Piper will correspond to the Lead API names. Using the example above, our form mapping will look like this:

One way to confirm you have set this up correctly is by doing a test form submission and checking your Reports by hovering over your submission data:

The field names on the left correspond to the API names being read by Chili Piper. These should match your form mapping. The values on the right-hand side correspond to the data we received for that form submission.