Content:
- Overview and Things to Note
- Configuring Your Form
- Adding Your Hidden Field
- Configuring Your Form Page
- Configuring Your Thank You Page
- Creating Your Router Graph
- Setting your Trigger Node Name
- Adding Your Field Mappings
- Configuring Your Router Graph
Overview and Things to Note
- This tutorial will configure a calendar to display as a pop-up on a thank you page after a redirection after the submission of a Hubspot form.
- This tutorial will only work if you are using Hubspot’s form embed code to insert your form on your webpage and are not directly inserting your form via Hubspot’s landing page builder.
Configuring Your Form
Adding Your Hidden Field
To start, please follow the instructions in Adding a Hidden Field in Hubspot to add a hidden field to your form to capture the log id to send over to your created leads/contacts.
Configuring Your Form Page
If you are using Hubspot’s standard embed code, you’ll notice a function called hbspt.forms.create() in the code used to generate the form on your webpage.
Add the following callback option to this function:
onFormReady: ((form) => trySettingFormTarget(form)),
This means that you should have a hbspt.forms.create() function that looks something like this:
<script>
hbspt.forms.create({
region: "<keep what was already here>",
portalId: "<keep what was already here>",
formId: "<keep what was already here>",
onFormReady: ((form) => trySettingFormTarget(form)) //add this
});
</script>
Please Note: if you have multiple forms on the same page, you can repeat this step for all of your forms. If you would only like to attach to a subset (not all) of the forms on your page, please reach out to professional services for support as this will require some additional code.
Next, add the following script to the same page containing the form:
<script>
function trySettingFormTarget(form) {
if (window['LDBookItV2'] && window['LDBookItV2'].setFormTarget) {
LDBookItV2.setFormTarget(form.id ? form : form[0]);
}
else {
window.setTimeout(() => trySettingFormTarget(form), 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 () {
LDBookItV2.initialize('<Org Id>', '<Trigger Node Name>', '<Hidden Field Name>');
LDBookItV2.setFormProvider('hubspot_embed');
});
document.body.appendChild(_ld_scriptEl);
</script>
You’ll need to configure this snippet by changing the parts of this code to the following (remember to remove the ‘<>’ brackets):
- <Org Id> - Your 18 digit Salesforce Org ID. This will be for the Salesforce Org that has your live BookIt router graph or the one you would like to test on.
- <Trigger Node Name> - The name of the trigger node on your live BookIt router graph that you would like to enter the graph through. There will be instructions for the configuration of this in a later step, so for now just enter a name that describes the purpose of your form, like “Demo Request”.
- <Hidden Field Label> - The value you specified for the name of the hidden field property you created in an earlier step.
Configuring Your Thank You Page
First, ensure that your form is set up to redirect to a different page within the same domain upon submission.
You will need to add the following code snippet to that page:
<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.submit();
});
document.body.appendChild(_ld_scriptEl);
</script>
Again, you’ll need to configure the <Org Id>, <Trigger Node Name>, and <Hidden Field Name> as outlined above.
Creating Your Router Graph
Setting your Trigger Node Name
In your LeanData BookIt For Forms routing graph, double click on your trigger node.
Update the “Node Name” to the <Trigger Node Name> you defined in an earlier step.
Adding Your Field Mappings
Next, please follow the instructions in Setting Up Form Field Mappings in Hubspot to map values from entries in your form to variables that can be used in logic in your graph.
Configuring Your Router Graph
From here you can configure your routing graph and the rest of your LeanData BookIt instance with the help of LeanData's professional services team!