Embedding a HubSpot form

Learn how to capture sign-ups directly into HubSpot from Turtl

Maruša Barle avatar
Written by Maruša Barle
Updated over a week ago

Turtl supports embedding Hubspot forms in place of the native Turtl form. All Turtl needs is a little bit of information about your form, and this article will show you how this is done.

Note: 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. Create your form and find the embed code

Create your form as usual then 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.

2. Find your Form ID and Portal ID

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>

You can input your embed directly to our Lead form generator to obtain the form URL that you can input to Turtl Doc settings.

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. Tell Turtl about your form

Navigate to the main Turtl Docs listing page and choose "Settings" for the Turtl Doc you wish to add your form to:

On the Settings page, choose the "Forms" tab:

Here, you have two options:

1. Paste the URL you obtained from the Lead form generator.

2. Paste the following URL into the "Form URL" field, replacing portalId and formId with the values you found in the previous step:

/forms/turtl.forms.hubspot.v1.embed.html?hbsptPortalId=portalId&hbsptFormId=formId

For example, with our example embed code above this would be:

/forms/turtl.forms.hubspot.v1.embed.html?hbsptPortalId=1707745&hbsptFormId=2dd13f18-f77e-43cf-9022-7359e3555f5a


The form will now display in your Turtl Doc as both the immerse form and the back cover form. If you want to display a different form for the back cover, you can specify a different URL in the "Back cover form URL" field.

Note: Styling will be applied automatically to your Hubspot forms for Enterprise accounts but not others. If you notice any styling issues, please contact support@turtl.co or your Customer Success Manager.

Optional Steps

1. 'Thank you' message

The "thank you" message will be displayed when a reader has submitted the form on the back cover of your doc. By default it will just say "Thank you", but this can be changed to whatever you want. At the end of the URL you just created add the following code:

&hbsptCompleteMsg=

After the code, type the message that you would like to be displayed, without any quotes and with spaces between words.

A message in English would look like this:

&hbsptCompleteMsg=Thank you for your interest in our company. A member of our team will be in touch with you shortly.

Thanks for signing up in Mandarin "感谢你注册!" would look like this:

&hbsptCompleteMsg=感谢你注册!

2. Hidden Fields

  1. In the properties of your form select “Create New”

  2. On the Form Fields page, select "single-line text”

  3. In the Basic Info section, select Object type as “Contact”, your desired Group, and add one of the following options to the label field:

Labels

ttl_story_id (This label will pull the Turtl Doc ID)

ttl_story_link (This label will pull the Turtl Doc URL)

ttl_story_title (This label will pull the Turtl Doc Title)

(These options are detailed further in the support article Adding hidden fields to your forms.)

4. Once the property is created, click on the new field in the form to edit and toggled on the “Make this field hidden” option.

5. Save your new field and update your form!

Notes:

With your Hubspot Integration complete and provided you are on Enterprise Hubspot account, you will not only see leads from your embedded Hubspot form in Hubspot CRM but also in your Turtl analytics dashboard. These leads will appear in the Known Readers section or in your analytics csv.

Without a Hubspot Integration, your identified leads will only be located in Hubspot. Turtl will still collect leads through your Hubspot form, but they will be unidentified.

You can read more about Individual Reader Analytics here.

Did this answer your question?