1. LeanData Help Center
  2. BookIt
  3. BookIt-Hubspot Implementation Guides

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

Updated
Have more questions? Submit a request

Content:

⚠️ 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
HubSpotNewFormEditor
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.

  1. Open your form in the HubSpot Form Editor
  2. If you see an Embed button in the top right corner, your form was built using the legacy form builder.
  3. 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.
ConfirmingHubspotLegacyForm

 

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 the calendar as a modal on the same page as your HubSpot form. 

⚠️  This method 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 Form

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

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

 

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

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

 

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 you placed on your form page to handle both types of embeds correctly

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.

HubspotLegacyEmbedFormCode

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

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

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

Articles in this section

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