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

Updated June 23, 2025 17:14

Content:

Overview and Key Notes
Configure Your Marketo Form
- - Add a Hidden Field to Capture the Log ID
Add the BookIt Script to Your Form Page
- - Default Marketo Form Submission Snippet
  - Custom Form Submission Snippet
Configure Your Trigger Node

Overview and Key Notes

This guide walks through how to configure BookIt to display a calendar as a modal on the same page as your Marketo form.

There are two possible submission behaviors for Marketo forms:

Default Behavior: The form refreshes the page and appends an aliId query parameter to the URL.
Custom Behavior: The form does not refresh the page (i.e., your team opted out of Marketo's default submission behavior).

This guide supports both cases. We’ll walk you through identifying your setup and applying the right configuration.

If your form redirects to a different page upon submission (such as a thank you page), please refer to the guide to display a calendar on a thank you page instead.

Configure Your Marketo Form

Add a Hidden Field to Capture the Log ID

First, make sure your Marketo 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 Marketo. This value will later be used to update the associated Lead or Contact in Salesforce.

Add the BookIt Script to Your Form Page

You’ll need to add the BookIt script to the footer or end of the <body> of your form page. There are two versions of the script, depending on how your Marketo form submits:

Use the Default Submission snippet if your form refreshes the page and appends an aliId to the URL on submit.
Use the Custom Submission snippet if your form does not refresh the page or add aliId—in other words, your team opted out of Marketo's default form behavior.

Within the snippet, 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 Field name 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.

Default Marketo Form Submission Snippet (page refresh)

Use this snippet if your form uses Marketo’s default behavior.

<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 () {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has("aliId")) {
      LDBookItV2.initialize('<Org ID>', '<Trigger Node>', true);
      LDBookItV2.submit();
    }
    else {
      LDBookItV2.initialize('<Org ID>', '<Trigger Node>', '<Hidden Field>');
      LDBookItV2.setFormProvider('marketo');
    }
  });
  
document.body.appendChild(_ld_scriptEl);
</script>

Custom Form Submission Snippet (no page refresh)

Use this snippet if you've opted out of Marketo's refresh upon form submission.

<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>', { autoSubmit: true });
    LDBookItV2.setFormProvider('marketo');
  });

  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

To map values from your form into variables used in the routing logic, follow the steps in Setting Up Form Field Mappings in Marketo. This will ensure that data entered into the form can be referenced and routed appropriately in your graph.

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.