Content:
- Overview and Things to Note
- Configuring Your Form
- Adding Your Hidden Field
- Adding LeanData's Code to Your Form
- Configuring Your Submission Confirmation
- Configuring Your Thank You Page
- Creating Your Router Graph
- Setting Your Trigger Node Name
- Adding Your Field Mappings
- Configuring Your Router Graph
Overview and Things to Note
- If you are using “Number”, “List”, or “Consent” fields on your form and would like to send the values from those fields over to your BookIt router, you will need some more customized code from us for your use case. Please reach out to LeanData's professional services team for more support here.
- This tutorial will configure a calendar to display as a pop-up on a thank you page after a redirection after the submission of a Gravity Form.
Configuring Your Form
Adding Your Hidden Field
To start, please follow the instructions in Adding a Hidden Field in Gravity Forms to add a hidden field to your form to capture the log id to send over to your created leads/contacts.
Adding LeanData's Code to Your Form
Add an HTML field to your form. This is where you will insert LeanData's form code. Feel free to label this anything you want. This element will not be displayed to users on your actual form page.
Insert the snippet below to the “Content” section of the HTML field:
<script>
var _ld_scriptEl = document.createElement('script');
_ld_scriptEl.src = 'https://cdn.leandata.com/js-snippet/ld-book-v2.js';
_ld_scriptEl.addEventListener('load', function () {
LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Label>');
LDBookItV2.setFormProvider('gravityforms');
});
document.body.appendChild(_ld_scriptEl);
</script>
You’ll need to configure this snippet by changing the parts of this code to the following (remember to remove the ‘<>’ brackets):
- <Org Id> - Your 18 digit Salesforce Org ID. This will be for the Salesforce Org that has your live BookIt router graph or the one you would like to test on.
- <Trigger Node Name> - The name of the trigger node on your live BookIt router graph that you would like to enter the graph through. There will be instructions for the configuration of this in a later step, so for now just enter a name that describes the purpose of your form, like “Demo Request”.
- <Hidden Field Label> - The value you specified for the label of the hidden field in the Adding your hidden field section above.
Configuring Your Submission Confirmation
Navigate to your form’s confirmation settings:
Ensure that the “Confirmation Type” is set to “Redirect” and the “Redirect URL” is set to your thank you page.
From here we will need to configure the “Pass Field Data via Query String” option, following the example Gravity Forms provides. We will utilize this to define which form fields and values we want to send over to the LeanData BookIt graph to use in routing logic.
On the left side of an equals sign, enter a name you would like to give to each field you would like to send over to your LeanData BookIt graph. These can be any name as long as they don’t contain spaces, ampersands, or equal signs. Make note of these as we will be using these in a later step.
On the right side of the equals signs, enter the merge tags for the value of the corresponding field name.
You can chain these together with multiple ampersands to include all of the form field names and values you would like to send over.
Configuring Your Thank You Page
Add the following code to the HTML of your thank you page:
<script>
var _ld_scriptEl = document.createElement('script');
_ld_scriptEl.src = 'https://cdn.leandata.com/js-snippet/ld-book-v2.js';
_ld_scriptEl.addEventListener('load', function () {
LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Label>');
if (LDBookItV2.validateTempUID()) {
LDBookItV2.saveFormDataFromURLParams();
LDBookItV2.submit();
}
})
document.body.appendChild(_ld_scriptEl);
</script>
Again, you’ll need to configure the <Org Id>, <Trigger Node Name>, and <Hidden Field Name> as outlined above.
Creating Your Router Graph
Setting Your Trigger Node Name
In your LeanData BookIt For Forms routing graph, double click on your trigger node.
Update the “Node Name” to the <Trigger Node Name> you defined in an earlier step.
Adding Your Field Mappings
You will be able to define field mappings in the trigger node of your BookIt For Forms graph as shown below. This will allow you to map values from entries in your form to variables that can be used in logic in your graph.
Here, the “Form Field API Names” are just the names on the left hand side of the equals sign you specified for each form field when defining the redirect query string in an earlier step.
In each mapping you can either select a mapping to one of the default variable options if available, or define your own variable name and type otherwise.
Configuring Your Router Graph
From here you can configure your routing graph and the rest of your LeanData BookIt instance with the help of LeanData's professional services team!