Chili Piper + Gravity Forms - Redirect to "Thank you page" for booking in Concierge

This integration is unique to Gravity Forms. To follow this guide, you must have the Gravity Forms plugin installed on your WordPress site.

In this article, we will cover how to run Chili Piper when you redirect to a "Thank you page" using Gravity Forms. For the purposes of this article, the thank you page is any page that appears after a form is submitted.

This method works by using Gravity Forms to redirect to a page with the values from the form added as query parameters in the URL. These parameters will be used to run Chili Piper.

Table of Contents

• Form Mapping in Chili Piper

• Setup Redirect in Gravity Form

• Building the query string in Gravity Forms

• Add Chili Piper code to Thank You page

• Troubleshooting

Form Mapping in Chili Piper

If you haven't created a Concierge router yet, please refer to our guide on doing this first.

Once we have a router we will need to modify its trigger to ensure that the values from the Gravity form are mapped. These are the values that will be passed to the query parameters of the Thank you page URL. 

In this case, we modify the "third party form" trigger option.

These "form field name" values will eventually be used as the URL query parameters. Your thank you page with the values from the example above would look something like this when the form is submitted:

https://chilipiper.com/thank-you-page?FirstName=value&LastName=value&Email=value&Company=value

You can use whatever field names work best for you. ie: "FirstName", or "first_name" or "givenName" are all viable choices. 

While we're at it, if you want to use non-standard or custom data fields, please refer to our article on how you can create new data fields to use on forms. In short, any form field you have on the Gravity form should also be defined as a "data field" in Chili Piper.

You can add as many additional fields / properties as needed. 

Important Note
Avoid using a parameter name from this list of reserved WordPress terms. One commonly used parameter that is a Reserved Term is ‘name’, which will result in a 404 Not Found error.
At a minimum, you will need an email field defined in order for routing to work.

Setup Redirect in Gravity Form

Within the Gravity Form plugin in Wordpress we need to define a page redirect after the form is submitted.

Steps:

1. Edit the form you wish to use and select from the menu Settings → Confirmations
   
   
2. From Confirmations, click "Edit" on the "Default Confirmation"
   
   
3. Check that selected "Confirmation Type" option is "Redirect"
   
   
   
4. Enter the "Redirect URL" where a prospect is redirected to after a form submission. This is your "Thank you page".
   

Building the query string in Gravity Forms

Note about the following Gravity Form settingsThese steps are subject to change, as is the UI since these are not maintained by Chili Piper.

Please refer to Gravity Form's own article on adding query string parameters for the most up-to-date instructions, or if you run into issues adding these merge tags. 

While we are still on the "Confirmation Type" setting of the Gravity form from the previous section, we need to edit the "Pass field data via query string" field.

The string will be composed of all the fields we mapped previously.

For example, we mapped the values of "FirstName", "LastName", "Email" and "Company" in our Chili Piper mapping above.

You will need to type these values out exactly as you named them in Chili Piper.

The format is "field_name=&field2_name=" etc... ie:

FirstName=&LastName=&Email=&Company=

Once you have this format, we need to add the values from the form. We will be using the dynamic merge tags provided by Gravity forms. They are found under the merge icon located to the right side of the field:

Position your cursor after the first "=" and click the merge tag icon. A list of values will be provided that should be based on your actual form fields.

If your cursor is after "FirstName=" you would select the "Name (First)" option from the menu, or whichever value is appropriate.

Do the same thing for each field you have in the list, moving your mouse cursor after each "=".

Refer to our gif example below for how this might look:

Once the above is done for each field, it should look something like below:

Click "Save Confirmation" to finish up.

Add Chili Piper's Code to Thank You page

On the page you defined as a "Redirect URL" from the previous section, you will need to add your concierge snippet.

You can find this code in your Concierge Router's "Embed" section in the flow builder by clicking "On a Website" and selecting "GravityForms" from the Form Type dropdown.

Then, select the option "With a Redirect Page" from the Location dropdown.

The snippet will look something like this, replacing "domain" and "router" with your own:

<script src="https://domain.chilipiper.com/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
<script>
ChiliPiper.deploy("domain", "router", {
    "formType": "GravityForms"
})
</script>

If you are adding it to the actual Wordpress page code, it may look something like this:

Publish the page - we should be all set!

Troubleshooting

We should see the following flow:

1. Submit the form on the landing page.

2. The form redirects us to a thank you page. The URL in the browser should have all the appropriate field names AND values appended to it.

3. Chili Piper should pop up and provide a slot to book a meeting immediately, unless it disqualifies.

If you didn't see it pop up, check the Router Logs in Chili Piper to ensure your test values are reaching Chili Piper.

If you don't see the entries in the logs, please review all steps above to ensure they are correct, especially related to the code snippet being on the "thank you page" we are redirecting to.

You will also want to ensure that at least an email field exists in the URL at a minimum, and that it has a value added properly.

The email field name should match what is mapped in Chili Piper.

If you are not seeing values added, you will want to double-check your formatting in the Gravity Forms "confirmation" settings.