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

Updated June 23, 2025 22:47

Content:

Overview and Key Notes
Configure Your Gravity Form
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 through how to configure BookIt to display a calendar as a modal on the same page as your Gravity Form.

⚠️ Important: If your form includes Number, List, or Consent fields and you need to pass those values into your BookIt router, additional customization is required. Please contact LeanData Professional Services for support with this setup.

Configure Your Gravity Form

Add a Hidden Field to Capture the Log ID

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

Add the BookIt Script to Your Form

To add the BookIt script, open your form in the Gravity Forms builder and add an HTML field. This field won’t be visible to users on the live form, so feel free to name it however you'd like.

Next, paste the following BookIt snippet into the Content section of the HTML field. This is where the script will run to enable scheduling functionality on your form. 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 Label 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('gravityforms');
  });

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

Configure Your Submission Confirmation

In the Gravity Forms builder, navigate to your form’s Confirmation settings:

Set the Confirmation Type and Message view to Text and check the box to Disable auto-formatting.

Paste the following BookIt snippet into the confirmation message text box. Don’t worry — this will not interfere with any other confirmation messaging you'd like to include.

<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 Label>');
    if (LDBookItV2.validateTempUID()) {
      LDBookItV2.saveFormData({
        "<Desired Field Name 1>": "<Gravity Forms Merge Tag 1>",
        "<Desired Field Name 2>": "<Gravity Forms Merge Tag 2>",
        ...
      });
      LDBookItV2.submit();
    }
  });
  document.body.appendChild(_ld_scriptEl);
</script>

This snippet will require some light customization (highlighted in yellow) before it’s ready for use:

First, update the <Org ID>, <Trigger Node Name>, and <Hidden Field Name> placeholders with your own values as explained earlier in the guide.
Next, you’ll need to customize the saveFormData() function by specifying the fields you'd like to send to your LeanData BookIt graph. Replace each <Desired Field Name x> placeholder with the variable name you plan to use in your graph.

⚠️ Important: These <Desired Field Name x> names are entirely up to you, but they:

must not contain spaces, and
must be enclosed in quotes to avoid errors.

Be sure to make note of the exact names, as they’ll be referenced again in a later step when you configure field mappings in your Trigger Node.
See image below for an example.

Lastly, you'll need to replace each <Gravity Forms Merge Tag x> placeholder. The <Gravity Forms Merge Tag x>s will fill in the corresponding values for each field. To generate these, click the {..} icon and select the field corresponding to the desired field name you just entered.

Once you click on the field you would like to add, you will see the merge tag appear in the text box.

🛠️ Ensure that:

there are quotes surrounding this merge tag and
there is a comma after the end quotes on each line

Example:

  "{Name (First):1.3}",

🔁 Repeat this process for any fields you would like to send over to your LeanData BookIt graph.

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 names you created for and replaced each <Desired Field Name x> in an earlier step.

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.