BookIt For Forms - Pardot Implementation - Display Calendar on the Form Page

Content:

• Overview and Key Notes
• Configure Your Pardot Form
  • • Add a Hidden Field to Capture the Log ID
    • Add the BookIt Script to Your Form
    • Configure Your Form's Thank You Content
• Add the BookIt Script to Your Form Page
• Configure Your Trigger Node
  • • Set Your Trigger Node Name
    • Add Your Field Mappings
    • Configure the Rest of Your Routing Graph

Overview and Key Notes

This guide walks you through implementing BookIt for Forms with forms built using Pardot’s native form builder (not form handlers). When properly set up, BookIt will display a scheduling calendar as a pop-up on the same page after the form is submitted.

What this guide covers:

• • Forms created with Pardot’s form builder and embedded on a non-Pardot-hosted page via Pardot’s HTML embed code.

What’s not supported in this guide:

• • Forms using Pardot form handlers without the Pardot form builder.

  • Forms embedded on Pardot-hosted landing pages using Pardot's native integration.

  • Forms with enrichment tools (like Clearbit or ZoomInfo) enabled.

⚠️ For any of the above unsupported cases, please reach out to LeanData Professional Services for additional support and guidance.

Configure Your Pardot Form

Add a Hidden Field to Capture the Log ID

First, make sure your Pardot form includes a hidden field to store the BookIt Log ID. If you haven't already done this, follow our guide on Adding a Hidden Field in Pardot. This value will later be used to update the associated Lead or Contact in Salesforce.

Add the BookIt Script to Your Form

Add the following BookIt script to your "Above Form" box on the "Look and Feel" page of your Pardot form builder. You will need to update the placeholder values (highlighted in yellow) in the LDBookItV2.initialize() function. 

Replace the placeholders with your values:

• <Org ID> — Your 18-digit Salesforce Org ID. This should match the org where your live BookIt router graph resides (or the sandbox you’re testing in).

• <Trigger Node Name> — The name of the trigger node in your BookIt router graph. Use something descriptive like "Demo Request". You’ll configure this in a later step.

• <Hidden Field Name> — The Custom Field ID of the hidden field you created earlier to store the BookIt log ID.

🛠️  Important:  Be sure to remove the<>angle brackets when inserting your actual values.

<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>

Configure Your Form's Thank You Content

Add the following snippet to the “Thank You Content” section of your form’s "Completion Actions".
You can place it anywhere within the content box — it will not interfere with any messaging or other elements you wish to display.

<script>
  var _ld_scriptEl = document.createElement('script');
  _ld_scriptEl.src = 'https://cdn.leandata.com/snippet-misc/ld-v2-iframe-emitter.js';
  _ld_scriptEl.addEventListener('load', function () {
    LDBookItV2.startRouting();
  });

  document.body.appendChild(_ld_scriptEl);
</script>

Add the BookIt Snippet to Your Form Page

Add the following code snippet to the non-Pardot parent page that contains the iframe-embedded Pardot form.

Be sure to replace the highlighted placeholder values in the LDBookItV2.initialize() function:

• <Org ID> — Your 18-digit Salesforce Org ID. This should match the org where your live BookIt router graph resides (or the sandbox you’re testing in).

• <Trigger Node Name> — The name of the trigger node in your BookIt router graph. Use something descriptive like "Demo Request". You’ll configure this in a later step.

🛠️  Important:  Be sure to remove the<>angle brackets when inserting your actual values.

<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>', true);
  });

  document.body.appendChild(_ld_scriptEl);
</script>

Configure Your Trigger Node

Set Your Trigger Node Name

In your LeanData BookIt for Forms routing graph:

• Double-click on the Trigger Node to open the editor

• Update the Node Name to match the <Trigger Node Name> you defined earlier in your embed script.

Add Your Field Mappings

You can define field mappings directly in the Trigger Node. This allows you to pass values from your form into variables that can be used in your graph’s routing logic

When specifying Form Field API Names, you'll use the Field ID or Field for each Prospect Field you're using on your form, depending on the version of Pardot you're using.

1. In Salesforce, navigate to the Account Engagement Settings tab and expand the Object and Field Configuration section on the left navigation bar.

2. Click on Prospect Fields and find either the Field ID or Field for each form field.

3. You'll reference either the Field ID or Field when setting up field mappings in the BookIt Trigger Node.

Note:  The appearance of the Pardot form builder may vary depending on your account or UI version. The steps remain the same across both versions, and this guide includes side-by-side screenshots to support each. 

🔍 Tip: If the images appear small, click on them to expand and view the details more clearly.

When adding field mappings in your Trigger Node:

• If available, select from the list of default variable options.

• Otherwise, define your own variable name and specify its type (e.g., string, email, phone).

Configure the Rest of Your Routing Graph

Now that your trigger node and form field mappings are in place, you can continue building and customizing your routing logic.

Need help? Our LeanData Professional Services team is happy to assist with advanced configuration, best practices, or validation of your setup.