Skip to main content

Setting Up a Formstack Integration

Serban
  • Updated

You need to be a Chili Piper admin to follow the steps below.

1) Create a new form 

Create a New Form in Chili Piper that maps to your Formstack form

Navigate to Admin - > Forms and create a form that matches your existing website form. See how to transfer form fields names to Chili Piper 

You may end up with fields that look something like this: 

mceclip0.png

2) Create a New Concierge | Inbound Router

Navigate to Admin -> Inbound Router and create a new router 

Under "Router Settings", select the form you created in Step 2

mceclip1.png

3) Configure "Salesforce Options"

Like in the screenshot below

mceclip2.png

4) Assign your Queues

Make sure you create your queues correctly. See an example of an advanced team setup for queues (includes territories, round  robin  and account size)

Assign these queues for meeting and prospect distribution:

a) For prospects who book meetingsmceclip3.pngb) For prospects who don't book meetingsmceclip4.png

 

5) Embed your Concierge into your form

Embed the javascript code that Chili Piper provides below the formstack form you have pasted on a WordPress page.

6) Test your routing

Activate the router and start testing your routing.

7) Monitor your data 

Go live and monitor your results . Keep us posted - we are constantly striving for ways to improve those numbers! 

-------

Are you using Formstack's Salesforce plug-in?

Using the Salesforce Formstack plug-in with Chili Piper does change the process slightly as you will be leveraging the javascript API with the form.

Below is the code snippet you will need to use, updating it for your specific case.


<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
function FF_OnAfterRender() {
document.querySelector('input[type="button"]').addEventListener('click', (e) => {
e.preventDefault()
const FirstName = document.querySelector('input[name="Lead.FirstName"]').value
const LastName = document.querySelector('input[name="Lead.LastName"]').value
const Email = document.querySelector('input[name="Lead.Email"]').value
localStorage.setItem('formValues', JSON.stringify({ FirstName: FirstName, LastName: LastName, Email: Email }))
console.log(JSON.parse(localStorage.getItem('formValues')))
ChiliPiper.submit("domainname", "router-name", { map: true,
lead: {
FirstName: JSON.parse(localStorage.getItem('formValues')).FirstName,
LastName: JSON.parse(localStorage.getItem('formValues')).LastName,
Email: JSON.parse(localStorage.getItem('formValues')).Email,
}
})
})
}
</script>

What you see in bold up above will be the html form field names from the form just as outlined here.

This code must go below the form code script for Formstack <> Salesforce.

Related articles