One Custom HTML Tag That Turns a Form Submit into a Clean dataLayer Event
Pick your form platform and this free tool writes a form tracking event listener for Google Tag Manager. It covers HubSpot form tracking in GTM, GoHighLevel form tracking, iframe form tracking in GTM, WordPress form plugins and plain HTML forms. The code catches the submission, adds UTM parameters, ad click IDs and SHA-256 hashed email and phone, and pushes one dataLayer event your GA4, Google Ads and Meta tags can use.
GTM Form ListenerFree Code Generator
OfficialStape PartnerChoose the platform, set the options and copy the code. It updates as you click.
Confirmed from docsKnown pattern, test before useBrowser standard
The ID filter works for platforms that report a form ID. The selector works for forms that sit in your own page, not inside an iframe.
The code is built in your browser. If you scan a page, its address is sent to our server, which loads the page once to read its public code. We keep a simple log of the page address scanned, the platforms and event names chosen and the options. Embed code you paste is not sent or logged.
One tag for Google Tag Manager, plus everything you need to set it up and test it.
A platform listener plus one shared enrichment engine, in plain ES5 JavaScript that Google Tag Manager accepts.
Select HubSpot, Calendly and a native form together. They share one engine and each keeps its own event name.
Six UTM parameters and 17 ad click IDs, kept from the landing page until the form is sent.
SHA-256 hashed email, phone and name for Enhanced Conversions and the Conversions API, hashed in the visitor’s browser.
Hashed data, click IDs and cookies stay empty until Google Consent Mode, a variable or a cookie says consent was given.
For forms on another domain: a snippet for inside the iframe and a parent listener, with an origin check on both sides.
The tag trigger, the Custom Event trigger, each Data Layer Variable and how to map them into GA4, Google Ads and Meta.
GTM Preview steps, a console snippet to see raw iframe messages, and the known limits of each platform.
Three steps. The code is written in your browser.
Choose it from the list, or let the tool detect it from a page address or from pasted embed code.
Name the event, choose what to include and decide how consent is read.
Add the code to one Custom HTML tag, create the trigger and variables, and test in GTM Preview with a real submission.
A form tracking event listener is a small script that waits for a form to be submitted and then tells Google Tag Manager about it. It does that by pushing an event into the dataLayer. Your GA4, Google Ads and Meta tags fire on that event.
You need one because many forms give GTM nothing to work with. An embedded HubSpot or GoHighLevel form does not reload the page. A Calendly widget sits in an iframe from another website. A WordPress form shows a success message without changing the address. GTM’s built-in Form Submission trigger misses most of these.
postMessage to your page. The listener reads that message.The code has two parts. The listener is specific to your platform. The enrichment engine is the same for every platform. It collects UTM parameters, ad click IDs such as gclid and fbclid, marketing cookies and device details, hashes the email, phone and name with SHA-256, and pushes one event with everything under inputs. This is the same structure I use for client work.
Google’s Enhanced Conversions and Meta’s Conversions API match conversions using hashed contact details. Hashing in the browser means the readable email does not have to sit in the dataLayer, where every other script on the page can read it. Plain values are off by default for that reason.
The code follows each platform’s published or commonly observed events. Platforms change them, sometimes without notice, so every platform is labelled “Confirmed from docs” or “Known pattern, test before use”. The tool cannot submit your form or see your live page, so you must test in GTM Preview on the real form before you publish.
It cannot see inside a cross-domain iframe unless the form platform sends a message or you can add code inside the iframe. Calendly, Typeform and Jotform do not send the visitor’s email in their message, so those events carry no hashed user data. The page scan reads the page source our server receives, so a form added by JavaScript after the page loads can be missed.
The code does not send data anywhere by itself. It only pushes an event to the dataLayer. Your GTM tags decide what goes to Google, Meta or anyone else, and you remain responsible for consent and for what your privacy notice says.
The signal the listener waits for, and whether it can read the contact details.
| Platform | Signal the listener uses | Contact details | Confidence |
|---|---|---|---|
| HubSpot forms | hsFormCallback message (legacy) and hs-form-event (new editor) | Yes | Confirmed from docs |
| GoHighLevel / LeadConnector | Array message from the embed iframe | Yes | Known pattern |
| Calendly | calendly.event_scheduled message | No | Confirmed from docs |
| Typeform | form-submit message from the embed | No, IDs only | Known pattern |
| Jotform | submission-completed message | No, form ID only | Known pattern |
| Tally | Tally.FormSubmitted message | Yes | Confirmed from docs |
| Elementor Pro | submit_success jQuery event | Yes | Known pattern |
| WPForms | wpformsAjaxSubmitSuccess jQuery event | Yes | Confirmed from docs |
| Gravity Forms | gform_confirmation_loaded jQuery event | Yes | Confirmed from docs |
| Contact Form 7 | wpcf7mailsent DOM event | Yes | Confirmed from docs |
| Klaviyo | klaviyoForms window event | Email and phone | Confirmed from docs |
| Marketo | MktoForms2 onSuccess | Yes | Confirmed from docs |
| Webflow, Mailchimp, ActiveCampaign | Success message becomes visible | Yes | Known pattern |
| Native HTML form | Browser submit event | Yes | Browser standard |
| Cross-domain iframe | postMessage from the sender snippet you add | Yes, with the snippet | Browser standard |
Skip the boilerplate and start from a listener that already handles hashing, attribution and duplicates.
Use one consistent event structure across every client’s form platform.
Give your developer or freelancer exact code and setup steps instead of a vague request.
Finally see embedded form and calendar leads as conversions in GA4, Google Ads and Meta.
33 free tools for tracking, analytics, advertising and SEO. No login needed.
Turn your email, phone and address variables into correctly formatted, hashed values for each ad platform.
Open the hashing generator →Build and validate a Conversions API event with hashed user data and a matching pixel call.
Open the CAPI builder →Validate GA4 event names and parameters against Google’s rules before you publish.
Open the GA4 event checker →Test whether redirects strip gclid, fbclid and UTM parameters before visitors reach your page.
Open the redirect checker →Hear from our clients. Loved by 600+ businesses worldwide.
“I had an excellent experience working with MD on my Google Ads account. Everything was set up perfectly and worked smoothly without any issues or troubleshooting needed. His expertise and attention to detail made the whole process effortless.”
“I worked with Niamul on multiple Google Analytics projects and was impressed by his expertise and precision. He has a strong grasp of tracking, reporting, and optimization, always ensuring accurate insights. He is proactive, reliable, and easy to collaborate with.”
“MD Niamul is extremely skilled. He fixed my Shopify, Google Analytics, and Google Ads conversion tracking perfectly. Everything works exactly as it should now, and he even added an extra data layer, which was very helpful. Outstanding service, fast delivery, and highly recommended.”
“Reliable, knowledgeable, and truly trustworthy. I’ve been working with Niamul for over a year, and he consistently delivers exceptional results across all analytics tasks. His expertise, communication, and commitment make him my go-to specialist for tracking, measurement, and data accuracy.”
“MD N delivered flawless Meta Pixel, CAPI, and server-side tracking. He understood our goals quickly, explained everything clearly, and ensured full transparency. Communication was smooth, updates were consistent, and the results improved our data accuracy and ad performance.”
Five-star reviews from businesses and agencies in the USA, Canada, UK and Australia.
Read All ReviewsYes. It is free with no login. The code is written in your browser and you can copy it or download it.
Choose HubSpot forms, copy the code into a Custom HTML tag that fires on all pages, and create a Custom Event trigger for hubspot_form_submit. The listener covers legacy embedded forms, which send an hsFormCallback message, and forms built in the new editor, which fire hs-form-event events.
The embedded form sends a message to your page when it is submitted. Choose GoHighLevel form, calendar or both. The listener reads that message and pushes ghl_form_submit or ghl_booking_complete. GoHighLevel does not publish this message, so test it in GTM Preview.
Only when the iframe sends a message to your page. Many form tools do. If yours does not, you need to add the sender snippet to the page inside the iframe. If you cannot add code there, use a thank-you page on your own site or the platform’s webhook.
Calendly’s message to your page contains links to the event and the invitee, not the name or email. To get those, use Calendly’s webhook or API on a server, or redirect to your own thank-you page.
It is better not to. Anything in the dataLayer can be read by every script on the page. That is why this tool hashes the email and phone and keeps plain values switched off unless you turn them on.
No. It only pushes an event into the dataLayer on your own page. Your GTM tags decide what is sent and to whom. The one exception is the optional IP geolocation lookup, which calls third-party services and is off by default.
The listener ignores a repeat of the same event for the same form within three seconds and refuses to load twice on one page. You should still remove any older form listener tags and check for duplicates in GTM Preview.
It means the platform does not document the signal the listener relies on. The pattern is widely used and works today, but the platform can change it. Platforms marked “Confirmed from docs” follow the platform’s own developer documentation.
I am MD Niamul, a conversion tracking and web analytics specialist and an official Stape partner. I build form listeners like this one for agencies and brands, connect them to GA4, Google Ads Enhanced Conversions and Meta Conversions API through server-side GTM, and test every form with real submissions.