Integrating HubSpot Forms in Framer: Listening to Iframe Events

by Anas Niazi

When working with HubSpot forms in Framer, you might encounter challenges in listening to form events, especially if you use Framer’s built-in HubSpot component. One common issue is that embedding the event-listening script separately, such as in the footer, often doesn’t work as expected.

The solution? Embed the HubSpot form code and the event-listening function together in the same script. This ensures the event listener is properly linked to the form and triggers as intended.

Embed your form code along with iframe event script

Below is Sample Embed code for hubspot form and the custom function to listen it (yours will be different this code is only for demonstrated purposes)

<!-- sample hs form embed -->
<script charset="utf-8" type="text/javascript" src="https://js.hsforms.net/forms/embed/v2.js"></script>
<script type="text/javascript">
  hbspt.forms.create({
    region: "na1",
    portalId:"5415191",
    formId: "b527e421-4656-3fcf-5189-262241bb3084",

  });

</script>
<!-- sample hs form embed -->

<!-- your custom function listening hs form  -->
<script>
window.addEventListener("message", (event) => {
  console.log(event);
});
</script>
<!-- your custom function listening hs form  -->

Here’s a step-by-step guide:

1. Avoid the Built-in Component: Instead of relying on Framer’s HubSpot component, use an the form's embed code (if you want to listen hubspot events for your custom functions).
2. Combine the Scripts: Write your form embed code and include the event listener within the same script block. This allows the listener to initialize properly as soon as the form is loaded.
3. Use postMessage Events: HubSpot forms emit message events that can be captured using JavaScript. Listen to these events directly to track form interactions, such as submissions or field changes.

By embedding the form and event listener together, you maintain full control over event handling and ensure seamless integration. This approach isn’t limited to HubSpot — it’s a useful method for any iframe-based form solution.

With this setup, you can cotnrol the full potential of event listening in Framer projects, enhancing user interactions and trigger other functions based on iframe events.

If you find other ways to make this work please comment on this post and feel free to reach out at anasniazi.com if need any help.