To track form conversions in Webflow using Google Tag Manager (GTM) and Google Analytics 4 (GA4) Events, follow these steps to ensure proper configuration and tracking.
- Ensure your form is built with Webflow’s native Form element.
- Webflow triggers a
form submission
event (form submit
) when a user successfully submits a form.
2. Set Up Your GTM Container in Webflow
- Create a Google Tag Manager account if you haven't already.
- Copy your GTM container code (starts with
GTM-XXXXXXX
). - In Webflow:
- Go to Project Settings > Integrations.
- Paste your GTM code in the Head and/or Body custom code sections.
- Publish your site after saving.
- In GTM, go to Triggers > New.
- Choose Trigger Type: Form Submission.
- Click "Some Forms" to filter only successful submissions.
- Use conditions such as:
- Form ID or class (e.g.,
Form ID equals contact-form
) - Page Path or URL if needed.
- Name your trigger like Webflow Form Submit.
Tip: Use GTM's Preview Mode (Tag Assistant) to inspect form classes and submission behavior.
4. Create a GA4 Event Tag in GTM
- Go to Tags > New.
- Choose Tag Type: GA4 Event.
- Under Configuration Tag, either:
- Select an existing GA4 Configuration Tag, or
- Create a new one with your Measurement ID (from GA4)
- Under Event Name, enter a clear event identifier, e.g.,
form_submit
or lead_generated
. - Optionally add Event Parameters, like:
form_id
→ Set as {{Form ID}} (a GTM Variable)page_path
→ Set as {{Page Path}} for additional context.- Set the Trigger to the form trigger created in Step 3.
- Save and name your tag, e.g., GA4 - Form Submit Event.
5. Publish Your GTM Container
- Click Submit and then Publish your GTM container.
- Use Preview Mode to test the live site and confirm:
- The form triggers the correct GTM tag.
- The event appears in GA4 > Admin > DebugView.
6. (Optional) Set Up a Conversion in GA4
- In GA4, go to Admin > Events.
- Locate your custom event name (
form_submit
). - Toggle Mark as conversion.
- Wait up to 24 hours for data to populate in Reports > Conversions.
Summary
Create a GA4 Event for Webflow form submissions by leveraging GTM’s form submission trigger and building a GA4 event tag attached to it. This setup sends form events to GA4 and optionally treats them as conversions. Use GA4 DebugView and GTM Preview to validate everything is firing correctly.