Is there a solution or workaround for implementing Hubspot forms linked to Zoom webinars into the dynamic CMS of Webflow?
TL;DR
- Create and connect a HubSpot form to Zoom, then copy its embed code.
- Add a plain text field in your Webflow CMS to store the embed code and use a Webflow Embed element on the CMS Template page to dynamically insert the form.
Integrating HubSpot forms (linked to Zoom webinars) into Webflow’s CMS collections requires a workaround because Webflow does not support dynamic script injection natively in Rich Text fields. However, you can achieve this with a few steps using Embed elements and custom fields.
1. Set Up Your HubSpot Form for the Zoom Webinar
- Create a HubSpot form that includes all fields required for webinar registration.
- Connect the form to Zoom via the native Zoom integration in HubSpot or using workflows (requires HubSpot Pro or integration tools like Zapier or Make).
- Copy the embed code for the HubSpot form once it's connected.
2. Add an Embed Field to Your Webflow CMS
- In Webflow CMS, go to your collection (e.g., Webinars).
- Add a Plain Text field (not Rich Text) called something like Form Embed Code.
- Paste the form embed code (from HubSpot) into this field in each CMS item.
3. Use the Embed Element on the Template Page
- On the CMS Template page (e.g., Webinar Template), drag a Webflow Embed component onto the canvas.
- Insert the embed code using Webflow's dynamic data:
- Use
Add Fieldinside the Embed block to insert your Form Embed Code field. - This will render your HubSpot form dynamically per CMS item.
4. Handle Styling and Script Conflicts
- Ensure scripts included in the embed code don’t conflict with Webflow’s structure.
- If the form does not render correctly, try hosting the form on a standalone page and embedding it via an iframe stored in the CMS (e.g.,
<iframe src="https://yourhubspotform.com?campaignid=12345" width="100%" height="600" loading="lazy"></iframe>).
5. Optional: Use External Tools to Sync Webflow and HubSpot
- Use Zapier, Make (Integromat), or HubSpot APIs to create new contacts and register them to Zoom webinar events directly from a native Webflow Form if you don't want to embed HubSpot forms.
- This keeps everything on brand but is more development-intensive.
Summary
To integrate HubSpot forms for Zoom webinars into Webflow CMS, create a dynamic embed field in your CMS collection, then use the Embed component and bind it to that field on the Template page. This allows each CMS item to output the unique HubSpot form. For more control or custom look, consider native Webflow forms + automation tools.