CMS Development

MShah180
Participant

How to track hubspot form submissions

SOLVE

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? 

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to track hubspot form submissions

SOLVE

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.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

10 Replies 10
MShah180
Participant

How to track hubspot form submissions

SOLVE

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>

0 Upvotes
evaldas
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

How to track hubspot form submissions

SOLVE

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


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes
MShah180
Participant

How to track hubspot form submissions

SOLVE

Thanks for your response. Still no luck

0 Upvotes
evaldas
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

How to track hubspot form submissions

SOLVE

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".

 

evaldas_1-1735850094925.png

 

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

 

evaldas_2-1735850282302.png

 

 


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes
jack5253
Participant

How to track hubspot form submissions

SOLVE

You can track HubSpot form submissions embedded on Webflow CMS pages using Google Tag Manager (GTM). You'll need to set up a trigger in GTM that listens for the form submission event to do this. Since HubSpot forms may not trigger a standard form submission event, you can leverage the HubSpot form API, which provides a onFormSubmit callback. Add custom JavaScript to the embed code of your HubSpot form that pushes a custom event to the GTM data layer when a form is successfully submitted. Then, in GTM, create a trigger to listen for this custom event and configure a tag (e.g., Google Analytics event or conversion tracking) to fire when the trigger is activated. Please make sure that your GTM container is published, and thoroughly test the setup to confirm accurate tracking.

0 Upvotes
evaldas
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

How to track hubspot form submissions

SOLVE

Hi @MShah180,

 

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

 

<script>
window.addEventListener('message', event => {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {

      // YOUR CODE HERE

    }
});
</script>

 

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!

 

 

 

 


✔️ Did this post help answer your query? Help the community by marking it as a solution.

0 Upvotes
MShah180
Participant

How to track hubspot form submissions

SOLVE

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 ?

0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to track hubspot form submissions

SOLVE

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

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
MShah180
Participant

How to track hubspot form submissions

SOLVE

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

0 Upvotes
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to track hubspot form submissions

SOLVE

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.

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.