One of the most crucial conversion points, especially when working with B2B or lead generation companies, is tracking form submissions, for example, a Contact Us form, Request a Quote form, or a Newsletter sign-up form. There are many form builders out there and each of them require a different “trigger”. One common form builder is Hubspot Forms.
However, tracking HubSpot form submissions can be tricky, especially after HubSpot launched a new form editor/builder at the end of 2024. In this guide, we’ll walk you through updated, proven methods to track HubSpot form submissions reliably using Google Tag Manager (GTM) and HubSpot’s built-in tools.
Special thanks to Ayoola Idris-Animashaun for helping with this updated listener script!
Tracking conversions when using HubSpot’s new form builder
With the release of HubSpot’s new form builder we found out that our current tracking methods were not working anymore. Previously, marketers could rely on a simple form listener script to detect form submissions in GTM. With HubSpot’s new form editor, that script stopped firing, leaving many marketers scratching their heads.
The good news? We have an updated form listener that works with all HubSpot forms!
In this guide, we’ll walk you through several effective, proven methods to track your conversions—compatible with Google Ads, LinkedIn Ads, Google Analytics 4 (GA4), Facebook Ads, and more. Plus, we’ll share a new script that works with both the legacy and new HubSpot form editors.
Method 1: Using HubSpot’s Built-in Events Tool (Easiest, but limited)
The easiest way to track HubSpot form submissions is by using HubSpot’s Ads Events tool. Here’s what you need to know:
Pros
-
- No coding required
- Syncs HubSpot data directly with Google Ads, LinkedIn Ads, and Facebook Ads.
Cons
-
- Does not work with Google Analytics (GA4), Microsoft Ads, or any other platform—a major limitation for many
We recommend only using this method if you are looking to set up conversions for the above 3 platforms. Not being able to set up the events for GA4 is a big miss, so this method is only recommended in certain circumstances.
How to set up conversion tracking in HubSpot to measure conversions in Google Ads, LinkedIn Ads, or Facebook Ads without coding
-
- Head over to Marketing > Ads
- Click on the “Events” tab
- In the top right, click on the button that says “Create”, and select Event
- A new window will open where you are asked to select the ad network and ad account
- You are now asked to select the event trigger:
-
- Lifecycle stage change: this option is great for when you want to sync over “offline conversions”. For example when a contact becomes a qualified lead, an opportunity, or even a customer
- Form submission: sync over an event every time a contact fills out a HubSpot form on your website
-
- Select the form submission option.
- Now, select the form you’d like to track and select “Create a new conversion action for this HubSpot form”. Make sure you select the correct conversion action (if applicable)
- Data sharing: Select which data properties apply. Email addresses will provide the most accurate customer match but for the best conversion optimization, make sure to choose all.
- Last but not least, give your event a unique and descriptive name. This will also be the name that will be shown in Google Ads.
And that’s it! From this moment onwards HubSpot will start syncing over conversion events. Keep in mind that HubSpot only syncs conversions from the moment you set this up; it won’t backfill historical form submissions.
Method 2: Using a Form Listener in Google Tag Manager (Most Reliable and Recommended)
If you’re looking for the most reliable way to set up conversion tracking with HubSpot forms on your website, using Google Tag Manager is your best bet. We’ve used this script for many of our clients, and it has consistently proven to be the most dependable method. It’s easy to implement, especially once you get through the initial setup, and enhanced conversions work without any issues. While this method does require a bit more familiarity with GTM than simpler approaches, we’ll walk you through each step in a clear, easy-to-follow way. Even if you’ve never set up conversions in GTM before, you’ll be able to do it without any problems.
The challenge with HubSpot forms is that when you try to set up conversions using GTM’s preview mode, no useful data appears in the data layer. That’s where GTM listeners come in. By using a form listener, you can track events and changes in the data layer, which can then be used to set up reliable conversion points.
What do we need to do for this method?
-
- Add a custom variable (User-Defined Variable): This variable lets us pull specific data from the data layer, which helps with setting up precise form triggers. It gives us the flexibility to track and analyze form submissions more accurately.
- Add a custom HTML listener: This script listens for changes in the data layer and lets us detect when a form is submitted. Without it, we wouldn’t be able to track submissions reliably. The best part is that this script works with both legacy HubSpot forms and forms built using the new editor, so there’s no need to create different versions.
- Set up a form-specific trigger and tag: Use the HubSpot form ID to create a trigger that only fires when a specific form is submitted. This ensures you’re tracking only the submissions you care about, instead of every single HubSpot form on the site.
1. Add the User-defined variable
In this step, we’re going to add a new user-defined variable. Follow these simple steps:
-
- In Google Tag Manager, head over to your Workspace and click on “Variables”
- Scroll down to the page until you see “User-Defined Variables”, click on “New”
- A new window will appear. Here, give your variable a name (for example: dlv — hs-form-guid)
- Click on the Variable Configuration box and select the variable type. In this case we want to use a “Data Layer Variable” type
- Next, for the Data Layer Variable Name, fill out: “hs-form-guid” (important: copy this exact value – do not make any changes to it!)
- Click “Save”
2. Adding the HubSpot listener
Adding the HubSpot listener is the most important step because it allows us to track form submissions in Google Tag Manager. The script below works with all HubSpot forms, including those built with the legacy editor and the new form builder.
-
- In your Google Tag Manager, go to Tags and click “New”
- Name your new Tag (for example: HubSpot | Form Listener)
- Click “Tag Configuration”. Here we select the tag type
- Under “Custom”, select Custom HTML
- In the text box we now need to paste the below script. Make sure you copy all the code, from the beginning to the end.
- Now, all we need to do is add the trigger which defines when the listener should fire. Our recommendation is to let it fire on all pages. We do that by choosing the “All pages” trigger (Page View type)
<script type="text/javascript">
// Ensure dataLayer is available
window.dataLayer = window.dataLayer || [];
window.addEventListener("message", function (event) {
if (!event.data) return;
// For old legacy forms (v1)
if (event.data.type === 'HS_CTA_FORM_SUBMITTED') {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': event.data.id || event.data.formId
});
}
// For recent legacy forms (v3)
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
var formContainer = document.querySelector('.hs-form-frame');
var formId = formContainer ? formContainer.getAttribute('data-form-id') : event.data.id;
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': formId,
'event-data' : event.data
});
}
});
// For the latest forms (v4 API)
if (document) {
document.addEventListener('hs-form-event:on-submission:success', function (event) {
var formContainer = document.querySelector('.hs-form-frame');
var formId = formContainer ? formContainer.getAttribute('data-form-id') :
(event.detail && event.detail.formId ? event.detail.formId : null);
if (formId) {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': formId,
'event-data' : event.data
});
}
});
}
</script> Once published, this listener will make form submissions visible in your GTM data layer so you can easily build your conversion tracking.
Let’s run a quick test:
-
- Run Preview mode in GTM
- Submit the form you’re trying to track.
- After submitting the form, head to the Summary page and see which events fired.
- If everything was implemented correctly, you see a new event with the name hubspot-form-success.
Are you seeing that? Then good news: your HubSpot form listener was implemented successfully! Next step: ensuring we set up conversions for individual forms!
3. Setting up your conversions (triggers) for specific form submissions
This last step allows us to set up conversions for specific forms. It doesn’t matter if you’re trying to set up conversions for a contact us, newsletter, request a quote, or gated content form. As long as it’s a HubSpot form we will be able to track it!
Finding your form ID
To set up the conversions for a specific form, we’re going to need a unique identifier. In the case of HubSpot forms, it’s going to be the “form ID”. There are 3 ways we can find the form ID:
-
- In the HTML/code of a page where the form has been implemented
- In the URL when viewing a form in HubSpot
- In Tag Manager’s Summary under Variables
Let’s take a look at all 3 methods:
-
- Finding the form ID in the HTML
The easiest way is to look in the page source of a page that contains the form you’re trying to track.
-
- Right click with your mouse, and click “View page source” (short cut: ctrl + U)
- In the HTML, search for “formID”
- The string that you see is the unique form ID for that particular form!
Alternatively we can also use Inspect (right click > Inspect) and search for formID in there. This method can sometimes be more reliable than looking in the page source.
-
- In HubSpot itself
This is probably the easiest method, but it does require you to have access to the HubSpot account. You can find the HubSpot form ID by:
-
- View the form you want to track in HubSpot
- Check the URL: the form ID can be found after /form/ or after /editor/
-
- In Google Tag Manager’s Variables
This method requires you to submit the form in preview mode first, before you’re able to find the form ID.
-
- After implementing the form listener, run preview mode and submit the form you’re trying to set up conversion tracking for
- After submitting the form, review your Tag Assistant Summary and look for an event called “hubspot-form-success”, and click on it
- Under the “Variables” tab, look for a variable called “Forms — hs-form-guid” (or whichever name you gave the user-defined variable from step 1)
- The value shown within the parenthesis is the form ID for that specific form!
4. Adding the trigger
Now that we have the form ID of the form we’re trying to track, the last step we need to take is setting up the trigger in Google Tag Manager. For that, we need to follow these easy steps:
-
- In Tag Manager, head over to “Triggers”, and click “New” in the top right corner
- Name your trigger. We recommend naming it something like “CE | HubSpot Form | “form name”
- Select the Custom Event trigger type
- For the event name, type “hubspot-form-success” (make sure you copy this exact value!)
- Now, we need to make sure that the trigger fires on “some custom events”. This will allow us to set up the conversions for specific events (forms) vs every time the event fires
- For the variable, we need to select the custom variable we created earlier: “Forms — hs-form-guid”
- Select the “equals” condition
- In the text box, copy the form ID that we found in the previous steps
- Save your trigger.
Success!
We’ve now successfully set up the trigger for a specific form on your website. The final step is to connect this trigger to the correct tag so we can begin tracking conversions and events in your desired platforms (GA4, Google Ads, Microsoft Ads, Facebook Ads, etc).
Once the trigger is assigned to the tag, it’s time to do one final test. Run Google Tag Manager in Preview mode, submit the form you’re tracking, and check the Tag Assistant Summary to confirm that the tag fired. If it did, go ahead and publish your changes — and you’re all set!
To track additional forms, just repeat the process starting from Step 3. Be sure to create a unique trigger and tag for each form if you want to track them separately.
