Webflow Form Event Listener: Track Submissions in GTM
Webflow swaps in a success message instead of loading a new page. Here is the listener, plus an honest look at what it does and does not tell you.
Webflow forms swap in a success message rather than loading a new page, so you need a listener. The commonly used one is simple, and it has a real limitation that you should understand before you build conversions on it.
The listener code
This is the Webflow form listener from DumbData.
The full listener is in the copy block at the bottom of this page, with a copy button. It is reproduced exactly as DumbData publish it, so you can copy it straight from here or from their page.
What this listener actually tells you
Read the code carefully. It binds to the form’s submit event, which fires when the form is submitted, not when Webflow confirms it succeeded.
So the event means someone pressed submit and the browser accepted it. It does not mean the submission reached Webflow.
In practice the two are almost always the same, because Webflow’s own validation runs first and most submissions succeed. But if you are chasing a discrepancy between your form count and your Webflow submission count, this is the reason.
It also binds to every form on the page, including a newsletter signup in the footer. That is fine as long as you split them by form ID rather than counting them all as leads.
If you want success rather than submit
Webflow shows its success state by displaying the element with the w-form-done class. Listening for that appearing is a more accurate signal.
That means writing your own listener rather than using the DumbData one, so only do it if the distinction matters for your site. For most Webflow sites the simpler listener is fine and the difference is a rounding error.
Installing it in GTM
Create a Custom HTML tag and paste the listener.
Trigger on All Pages.
Save and Preview.
This listener uses the jQuery dollar shorthand. Webflow loads jQuery on published sites by default, so it normally works. If you have stripped jQuery out for performance, it will not.
Creating the trigger and variable
Custom Event trigger, event name formsubmit_event. Save it as CE Webflow Form Submit.
Data Layer Variable named formID. Call it DLV Webflow Form ID.
Give every form in Webflow a meaningful ID in the element settings. If you leave the defaults, your reporting will be full of blanks and wf-form-Email-Form-2.
Sending it to GA4
Create a GA4 Event tag.
Event name: generate_lead
Add a form_id parameter from your Data Layer Variable.
Trigger: CE Webflow Form Submit.
Sending conversions to Google Ads
Create a conversion action in Google Ads and note the ID and label.
Add a Google Ads Conversion Tracking tag with those values.
Trigger: CE Webflow Form Submit.
Turn on Enhanced Conversions if the form collects an email: Enhanced Conversions setup
Meta and everything else
Same trigger, different tag. A Meta Pixel tag with the Lead event, Mixpanel or Piwik PRO from their GTM templates, or a LinkedIn or Microsoft conversion tag.
Separating real leads from newsletter signups
Because the listener catches every form, add a condition to your conversion trigger so only the forms that matter fire it.
Set the Custom Event trigger to fire on Some Custom Events, with formID equals your contact form’s ID. Then create a separate trigger for the newsletter and send that to GA4 only, not to Google Ads.
Counting newsletter signups as leads is how Smart Bidding ends up buying you subscribers instead of customers: choosing primary and secondary conversions.
Testing
Open GTM Preview on the published site, not the Webflow designer preview.
Submit each form once.
Confirm formsubmit_event fires with the right formID each time.
Confirm only your real lead forms fire the Google Ads conversion.
Common issues
Nothing fires. jQuery removed, or the code is in the Webflow page settings rather than in GTM and has not been published.
Every form counts as a lead. Add the formID condition described above.
formID is blank. The form has no ID set in Webflow. Set one.
Count is higher than Webflow’s submission count. Expected. See the section above on submit versus success.
Privacy considerations
Never send names, emails, phone numbers or free text into GA4.
Hash anything you send to an ad platform for matching.
Gate the tags behind marketing consent: Consent Mode v2 in GTM
Final thoughts
This listener is simple and slightly blunt. Know that it measures submit rather than success, split your forms by ID, and it does the job for the vast majority of Webflow sites.
Listener from DumbData. Related: Webflow conversion tracking.
Need this built properly?
Know what your event actually means before you bid on it. I set up and repair tracking for ecommerce stores and lead generation businesses, so the numbers in your ad accounts match the money in your bank account.
Have a look at what I do, or book a call and we can go through your setup together.
<script type="text/javascript">
$("form").submit(function(event) {
var formID = $(this).attr('id');
dataLayer.push({
'event': 'formsubmit_event',
'formID': formID
});
});
</script>
