The easiest way to HubSpot Form Tracking With GTM & GA4

The HubSpot form is a popup form designed to gather leads and other information from the website. However, the form comes with iFrame code, making it impossible to track using the typical form submit event through Google Tag Manager. In many cases, you might require both the form submit event and user input information.

Fortunately, you can easily collect HubSpot form submissions and input information by following this tutorial.

Hubspot Form DataLayer Code

/**
* Author: Md Hasanuzzamna
* Linkedin: https://linkedin.com/in/md-h
* Youtube: https://youtube.com/@leomeasure
* Email: info@leomeasure.com
*/

window.addEventListener("message", function(event) {
    if(!(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted')) return;

    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
        event: 'hubspot_form_submit',
        formId: event.data.id,
        conversionId: event.data.data.conversionId,
        formGuid: event.data.data.formGuid,
        inputs: event.data.data.submissionValues
    });
});