Notes:
This feature is available as a Professional Service if you have purchased the personalization module. To request this solution, email professional-services@turtl.co and provide the Portal ID. Our Professional Services team will add an extension to your account. Please ensure this extension is turned on in your Doc settings.
As of May 2024, HubSpot will only accept form submissions from registered domains. For your HubSpot form to work, please add your Turtl account domain to a list of registered domains in HubSpot:
In your HubSpot account, go to "Settings" -> "Account Setup" -> "Tracking and Analytics" -> "Tracking code" -> "Advanced tracking" -> "Additional Site Domains". You can add your trusted domains here.
1. Introduction
Among other personalization methods, Turtl Docs can be personalized using a reader form, which readers fill in. Their input data is stored in Turtl’s database and used to personalize their Doc.
This document describes how that data can be pushed into a third-party CRM, HubSpot, using blind form submissions.
It does so by syncing tokens within the Turtl Doc with the form field "Contact property name" from a HubSpot form: Turtl Doc editor link
Token within Turtl Doc's personalization form
Contact property name in a HubSpot form
It does that automatically when the names of tokens and the form field "Contact property name" are an exact match.
2. Setting up a HubSpot form
Create a HubSpot form like you normally would with form fields you wish to capture from Turtl’s reader form. Your HubSpot form should contain the same form fields, or fewer fields compared to the form on a Turtl Doc.
2.1. Form configuration
There are a few things to note when creating a HubSpot form.
First, for each form field, make sure you know its "Contact property name".
For example, the name of the "First name" field is called "firstname" (letter case is important here). You can find this by clicking on the form field in HubSpot and checking this on the left-hand side.
Secondly, you need to remember Hubspot’s form and Portal IDs as you will need them in step 3. In the next chapter, you will learn where to find them.
2.2. Find the HubSpot form and Portal ID
The Form and Portal ID can be found in HubSpot's Content editor and are listed on each form embed page as shown below. Click the "Embed" button in the top right-hand corner of your screen.
In the popup that appears, use the "Copy" button to copy the embed code to your clipboard.
Your embed code will look something like this:
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "1707745",
formId: "2dd13f18-f77e-43cf-9022-7359e3555f5a",
css: ""
});
</script>
Look for the lines that say portalId and formId and copy these IDs. In the example above these are:
portalId: 1707745
formId: 2dd13f18-f77e-43cf-9022-7359e3555f5a
3. Setting up a public personalized form
Design your personalization form like you normally would, but keep in mind that tokens need to be named exactly as the HubSpot field Contact property names you wish that data to flow to. Please follow the steps in 2. 1. to find the names of the form fields.
In addition to that, please add two new single line fields to the Personalization form and name the tokens "HubspotFormId" and "HubspotPortalId".
Enter the form ID you found from the "Find the HubSpot form and Portal ID section" into the "Prefill value" field for the "HubspotFormId" field and enter the portal ID into the "Prefill value" field for the “HubspotPortalId" field.
Mark both form fields as invisible under the "Advanced" settings. This would ensure that the visitors of your Doc don’t see them, but the values are passed on to the extension that syncs the data with that HubSpot form.
4. That’s it!
Once your forms are set up, you can test the functionality by filling out a public personalization form in a Turtl Doc. This should generate your personalized Doc and automatically send the submitted data to Hubspot.