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

1. Create your form and find the embed code

Create your form as usual then click the "Actions" menu in the top right hand corner and select "Embed code"

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>

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 Stories listing page and choose "Settings" for the Story you wish to use the form on:

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

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

https://app-static.turtl.co/forms/turtl.forms.hubspot.v1.embed.html?hbsptPortalId=portalId&hbsptFormId=formId

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

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

The form will now display in your Story as both the immerse form and the backcover form. If you want to display a different form for the backcover, you can specify a different URL in the "Backcover form URL" field.

Did this answer your question?