Title

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

URL Name

BookItForFormsHubSpotImplementationDisplayCalendaronaThankYouPage6901f0b07cf65

Step-by-Step

Content:

Overview and Key Notes
Configure Your HubSpot Form
- - Add a Hidden Field to Capture the Log ID
Add the BookIt Script to Your Form Page
Add the BookIt Script to Your Thank You Page
Configure Your Trigger Node
Supporting Both Legacy and Current Embedded Forms

⚠️ Important: Choose the Right Guide for Your HubSpot Form Type
This guide is for:

- HubSpot forms (using the form editor) whether embedded on your website (an external webpage) or added to a HubSpot landing/website page
- legacy HubSpot forms (using the legacy form editor) that are only used on HubSpot landing/website pages

If you're only working with legacy embedded HubSpot forms—added to a non-HubSpot page using an embed code—check out this guide instead.

Not sure if you're using a legacy embedded form?

Follow these steps to check whether your form was ever embedded using the legacy method. If so, you should use this guide instead.

Open your form in the HubSpot Form Editor
If you see an Embed button in the top right corner, your form was built using the legacy form builder.
Click on the Embed button and open theEmbed code. If you’ve ever copied and pasted the embed code from here into a non-HubSpot page (like your company website), that form is considered a legacy embedded form, and you should follow the legacy guide.

Using both legacy embedded and current embedded HubSpot forms?

If your external webpage includes legacy embedded forms (built with the Legacy Form Editor and manually embedded on external, non-HubSpot pages), and you’re now adding new embedded forms created with the current Form Editor, you'll need a slightly different setup to support both.

We recommend reading through the full guide first, then checking out the Supporting Both Legacy and Current Embedded Forms section at the end to make final adjustments specific to your setup.

Overview and Key Notes

This guide walks you through how to display a calendar as a pop-up on a thank you page, triggered after a user submits a HubSpot form and is redirected to that page.

⚠️ This method only applies if your form was built using HubSpot’s Form Editor or the Legacy Form Editor, and is either:

Directly placed on a HubSpot-hosted page (Form Editor or Legacy Editor) or
Embedded on an external page using HubSpot’s embed options (Form Editor only)

If you’ve ever copied and pasted legacy embed code into your external website manually, refer to the guide for legacy embedded forms instead.

Configure Your HubSpot Form

Adding a Hidden Field to Capture the Log ID

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

Add the BookIt Script to Your Form Page

Add the following BookIt script to the footer of your HubSpot page or to the same page where your non-legacy HubSpot form is embedded. 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 internal name of the hidden HubSpot property you created earlier to store the BookIt log ID.

🛠️ Important: Be sure to remove theangle 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('hubspot');
  });

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

To add the code to the footer of your HubSpot page:

Open your page in the HubSpot page editor
Navigate to Settings (top right corner)
Scroll down to the Advanced section
Paste the BookIt script into the Footer HTML section

Add the following code to the footer of your landing page:

Add the BookIt Script to Your Thank You Page

First, make sure your form is configured to redirect to a thank you page on the same domain as the form page. This page can be:

- A HubSpot landing page, or
- A page built with another platform, as long as it's on the same domain.

Add the following BookIt script to that page:

- If it's a HubSpot landing page, add the script to the Footer HTML as shown in the previous section.
- If it's an external page, add the script anywhere it will run on page load—ideally near the bottom of the page. Avoid placing it in the <head> tag

The script will load the LeanData BookIt library and trigger the calendar once the page loads.

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 theangle 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);
    LDBookItV2.submit();
  });

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

`Supporting Both Legacy and Current Embedded Forms`

If you're using both legacy embedded forms and newer embedded forms on your external site (i.e., you've copied and pasted embed codes for both form types into non-HubSpot pages), there are a few adjustments required to ensure BookIt works consistently across both.

📘 Note: We recommend first reading through this full guide to understand the standard setup. Then, return to this section to make the necessary final adjustments for dual-form support.

⚠️ Important: If you have multiple legacy forms on the same page and only want to target specific forms (not all), this requires additional customization. Please contact LeanData Professional Services for assistance.

`What's Different?`

To support both legacy and current embedded HubSpot forms on the same external site, you'll need to:

Update the embed code for your legacy HubSpot forms to support form targeting
Slightly modify the BookIt script on your form page to handle both types of embeds correctly
Slightly modify the BookIt script on your Thank You page

`Update the Embed Code on Legacy Form`

Navigate to the Embed code of your legacy form and look for the hbspt.forms.create() function within the script.

User-added image

You’ll need to modify your form embed code to include an onFormReady callback that tells BookIt which form to target.

Add the following line inside your hbspt.forms.create configuration:

onFormReady: ((form) => trySettingFormTarget(form,<formId> ))

Replace <formId> with the same formId already defined in the embed code. These values must match exactly.

Your final embed code should look like this:

<script>
 hbspt.forms.create({
   region: "<keep what was already here>",
   portalId: "<keep what was already here>",
   formId: "abc-123-def-456", // 👈 Your actual formId value
   onFormReady: ((form) => trySettingFormTarget(form, "abc-123-def-456"))
 });
</script>

⚠️ Make sure your formId is copied exactly — including the quotation marks — in both places.

`Update the BookIt Script on Your Form Page`

Adjust the BookIt script on your form page to below. Be sure to update the placeholder values (highlighted in yellow).

<script>
function trySettingFormTarget(form, formId) {
  if (window['legacyHubspotForm'] && window['legacyHubspotForm'].setFormTarget) {
    legacyHubspotForm.setFormTarget(form.id ? form : form[0]);
    legacyHubspotForm.setFormId(formId);
  } else {
    window.setTimeout(() => trySettingFormTarget(form, formId), 2000);
  }
}

var _ld_scriptEl = document.createElement('script');
_ld_scriptEl.src = 'https://cdn.leandata.com/js-snippet/ld-book-v2.js';;
_ld_scriptEl.addEventListener('load', function () {
  // for legacy form
  LDBookItV2.initialize('<Org ID>', '<Trigger Node>', '<Hidden Field>', { namespace: 
  legacyHubspotForm.setFormProvider('hubspot_embed');

  LDBookItV2.initialize('<Org ID>', '<Trigger Node>', '<Hidden Field>');
  LDBookItV2.setFormProvider('hubspot');
});

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

`Update the BookIt Script on Your Thank You Page`

Adjust the BookIt script on your Thank You page to below. Be sure to update the placeholder values (highlighted in yellow).

<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, { namespace: 'legacyHubspotForm' });
    LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', true);
    
    if (window.localStorage.getItem('LDBookItV2_savedFormData')) { 
        LDBookItV2.submit(); 
    } else { 
       legacyHubspotForm.submit(); 
    }
  });
  document.body.appendChild(_ld_scriptEl);
</script>

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

Information

Content:

What's Different?

Related Articles

Trending Articles

`What's Different?`