Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Webflow form tracking with (and w/o) Google Tag Manager
Home » Google Analytics
September 13, 2020 Elad Levy

Webflow is a great CMS solution loved by designers. While I’m more of an Elementor fan, I’ve found Webflow to be a good solution for launching pixel-perfect websites.

Webflow offers native integration with Google Analytics and a simple option to add Google Tag Manager (GTM), so for most simple tracking purposes you can get it up and running in no time.

In this post, I’ll cover the different methods to track Webflow forms, from simple to more complex solutions. I’ll also show how to add these submission events without Google Tag Manager.

Thank you page

In most cases, using a Thank You page (TYP) is the simplest solution for tracking. You can easily set up Google Analytics goals, Google Ads conversions, Facebook Ads Custom Conversions etc. off of a distinct page URL.

image-4696287
Source: Webflow University

But in some scenarios, you might not want the user to be redirected to a new page, and instead, only show a confirmation notice. In these cases, a different tracking method is required.

Form Submission Trigger

This is the standard trigger for tracking form submissions in GTM. You can set it up with the Form Submission trigger. While this is simple to set up, it isn’t always a solid solution as it might miss submissions (if the tag didn’t run in time) or send false positives on failed submissions.

Form Submission Trigger in GTM

Selecting the Check Validation box won’t work in this case as the form are validated using AJAX.

Element Visibility Trigger

This trigger is more stable than the Form Submission. The basic idea behind this trigger is to identify when a user has viewed a certain element of the page. In this case, we ask GTM to identify users that have seen the Thank Message after successful submission.

Pro tip:
This trigger works regardless of the text of the Thank You Message

To set up this trigger, simply navigate to the Triggers page in GTM a click ‘New’. Select Trigger Type ‘Element Visibility’ and set the Selection Method to ‘CSS Selector’. Paste in the field ‘.success’.

Finally, check the ‘Observe DOM changes’ box or the trigger won’t be able to identify the new page element.

image-5741403
Form Visibility Trigger in GTM

Generic form tracking

The next option is to set up a generic Custom Event to indicate form submissions. This option is also my recommended way to track Webflow forms.

This method integrates with the Generic Event Tracking method discussed on a separate post, please make sure you follow the instructions detailed there first.

In GTM, create a new tag of the type Custom HTML. Paste into the tag the following script:

<script type="text/javascript">
$("form").submit(function(event) {
    var formID = $(this).attr('id');
    dataLayer.push({
        'event': 'ga_event',
        'eventCategory': 'form submission',
        'eventAction': formID,
        'eventLabel': ''
    });
});
</script>
Generic Webflow form tracking tag

Trigger the tag on ‘All Pages’.

This tag will now trigger a Custom Event on each Webflow form submission, with the Event Category ‘form submission’ and Event Action set to the form’s ID in Webflow.

This Custom Event can now be used to trigger additional platforms such as LinkedIn Ads or Quora Ads.

Tracking Webflow form submissions without GTM

In the unlikely case that you don’t use GTM, you can still use this method to track form conversions.

Simply add the following snippet to your site’s code:

<script type="text/javascript">
$("form").submit(function(event) {
    var formID = $(this).attr('id');
    // Some code you want to run
});
</script>

For example, if you want to track Facebook Leads and Google Analytics events:

<script type="text/javascript">
$("form").submit(function(event) {
    var formID = $(this).attr('id');
   fbq('track', 'Lead');‎
   gtag('event', formID, {'event_category' : 'form submission'});
});
</script>
webflow

About the Author

Elad Levy View all posts by Elad Levy

Experienced Web Analyst, working for almost a decade now with various web analytics tools.
Also a husband, father of three rascals, and the co-founder of Fixel.

« Previous
Next »
One Response
  1. Drew E
    Reply
    April 28, 2021 at 3:51 am

    Awesome article, thank you for the clarity and concise advice. Hugely helpful!

Leave a Reply

Click here to cancel reply.

Contents hide
Thank you page
Form Submission Trigger
Element Visibility Trigger
Generic form tracking
Tracking Webflow form submissions without GTM
Made with ❤️ by Elad Levy
Disclaimer: Some of the links shared on this site are affiliate links, so if you choose to make a purchase, I’ll earn a small commission. Please note, I only recommend tools I’ve used and have found useful, the commission is not a driving factor