Webflow Form Tracking and GTM: How to Track Conversions Properly
- GA4 misses Webflow form submissions by default because Webflow uses AJAX - the page doesn’t reload, so standard form detection never fires.
- GTM solves this by giving you event-based control over what gets tracked, replacing GA4’s unreliable automatic detection with a precise, purpose-built listener.
- There are two reliable methods: Thank You page tracking for simpler setups, and a GTM form listener for teams with multiple forms or more complex lead flows.
- UTM parameters must be captured on landing and persisted through navigation - without this, every conversion that came from a paid campaign shows up as Direct Traffic.
- Once form events are flowing correctly into GA4, they can be imported into Google Ads and used for smart bidding - turning your tracking into a campaign optimization layer.
- A tracking setup that has never been formally tested is worse than no setup at all - it produces data that looks reliable but isn’t.
Your Webflow site looks great. Forms are live. Leads are coming in. But do you actually know which campaign drove that demo request? Which blog post converted a reader into a sales conversation? Which CTA on your pricing page is working and which one is being ignored? Most B2B SaaS and tech marketing teams cannot answer those questions accurately.
Not because tracking is impossible on Webflow, but because the default setup does not do it for you. Google Analytics alone tells you someone visited. It doesn’t reliably tell you someone submitted a form - and it almost never tells you what brought them there in the first place. This is the gap that proper Webflow form tracking closes.
The Core Problem: Webflow Forms Do Not Behave Like Standard Forms
Before getting into the setup, you need to understand why this takes more than a basic analytics install.
Webflow's native forms use AJAX submission - meaning when someone hits submit, the page does not reload. A success message appears in place, and the visitor stays on the same URL. This is excellent for user experience. But it creates a tracking problem.
Most analytics tools, including GA4's built-in “Enhanced Measurement” form tracking feature, were designed to detect form submissions by watching for page reloads or URL changes. When neither happens, they either miss the submission entirely or count it inaccurately. Many marketing teams have gone months thinking their conversion tracking is working, only to discover their data is partial, duplicated, or simply wrong.
GTM solves this by giving you precise, event-based control over what gets tracked and when. Rather than relying on GA4 to guess when a form submits, you build a listener that watches Webflow's specific submission behavior and reports back accurately - every time.
What You Actually Need Before Starting
Getting this right doesn’t require a developer. But it does require three things in place before any tracking can happen:
A GA4 property with a Measurement ID:
This is your analytics destination - formatted as G-XXXXXXXXXX. If you do not have one yet, create it in Google Analytics under Admin → Create Property.
GTM installed on your Webflow site:
Google Tag Manager is the container that manages all tracking logic without requiring code changes every time something needs updating. Install it by adding the GTM container snippet into Webflow's Site Settings → Custom Code → Head Code. This is a one-time setup that then lets your marketing team manage tracking independently going forward.
A GA4 base tag firing on all pages:
Inside GTM, you need a Google Tag (or GA4 Configuration tag) that loads on every page using the All Pages trigger. This is your baseline before any form-specific events are layered on top.
One important step to do immediately:
In GA4, go to Admin → Data streams → your stream → Enhanced measurement and turn off Form interactions. GA4's automatic form detection conflicts with the custom tracking you are about to build and causes double-counting. Disable it before you start.
The Two Ways to Track Webflow Forms
There are two reliable methods for tracking Webflow form submissions with GTM. Which one is right for your setup depends on how your forms are configured.
Method 1: Thank You Page Tracking
This approach turns form conversion into a page view event. When someone submits a form, Webflow redirects them to a dedicated confirmation page - /thank-you-demo, /thank-you-contact, or something similar. GTM detects when that specific URL loads and fires a GA4 conversion event.
The advantage is simplicity. There is no custom JavaScript, no data layer logic, and no complexity. If your form can redirect after submission, this method works cleanly.
How to set it up:
- Create a dedicated Thank You page in Webflow for each form type. Use clear URL slugs and hide these pages from navigation, footer links, and search engine indexing so they can only be reached through a form submission.
- In Webflow Designer, select the Form Block element (not an individual input field), open Element Settings, and set the Redirect URL to your Thank You page path.
- In GTM, create a Page View trigger that fires when the Page Path contains /thank-you-contact (or your specific URL).
- Create a GA4 Event tag using that trigger with an event name like generate_lead or form_submission_contact.
The limitation worth knowing: any direct visit to the Thank You URL - from a bookmark, a shared link, or an internal page - counts as a conversion. Keep URLs vague and unlisted to minimize this risk.
Best for: Teams that are comfortable with post-submission redirects, simpler setups with one or two form types, or forms powered by third-party tools like HubSpot or Typeform that support redirect URLs.
Method 2: The GTM Form Listener (The More Reliable Approach)
This is the setup most professional teams use. Instead of relying on a redirect, a lightweight JavaScript listener is added to the site through GTM. It watches for Webflow form submissions in real time, identifies which form was submitted, and pushes a clean event to the GTM data layer - which then triggers a GA4 conversion event.
This method handles Webflow's AJAX submission correctly, works with multiple forms on a single page, and does not require any changes to the user experience. Visitors see the normal success message - the tracking happens silently in the background.
How to set it up:
- Add unique IDs to every form in Webflow. In Webflow Designer, select each Form Block element and give it a clear ID in the Element Settings panel - something like demo-request-form or contact-form-pricing. This is how the tracking identifies which form fired.
- Create the listener tag in GTM. In GTM, create a new Custom HTML tag. The script listens for form submission events on all form elements, captures the form ID, the page URL, and the page title, then pushes a wf_form_submit event to the data layer. Set this tag to fire on All Pages and save it.
- Create a Custom Event trigger. In GTM, create a trigger of type Custom Event with the event name wf_form_submit. This tells GTM to react whenever the listener fires.
- Create data layer variables. Create four Data Layer Variable type variables in GTM to capture: form_id, form_name, page_location, and page_title. These pull the values from the data layer event and make them available to your GA4 tag.
- Create the GA4 event tag. Create a new GA4 Event tag in GTM with an event name of generate_lead or form_submission. Pass the four data layer variables as event parameters. Set the trigger to the Custom Event trigger from Step 3.
- Publish the GTM container. Everything in GTM only goes live when you hit Submit and publish. This is the step most people forget during testing.
Best for: Teams with multiple forms, AJAX-style success messages, complex lead flows, or anyone who wants the most accurate and flexible tracking foundation.
Adding Attribution: The Step That Makes the Data Actually Useful
Tracking that a form submitted is the baseline. Knowing what drove the submission is where the real value is.
For a B2B SaaS marketing team, the conversion event alone is not enough. Sales needs to know if a lead came from a LinkedIn campaign targeting Series B founders, or from a Google search for a competitor comparison article. Those two leads require completely different outreach - and without source data, both look identical.
The tracking setup above captures page_location and page_title automatically, which tells you where on the site the form was submitted. To add channel and campaign attribution, you also need UTM parameters flowing into each conversion event.
UTM persistence is the critical piece. UTM values in a URL disappear the moment a visitor navigates to another page. A lead who clicked a paid LinkedIn ad and then browsed three pages before converting will appear as “Direct Traffic” in GA4 unless you capture UTM values on landing and store them until the form submits.
The cleanest way to handle this in a Webflow-GTM setup: use GTM to read UTM parameters from the URL on page load, store them in a first-party cookie, and pass them as additional parameters in the GA4 event. This ensures that wherever on the site a visitor converts, the campaign data that brought them there is attached to the conversion event.
When this is working, your GA4 reports can answer the questions that actually drive marketing decisions: which campaigns are generating MQLs, which content converts, and what a lead from paid search is worth compared to one from organic traffic.
Setting Up Conversion Events in GA4
Once form submission events are flowing into GA4, the last step is telling GA4 which events represent meaningful business outcomes.
In GA4, these are called Key Events. To mark a form submission event as a Key Event:
- Go to Admin → Data display → Events in GA4.
- Wait for the event name (generate_lead or form_submission) to appear - this can take 24-48 hours after the first submission.
- Toggle Mark as key event to on.
From this point, the event appears as a conversion metric throughout GA4 reports. You can also import it into Google Ads under Tools & Settings → Conversions → Import → Google Analytics 4 properties, which enables smart bidding strategies that optimize for actual leads, not just page visits.
Webflow Analyze vs. GTM + GA4: Which Is Right for Your Team?
Webflow now offers its own analytics add-on called Webflow Analyze, and it’s worth understanding where it fits versus a GTM and GA4 setup.
Webflow Analyze is a strong option for smaller teams or early-stage companies that want quick, visual insight into how their site is performing without any technical setup. It solves the AJAX problem natively and gives you page-level data in a clean interface within the Webflow ecosystem.
GTM + GA4 is the right foundation for any team running paid campaigns, reporting on pipeline attribution, or needing to connect website conversions to a CRM or ad platform. The setup investment is higher, but the capabilities - full UTM attribution, Google Ads optimization, multi-channel funnels, and scalable management across multiple pages and form types - are not available through Webflow Analyze alone.
Many teams use both: Webflow Analyze for on-page UX insight and heatmap-style data, GTM + GA4 for conversion tracking, campaign reporting, and advertising optimization.
Testing Before You Trust the Data
A tracking setup that has not been tested is a liability. Before relying on any conversion data to make decisions, run through this checklist:
- Submit every form type and confirm a wf_form_submit event appears in GTM Preview.
- Verify that form_id, form_name, page_location, and page_title populate correctly.
- Confirm the GA4 event tag fires on form submission in GTM Tag Assistant.
- Check GA4 DebugView to confirm events are arriving with the correct parameters.
- Test from a URL with UTM parameters and confirm those values appear in conversions.
- Submit from a mobile device - custom scripts sometimes behave differently.
- Enhanced Measurement tracking should be disabled in GA4 (prevents double-counting).
- Publish the GTM container - changes in Preview mode do not go live until published.
Run this as a documented process, not from memory. The integrations that produce the most misleading data are usually ones that were never formally verified after the initial build.
Common Mistakes That Break Webflow Form Tracking
Relying on GA4 Enhanced Measurement for form detection:
This is the most common error and produces systematically inaccurate data. Enhanced Measurement was built for traditional form submissions, not AJAX. Disable it before building custom tracking.
Not assigning unique IDs to Webflow forms:
Without a form ID, every form on the site reports as unnamed_form in GA4. This makes it impossible to understand which forms are performing and which are not. Assign descriptive IDs in Webflow Designer before any tracking setup begins.
Building conversion data on top of unvalidated tracking:
Lifecycle stage workflows, lead scoring, and paid campaign optimization all depend on accurate incoming data. If GA4 is under-reporting or double-counting conversions, every decision built on that data is compromised. Validate the data quality first.
Forgetting to publish the GTM container:
GTM Preview mode shows you how a setup will work, but it only affects your own browser session. The live site uses the last published version of the container. Every change needs to be submitted and published before it affects real visitors.
Not capturing UTM parameters:
Tracking form submissions without attributing them to campaigns is a half-built system. Every conversion that arrives without source data is an opportunity lost to understand what’s working. UTM persistence should be part of the tracking setup from day one, not added later.
Never auditing the setup after site changes:
New pages, form redesigns, and HubSpot integration updates all create opportunities for tracking to break silently. Schedule a quarterly review of the full tracking stack.
Tracking That Earns Its Place in the Room
The gap between “we have Google Analytics installed” and “we know exactly which campaigns are generating pipeline” is where most B2B marketing teams live. It's not a data problem - the data exists. It's a setup problem.
What this guide covers is not particularly complicated once it starts working. But it does need to be built correctly, tested properly, and maintained as the site evolves. A form listener that broke during a Webflow update three months ago is worse than no tracking at all, because it gives you confidence in numbers that are wrong.
When it works - UTM values persisting through navigation, form IDs firing cleanly, conversion events flowing into GA4 and back into Google Ads - your website stops being a black box. Every campaign has a measurable outcome. Every channel can be defended or cut based on actual lead data. Marketing earns a seat at the revenue table because the numbers hold up. That's what proper Webflow form tracking actually delivers. Not just cleaner reports - a stronger position in every conversation about where the budget should go next.
Frequently Asked Questions
Webflow forms use AJAX to submit without reloading the page. GA4's Enhanced Measurement form tracking was designed to detect traditional form submissions that trigger a page reload or URL change. When neither happens, it either misses the submission or counts it inaccurately. This is a widely documented limitation, not a configuration error on your part. The fix is to disable Enhanced Measurement form tracking and implement custom event tracking through GTM using a form listener, as explained in this article.
Not necessarily. GTM is designed to be managed by marketing teams, and the setup described here doesn’t require writing custom code. However, the form listener tag does involve copying and implementing a JavaScript snippet inside GTM, which requires some comfort with technical configuration. For teams with no technical resource, the Thank You page method (Method 1) is the simpler starting point. For teams that want the full setup - UTM persistence, multi-form tracking, GA4 Key Events, and Google Ads import - a specialist like SKROL can handle the implementation cleanly and quickly.
It depends on how the HubSpot form is embedded. If the form is added as an iFrame, the GTM listener cannot access it - iFrames create a separate browsing context that JavaScript on the parent page cannot read. For iFrame embeds, use the Thank You page method (Method 1): configure a redirect URL inside HubSpot's form settings pointing to a Webflow Thank You page, then track that page view in GTM. If the HubSpot form is rendered directly into the page through the HubSpot script embed (not an iFrame), the listener may work depending on how HubSpot handles form submission events. Always verify in GTM Preview mode.
The quickest check is to compare HubSpot contact records with GA4 conversion events over the same time period. If GA4 is reporting significantly fewer form submissions than HubSpot is receiving contacts, your tracking is missing events - usually because Enhanced Measurement is being relied upon. If GA4 is reporting more than HubSpot, you likely have double-counting from a combination of Enhanced Measurement and custom tracking running simultaneously. A discrepancy of more than 10-15% between the two systems is a signal that the tracking setup needs attention.
Shared GTM containers break when there's no governance. Start with a naming convention that identifies owner and purpose - for example, MKTG | Webflow Form Listener and GA4 | generate_lead | Demo Form - so nobody accidentally deletes something they don't recognize.
Restrict publish permissions to a small group: contributors build and test, someone senior approves and pushes live. Use GTM Environments to stage changes before they hit production.
And keep a simple shared log of what Webflow-specific tags do and why they exist. Most breakages in shared containers aren't technical failures - they're communication failures. A little structure prevents most of them.
