How to Track Webflow Form Submissions as Conversions in GA4

Why Are My Webflow Form Submissions Missing From GA4?

A founder I work with in Bengaluru told me her contact form was working fine, but her Google Analytics showed almost no leads. Both things were true. The form did deliver her emails. GA4 just did not know a submission had happened. She had been making decisions about her ad spend on numbers that were quietly wrong, and she had no idea.

This is one of the most common Webflow mistakes I clean up. People assume that because GA4 has automatic event tracking, it will count their form submissions on its own. It usually does not, at least not reliably, because of how Webflow handles a form behind the scenes. The result is a business flying blind on the one metric that pays the bills, which is leads.

Since Google shut off the old Universal Analytics on 1 July 2023, GA4 has been the only free analytics most small sites use, so getting it right matters. In this tutorial I will show you, in plain steps, why Webflow forms confuse GA4, how to capture each submission, and how to mark it as a conversion you can trust.

Why Does Webflow's Form Setup Confuse GA4?

Webflow forms submit using AJAX, which means the form sends without a full page reload and then swaps in a success message. GA4's automatic form tracking and Google Tag Manager's built in form trigger both expect a normal page action, so they often miss the submission or count it twice.

This is not a Webflow bug. It is a design choice that makes forms feel smooth for visitors. The catch is that the tidy success message you see is not a new page, so the usual tracking has nothing obvious to grab onto. Analytics Mania, a respected analytics resource, has documented this exact gap for years, and it is why generic guides that say "just turn on Enhanced Measurement" leave you with bad data. To track a Webflow form well, you need to listen for the moment the form actually succeeds, rather than hoping a default setting catches it.

What Do You Need Before You Start?

You need three things: a GA4 property connected to your site, access to your Webflow project settings, and a decision about whether you will use Google Tag Manager or a small custom script. That is the whole list, and most clients already have the first two.

Confirm that your GA4 tag is firing on every page first. The simplest way is to install GA4 through Webflow's site wide custom code or through Google Tag Manager, then open your live site and check that GA4 shows you as an active user in real time. If basic page views are not tracking, fixing the form will not help, so get the foundation working before you add the form event. Once GA4 sees your traffic, you are ready to teach it about leads.

How Do You Capture the Webflow Form Success Event?

You capture it by listening for Webflow's form success state, which is the moment the green success message appears. Webflow shows that success element by adding it to the page after a valid submission, and a small piece of JavaScript can watch for that and fire your own clean event.

In practice there are two reliable ways to do this. The first is to listen for the submit event on the Webflow form and then confirm success, which works well when you control the markup. The second, which I prefer for clients, is to use Webflow's own form submission behavior and push a custom event into the dataLayer the instant the success message shows. Either way, the goal is the same: produce one trustworthy signal that says "a real lead just submitted this specific form." Name that event clearly, like form_submit_contact, so you can tell your contact form apart from your newsletter signup later.

How Do You Send the Event to GA4 as a Conversion?

Send it to GA4 using the recommended event name generate_lead, then mark that event as a Key Event in the GA4 admin so it counts as a conversion. Google specifically recommends generate_lead for lead form submissions, which means GA4 understands it without extra guesswork.

Here is the flow in order. First, your form success fires the custom event you built in the previous step. Then a GA4 event tag sends that to GA4 as generate_lead, with a parameter telling you which form it was. Finally, you open the GA4 admin, find generate_lead in the events list, and toggle it on as a Key Event. Google renamed conversions to Key Events in 2024, so do not be confused if older tutorials still say "mark as conversion." It is the same switch. Once that toggle is on, every qualifying submission shows up in your conversions reporting where you can actually use it.

Should You Use Google Tag Manager or Custom Code?

Use Google Tag Manager if you want a visual interface and plan to track more than one thing. Use a small custom script if you want fewer moving parts on a simple site. Both can send a clean generate_lead event to GA4, so this is about how you like to work, not about which one is correct.

For most clients I lean toward Google Tag Manager, because it keeps tracking logic out of the Webflow project and makes it easy to add or change events without republishing the site. The trade off is one more tool to learn and one more script to load. For a tiny site with a single form, a few lines of custom code in Webflow can be lighter and faster. I have shipped both. The deciding question I ask is whether the client will want to track more events in the next year, and if the answer is yes, I reach for Google Tag Manager.

How Do You Test That It Is Actually Working?

Test it with GA4's DebugView, which shows events in real time as you trigger them. Open DebugView in the GA4 admin, then submit a real test on your live form, and watch for your generate_lead event to appear within a few seconds. If it shows up, your tracking works.

I never trust a setup I have not watched fire with my own eyes. So I submit the form myself, confirm the event lands in DebugView with the right form name, and submit a second time to make sure it does not double count. If you use Google Tag Manager, its preview mode lets you see the tag fire before the event even reaches GA4, which makes debugging faster. Watching a metric load slowly into a report and missing leads in the meantime is exactly the problem I describe in my piece on a Webflow contact form losing leads, so this testing step is not optional for me.

Why Is My Conversion Not Showing Up Yet?

If DebugView shows the event but your reports do not, you are probably just waiting. New custom events can take 24 to 48 hours to appear in GA4's standard events list and reporting, even though DebugView shows them instantly. Analytics Mania notes this delay, and it trips up almost everyone the first time.

So if the event fires in DebugView, the plumbing is correct, and patience is the fix. Give it a day or two, then check that generate_lead is listed and marked as a Key Event. One more thing to know: GA4's standard data retention tops out at 14 months, so set that to the maximum in the admin if you want to compare leads year over year. Getting these settings right is part of why I treat analytics as its own task, not an afterthought, which connects to how I think about bounce rate and engagement rate as Webflow metrics.

How to Set This Up This Week

Here is your plan. First, confirm GA4 is tracking page views on your live Webflow site. Second, set up a clean form success event, either through Google Tag Manager or a small script, and send it to GA4 as generate_lead with a parameter for the form name. Third, open DebugView, submit a real test, and once you see the event, mark generate_lead as a Key Event and wait a day for it to appear in reports.

Do that and you will finally know how many leads your site brings in, which is the number every other decision depends on. If you want a privacy friendly alternative to all of this, I compared the options in my write up on using Webflow Analyze to replace Google Analytics.

If you would rather have this set up cleanly the first time without the guesswork, I am happy to wire it up with you. Let's chat.