Is there a solution or workaround for implementing Hubspot forms linked to Zoom webinars into the dynamic CMS of Webflow?
- Create a Webflow CMS Collection for webinars with a field to store the HubSpot formId.
- On the CMS template page, insert a DIV with a custom data-formid attribute bound to the CMS.
- Add a global script in the Page Settings that reads the data-formid and uses hbspt.forms.create() to dynamically load the correct HubSpot form.
You want to embed or integrate HubSpot registration forms—linked to Zoom webinars—within Webflow’s CMS-powered pages. Here's how you can implement this workaround.
1. Understand the Challenge
- HubSpot forms connected to Zoom are static forms generated via HubSpot.
- Webflow’s CMS Collection Pages do not allow native dynamic embed code fields unless you use Custom Code fields or script-based workarounds.
- The issue is dynamically changing the HubSpot form (which is linked to a specific Zoom webinar) per CMS item.
2. Set Up Webflow CMS Collection
- In your Webflow project, create a CMS Collection for webinars or events.
- Include fields such as:
- Webinar Title
- Date & Time
- HubSpot Form Embed Code (Plain Text Field or Custom Code Field)
- This way, each CMS item stores its associated HubSpot form code.
3. Embed HubSpot Form in CMS Template Page
- Open the CMS Template Page (e.g., Webinar Template).
- Drag an Embed Element into the desired location.
- Inside the embed element, use Webflow’s field referencing to insert the dynamic embed code:
- Click the + circle inside the embed code.
- Bind it to the CMS field that contains your HubSpot form embed.
⚠️ Webflow does not support script tags inside rich text fields. The embed code must be inserted in a “Custom Code” field or directly into the embed element using bindings.
4. HubSpot Form Embed Notes
- HubSpot form embed codes include a
<script>that loads the form dynamically. - Example embed code you're working with:
- Include this format inside the Embed Element:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "XXXXXX", formId: "{{dynamic-from-CMS}}" });</script>
- To inject the
formIddynamically: - Store the formId only in the CMS field (not full script).
- In Webflow, insert static parts of the script and interpolate the
formIdusing CMS bindings.
5. Workaround Using Custom Attributes + Script
If script limitations block dynamic embed inside the Webflow designer:
- Add a DIV with a custom attribute, e.g.,
data-formid="{{formId from CMS}}" - In the Page Settings > Before </body>, add a global script that reads the
data-formidand injects the HubSpot form. - Example logic:
- On page load, select the target div.
- Use
hbspt.forms.create()and pass the dynamicdata-formidfrom the CMS. - This allows full script control and avoids Webflow’s no-
<script>restrictions in bindings.
6. Sync Webflow CMS with HubSpot
- Optionally, automate form and webinar creation by:
- Using Zapier or Make/Integromat to send new Zoom webinars to HubSpot.
- Then populate that data into your Webflow CMS using Webflow API.
This is useful if you want to maintain a scalable, automated setup for multiple webinars.
Summary
You can display HubSpot forms linked to Zoom on Webflow CMS pages by storing the formId in the CMS and injecting it using a script on the frontend. Since Webflow limits script usage in dynamic content, using a DIV + data attribute + global script is the most stable and flexible solution.