To track form conversions in Webflow using GA4, you’ll need to use Google Tag Manager (GTM) to detect Webflow’s native form submission and send a GA4 event via GTM.
1. Set Up Google Tag Manager in Webflow
- Go to Project Settings > Custom Code in Webflow.
- In the Head section, paste your GTM container code (upper part).
- In the Body section, paste the GTM container code (lower part).
- Publish your Webflow site to apply the changes.
- In GTM, click Triggers > New.
- Choose Form Submission as the trigger type.
- Enable "Check Validation" to avoid catching incomplete form submissions.
- Optional: For cleaner targeting, use Trigger Conditions like
Page Path contains /contact
or form-specific classes (if applicable). - Name and save the trigger (e.g., “Webflow Form Submit”).
- Go to Tags > New.
- Tag Type: Choose Google Analytics: GA4 Event.
- Choose or create your GA4 Configuration Tag (with your GA4 Measurement ID).
- Under Event Name, use something like
form_submit
(use snake_case, lowercase). - Under Event Parameters, you can add:
- parameter name:
form_location
, value: {{Page Path}}
- parameter name:
form_id
, value: {{Form ID}}
(if available) - In the Triggering section, select the form submission trigger created earlier.
- Save and publish the GTM workspace.
4. (Optional) Test Using GTM Preview and GA4 DebugView
- In GTM, click Preview and enter your website URL to open the GTM debug pane.
- Submit a form; ensure your form submission trigger fires.
- Go to GA4 > Admin > DebugView to verify the event is received by GA4.
5. Mark the Event as a Conversion in GA4
- In GA4 > Events, find your
form_submit
event after some data has come in. - In the event list, click the toggle to mark it as a conversion.
Summary
To track form conversions in Webflow using GA4, install GTM in your Webflow project, create a form submission trigger, and send a GA4 event when a form is submitted. Then, mark this event as a conversion in GA4 to track it in reports.