How can I create a GA4 Event to track form conversions using Webflow, Google Tag Manager, and Google Analytics 4?

TL;DR

Add GTM to your Webflow site's custom code and publish.
Enable form-related variables in GTM.
Create a GTM Form Submission trigger using Webflow-specific classes or IDs.
Create a GA4 Event tag using the trigger, passing form ID and class as parameters.
Test in GTM Preview Mode, then publish the GTM container.
Verify the form_submit event appears in GA4 Realtime and Events reports.

To track form conversions in Webflow using Google Tag Manager (GTM) and Google Analytics 4 (GA4), you’ll need to set up GTM to detect form submissions, trigger a GA4 event, and verify it's captured in GA4.

1. Enable GTM on Your Webflow Project

Copy your GTM container code from your Google Tag Manager account (Admin → Install Google Tag Manager).
In Webflow, go to Project Settings → Custom Code.
Paste the GTM <head> and <body> snippets in the appropriate boxes.
Publish the website after saving.

2. Enable Built-in GTM Variables

In GTM, go to Variables.
Click Configure under Built-in Variables.
Enable all Form-related variables (e.g., Form ID, Form Classes, Form Target, Form URL).

3. Create a GTM Trigger for Form Submission

Go to Triggers → New.
Name it (e.g., “Webflow Form Submit”).
Choose trigger type Form Submission.
Under "This trigger fires on", select Some Forms.
Use a condition like Form ID contains wf-form- or Form Classes contains wf-form.
These are Webflow's default form class patterns.
Use GTM Preview Mode to inspect the actual form ID and classnames.

4. Create a GA4 Event Tag

Go to Tags → New.
Name it (e.g., “GA4 - Form Submit Event”).
Choose tag type GA4 Event.
Set your Configuration Tag (create one if you haven’t).
For Event Name, use something like form_submit (lowercase, GA4 convention).
Under Event Parameters, add:
Parameter Name: form_id, Value: {{Form ID}}
Parameter Name: form_classes, Value: {{Form Classes}}
Set the Trigger to your form submission trigger.

5. Test in GTM Preview Mode

Use Preview in GTM and enter your Webflow site's URL.
Submit a form on your site.
In the GTM debug panel, confirm that:
The form submission trigger fires.
The GA4 Event tag is triggered with the correct parameters.

6. Publish the GTM Container

In GTM, click Submit → Publish to make the tags live.

7. Verify in Google Analytics

Go to your GA4 Property → Reports → Realtime.
Submit another test form and see if the form_submit event appears.
Later, check Events → All Events to confirm the data is recorded and consistent.

Summary

To create a GA4 event for form conversion tracking in Webflow: embed GTM in your site, set up a form-specific trigger using Webflow’s form classes/IDs, create a GA4 Event tag, and test everything before publishing. This ensures that every form submission is accurately tracked in GA4.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer