Hello Folks,
I am experiencing issues with tracking the new Hubspot Forms which works differently to Legacy forms
So in order to properly track the “form Submit” event, I need to create an event listener to the post message
Anyone can help me with some javascript that could be utilized for that ?
Thanks
Hi @Andrey5rov — thanks for posting this!
I’ll bring in a few folks who are strong on new Forms, postMessage listeners, and event tracking.
@Gaurav_Aggarwal @GiantFocal @Whathcock — have you implemented reliable JS tracking for the new HubSpot Forms submit event (via postMessage or another supported hook)? Any snippet or best-practice approach you can share would be awesome.
Best, Victor
I am dealing with my Web Team but this is exactly what I Need. If I manage to create the Listener, I will post it here 
Hey @Andrey5rov the new forms editor has it’s own set of event listeners, looks like submit isn’t one of them:
At the moment this currently isn’t supported, it might be a good idea to post this to the feature requests board to bring this up with the product team!
Hey! Yeah, the newer HubSpot forms (especially the ones embedded via the HubSpot Forms API or using newer iframes) don’t trigger the same events as legacy forms, so it makes sense that your old tracking setup isn’t working the same way.
To track form submissions, you’ll need to listen for the message event that HubSpot sends from the iframe when a form is submitted. Here’s a basic example of JavaScript you can use to capture that event:
window.addEventListener("message", function(event) {
// Make sure it's coming from HubSpot
if (event.data && event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmit") {
console.log("HubSpot form submitted");
// You can trigger any other tracking logic here
// For example, pushing to GTM or Google Analytics
// dataLayer.push({ event: "hubspotFormSubmit" });
}
});
You can drop this script on the page where your embedded form lives. Just make sure your form is embedded using HubSpot’s standard embed code (not as raw HTML), since this message event comes from the iframe.
Let me know if you’re trying to do something specific with the submission; like fire a GA4 event or trigger something in GTM.
Hey Tim,
This is exactly the Code we tested it out ourselves
Interestingly enough, we are trying to Insert it through GTM (Google Tag Manager)
as our Forms are exported with “Advanced HTML” so we can properly style them in Web Environment (This is what our web team requested)
So I am still thinking is there any way to insert this listener through Google Tag Manager
Or should I insist CSS styling on the form to happen directly in Hubspot - instead of styling it in Web Environment
Thanks to all, much appreciated
I’m catching up here. I need to add java script to my site to have my G4 track these new forms? I’m having to recreate all of my forms since they are no longer supported and I don’t want to not do them right and find out I have no data. I thought the idea of Hubspot was to lessen the need for programming? What am I missing?
Is there any progress here?
I’ve seen a lot of complaints about the new forms, including on our account. We’re experiencing the same issue.
Hi @tugravci and welcome, we are so glad you are here!
Thanks for reaching out to the HubSpot Community!
For new forms created with the updated forms editor, you can easily track form events using window.addEventListener with HubSpot’s global form events.
Here’s a quick example for capturing successful form submissions:
window.addEventListener(“hs-form-event:on-submission:success”, event => {
const { formId, instanceId } = event.detail;
console.log(“Form submitted!”, formId);
// Add your tracking logic here
});
Other helpful events you can use include:
hs-form-event:on-ready – when the form has finished loading
hs-form-event:on-submission:failed – when a submission fails
hs-form-event:on-interaction:navigate – for multi-step form navigation
Pro tip: For best results, define any on-ready listeners before your form embed code runs to ensure everything’s captured smoothly.
If you’d like to access form data after a submission, you can leverage HubSpotFormsV4 like this:
window.addEventListener(“hs-form-event:on-submission:success”, event => {
const form = HubSpotFormsV4.getFormFromEvent(event);
const conversionId = form.getConversionId();
});
You’ll find more details on the Global form events documentation page.
I hope this helps!
Bérangère
This post was created with the assistance of AI tools
For anyone looking to set up new HS form tracking via GTM, here’s a code that works for me.
1. Create a form listener tag, Custom HTML (that pushes ‘hubspot_form_submit’):
<script>
(function () {
if (window.__hsFormDataLayerBridge) return; // bind only once
window.__hsFormDataLayerBridge = true;
window.addEventListener('hs-form-event:on-submission:success', function (event) {
var d = (event && event.detail) || {};
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'hubspot_form_submit',
hsFormId: d.formId || '',
hsFormInstanceId: d.instanceId || ''
});
});
})();
</script>
- **Create a Custom event trigger.
**
Event name:hubspot_form_submit→ fires on All Custom Events, or Some Custom Events if you’d like to track a specific form only. In that case, a Data Layer Variable to track ishsFormId