BookIt For Forms - Pardot Implementation - Display Calendar on a Thank You Page

Have more questions? Submit a request

Content:

 

Overview and Things to Note

  • This tutorial will show you how to implement BookIt For Forms with forms created using Pardot’s form builder. Note that this is different from Pardot form handlers.
    • If you are using Pardot form handlers without the Pardot form builder, please reach out to LeanData professional services for additional support.
  • This tutorial assumes your form is iframed into your web page using Pardot’s HTML embed code and not using built in Pardot forms integration with Pardot landing pages (uncommon). If you need to use this method, please reach out to LeanData professional services for the necessary code and instructions.
  • 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 Pardot form.

 

Configuring Your Form

Adding Your Hidden Field

To start, please follow the instructions in Adding a Hidden Field in Pardot to add a hidden field to your form to capture the log id to send over to your created leads/contacts.

 

Adding LeanData Code to Your Forms

Add this snippet of code to the code section of your “Above Form” box on the “Look and Feel” page of your form builder.

<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 Name>');
  LDBookItV2.setFormProvider('pardot');
});
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 “Custom Field ID” of the hidden field you created in an earlier step.

 

Configuring Your Form Page

You will need to add this code snippet to the parent page containing the iframe of the form:

<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 Name>');
});
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.

 

Configuring Your Thank You Page

First, ensure that your form is set up to redirect to a different page within the same domain upon submission.

You will need to add the following code snippet to that 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 Name>');
  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 the “Field ID” names for each Prospect field you’re using in your form.

In each mapping you can either select a mapping to one of our 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!

 

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share