Skip to main content

Setting Up Form Concierge with Webflow

Henrique Girardi
  • Updated

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

  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.

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
var cpTenantDomain="account_domain", cpRouterName="router_name",  wfFormID="formID";
document.getElementById(wfFormID).addEventListener('submit', function(event){
  var response = typeof grecaptcha !== 'undefined' ? grecaptcha.getResponse : true; if (!response) return;
  var lead = {};
  Object.values(event.srcElement).forEach(function(field){
  if (typeof field === 'object' && "type" in field && field.type !== "submit") {
      if (field.type=="checkbox"&&field.checked&&lead[field.name]) { lead[field.name] += `;${field.nextSibling.textContent};`}
      else if (field.type=="checkbox"&&field.checked) { lead[field.name] = field.nextSibling.textContent;}
      else if (field.type=="radio"&&field.checked) { lead[field.name] = field.value;}
      else if (field.type!="radio") { lead[field.name] = field.value;}
    }
  });
  console.log(lead);
  ChiliPiper.submit(cpTenantDomain, cpRouterName, {
    title: "Thanks! What day works best?",
    map: true,
    lead: lead
  });
});
</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.

    In the following example, the first string, "calendar," is the account_domain, and the second string, "prod-testing-router" is the 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 is the ID of the Webflow form you created. It will be a concatenation of "wf-form-" + the form's name defined in the settings (replacing spaced to dashes). Here is an example:



    In the example above, the form ID would be "wf-form-form-test."

    Another example to confirm the form ID is inspecting your page:

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