Skip to main content

Setting up Concierge with WPForms

Henrique Girardi
  • Updated

 This article will cover the three steps required to set up Concierge with WPForms.

  1. Customize the API for your form
  2. Configure your Form Mapping in Chili Piper

1. Customize the API for your form

The following code will only submit the information to Concierge if no error occurred in the form and the reCAPTCHA was checked (if this is enabled in the form).

 

1.1. Copy and paste this code into a text or code editor, as there are a few changes you will need to make.

Be sure to change the values (more info below):

  • account_domain - your account subdomain
  • router_name - the Inbound Router name
  • formId - your WPForm ID
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
var cpTenantDomain="account_domain", cpRouterName="router_name", wpformID="formID";
document.getElementById(`wpforms-form-${wpformID}`).addEventListener("submit", function(event){
    event.preventDefault(); setTimeout(function() {
        var response = true; if (typeof grecaptcha !== 'undefined') {response = grecaptcha.getResponse;}
        var container = document.querySelectorAll(`#wpforms-form-${wpformID} div.wpforms-field-container`);
        var errors = container[0].querySelectorAll('div.wpforms-has-error').length;
        if (errors == 0 && response) {
            var lead = {}; container[0].querySelectorAll('div.wpforms-field [name]').forEach(function(field) {
                if (field.type != "checkbox") { lead[field.getAttribute('name')] = field.value;}
                else if(field.type=="checkbox"&&field.checked&&lead[field.getAttribute('name')]) { lead[field.getAttribute('name')] += `; ${field.value}`;}
                else if (field.type=="checkbox"&&field.checked) { lead[field.getAttribute('name')] = field.value;}
            });
            ChiliPiper.submit(cpTenantDomain, cpRouterName, {map: true,lead: lead});
        }
    }, 100);
});
</script>

Change the bold text in the code with the correct information:

  • The account_domain and router_name can be found in your Chili Piper Router. You can confirm these are right by navigating to Embed for your form. Javascript for your Inbound Concierge in your Router settings.

    The first string, ("calendar" in our example) is your account name, and the second string, "prod-testing-router" is the Inbound Router name - you will want to copy this exactly when creating the API code.

    Screen_Shot_2020-11-04_at_1.30.23_PM.png

  • The formId will match your WPForm ID you created. You can find this information by clicking on the "Embed" button on the form edit screen.

mceclip0.png

 

2.2 Once these three components are updated, you will want to add this code below the form on the page or in the footer.

 

2. Configure your Form Mapping in Chili Piper

The Javascript API provides more control over how data is submitted upon form submission. When using the API, we have submitted the values using the CRM Object structure, so this is how the fields will need to be mapped. 

This help article outlines how to set up the correct mapping when using the API and actively passing values through the code. 

Related articles