<aside>
</aside>
Copy the HubSpot <script> and paste into the before </body> of your site code:
<!-- HubSpot Form Embed Script -->
<script charset="utf-8" type="text/javascript" src="//js-**eu1**.hsforms.net/forms/embed/v2.js" async defer></script>
Copy the Hubform <script> and paste into the before </body> of your site code:
<!-- Hubform -->
<script src="<https://cdn.jsdelivr.net/gh/oimachistudio/hubform@latest/hubform.js?hubspot_region=**eu1**&hubspot_portalId=1**44738725**>"></script>
<aside>
The script above only works for Webflow domains. To use on a custom domain, use a licensed version of the script or purchase it here.
</aside>
In your Hubform script, change the hubspot_region and hubspot_portalId to match your Hubspot account.
.../hubform.js?hubspot_region=**eu1**&hubspot_portalId=**144738725**"></script>
Copy and paste the Hubform Modal into your Webflow project and define it as a Webflow component. This component must be on all pages you want to show the modal on.
<aside>
https://copyflow.io/c/Dqo52IvtGCVbIDnkYQhT
</aside>
Apply hf-form-id attribute to any element. The id determines which HubSpot form will be triggered on click.
| name | hf-form-id |
|---|---|
| value | go-to-hubspot-to-find-your-form-id |
Copy the <script> and paste into the before </body> of your site code:
<!-- Cookie.js -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js>"></script>
We use this script to store a cookie when a user is granted access. Without this, the user would need to unlock the gated content every time they refresh the page.
2.1 Add the class hf-gated on the <div> that wraps the content you want to gate.
2.2 On the same element, add the following attribute:
| name | hf-gated |
|---|---|
| value | wrapper |
In this example we set a fixed height of 30 rem and overflow none to cut off the blog post.
Add the following attribute to the <div> that wraps your call-to-action box:
| name | hf-gated |
|---|---|
| value | hide |
<aside> 💁♂️
Tip: You can use this attribute for any element you want to hide after the gated content is unlocked.
</aside>
<aside> 💁♂️
Tip: As default, elements with hf-gated set to hide will be displayed using display: block before access is granted. If you want to use a different display setting, you can use the following attribute:
</aside>
| name | hf-gated-display |
|---|---|
| value | flex grid ... |
Inside your call-to-action <div>, add a button to open a Hubform form modal (see Form Modal guide on how to set this up).
<aside> ⚠️
Important: The hf-form-id you add to this button, will be used in next step to determine what HubSpot form unlocks the gated content.
</aside>
Add the following code into the before </body> of your site code and set the gatedId to match your call-to-action button’s hf-form-id :
<script>
hubformSettings({
gatedId: '**98c54d19-2cf1-412e-920e-5d8796b43ac2**'
});
</script>
That’s it! Once a form with the specified hf-form-id is submitted, the gated content is unlocked, and the "gatedUnlocked" cookie is set, allowing the user to access the content continuously. If you do not specify a gatedId then any form submission will unlock the gated content.