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:
The first method is most commonly used with the Javascript snippet in your Router settings. The second method may be required if you are using our Javascript API.
1. Map to field API names
A. Access your form field API names
- Navigate to the page on your website where the form is installed
- Right Click, Inspect on the form field you would like to map
- Look for name=in the code
- The field API name is the entire string in quotes following name=
- In the example above, 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.
B. Create a Chili Piper form and map it to your CRM fields
In your Workspace, navigate to Assets > Forms from the left sidebar and click the + Add New Form link.
By default, the new form will be always be created with the following four fields:
- First Name (required)
- Last Name (required)
- Email (required)
- Phone (the only one with the Remove button available)
After adding the new form, it's time to mirror your web form fields into this Chili Piper form. To explain how to do that, let's use this test page as a reference. Imagine that you want to map the "Company Size" field from that web form (which has the field name as "company_size_1"):
The first step you will take is adding a new field to the form. You can find a link at the end of the form page:
When mapping a new field, there are two main properties that you will carefully fulfill: "CRM Fields" and the "Form field name":
-
CRM Field(s) - Select the object fields that matches with the field you are mapping. For Salesforce, there will be two fields: Lead and Contact. For HubSpot, there will be only Contact. When a field doesn't exist in your CRM, you can leave the field empty - for instance, some web forms collect the Company name, but this field might not exist in the Salesforce Contact object.
If this mapping field is used in one of your Queue rules, ensure the CRM field matches the object in the rule.
-
Form field name - It will containthe field name from your webform, as described in step 1. In this example, the Company Size field is named "comany_size_1".
This field is case-sensitive. Ensure that it contains the same name defined in your webform and no additional blank space is included at the end, otherwise the mapping won't work.
This is what the Chili Piper form looks after mapping all fields from our test page:
Additional properties while adding a fields in the mapping form
Besides the "CRM Fields" and the "Form field name" properties, the field configuration has other properties such as Label, Error message, Required and Hidden:
When setting a field as Hidden, a new property shows up to include the field value.
All these additional field properties, including the field value for hidden fields, will only be used when meetings are booked through the router booking link.
If you are booking meetings through a web form, include the hidden field in your web form with the default value.
C. 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:
2. Map your form using the 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 the Salesforce Lead Object structure.
This is common when using Pardot forms, as Pardot form field values are random strings of numbers 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
}
});
We have the Lead Object API name for each form field 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 the submission of that form.