topic Re: How to track hubspot form submissions in CMS Development

How to track hubspot form submissions

MShah180 — Tue, 24 Dec 2024 19:57:34 GMT

Hi, our website is hosted on Webflow and we have hubspot forms embedded on CMS pages. Is there a way we can track these hubspot form submissions on Google tag manager?

Re: How to track hubspot form submissions

evaldas — Thu, 26 Dec 2024 18:37:54 GMT

Hi @MShah180,

Yes, you can add some JavaScript that listens for the HubSpot form submission and execute the code you would like

If you would like to track the form submission in Google Analytics, you could use the Data Layer and the code inside would look something like this:

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'form_submission', 'formId': 'contact_form', 'formName': 'Contact Form' });

Just make sure that Google Tag Manager is configured appropriately to record this event.

Hope this helps!

Re: How to track hubspot form submissions

MShah180 — Thu, 02 Jan 2025 19:47:56 GMT

I added this javascript under my form embed code but the trigger doesn't get fired on GTM. Any idea why the trigger is not firing ?

Re: How to track hubspot form submissions

MShah180 — Thu, 02 Jan 2025 19:49:41 GMT

Here is the code I pasted below the form embed code
<script>
window.addEventListener('message', event => {
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'form_submission',
'formId': 'data-form-Id', // I replace with form ID
'formName': 'form name' // I replace with form name
});
}
});
</script>

Re: How to track hubspot form submissions

evaldas — Thu, 02 Jan 2025 19:59:35 GMT

@MShah180 could you try using 'onFormSubmitted' instead of 'onFormSubmit' and see if that works?

Re: How to track hubspot form submissions

MShah180 — Thu, 02 Jan 2025 20:07:14 GMT

Thanks for your response. Still no luck

Re: How to track hubspot form submissions

evaldas — Thu, 02 Jan 2025 20:38:45 GMT

Another thing to try - instead of pasting the code on your page, create a Tag (Custom HTML) in GTM and drop your <script> in there.

To double check whether it is working, you can also set up a Trigger as a Custom Event and add the event name there. In my case I have it named "hubspot-form-success", you would put yours, i.e. "form_submission".

Then you would see it show up in the Preview upon form submission:

Re: How to track hubspot form submissions

alyssamwilie — Tue, 07 Jan 2025 17:41:25 GMT

@MShah180 Are you using legacy forms or the beta form editor?

Re: How to track hubspot form submissions

MShah180 — Tue, 07 Jan 2025 17:57:46 GMT

I am not using legacy forms. It is form (new editor)

Re: How to track hubspot form submissions

alyssamwilie — Tue, 07 Jan 2025 18:07:40 GMT

Ah. Global form events currently don't work with the new editor.

https://developers.hubspot.com/changelog/new-beta-form-editor-and-developer-functionality

If you want to track events with GTM you'll need to use legacy forms.