Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

marketingfabrikken / Last Updated December 4, 2022

How to Track Leads with Google Tag Manager Form Submit Tracking

Are you running ads on Facebook, Google AdWords or another service? Learn how to track the sources of your WordPress form leads with Google Tag Manager form submit tracking.

How to track leads with Google Tag Manager form submit tracking

This is how I setup the event tracking on my own as well as my customers' websites. This guide assumes you've already setup the following:

  1. A Google Tag Manager container within your website.
  2. Analytics tracking within Tag Manager.
  3. A fully functional form on a page.

If you are using Google Analytics without Google Tag Manager, learn how to set up Google Analytics with your forms.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

🔎 Did you know that you can track visitors using Formidable Forms?


Referrals, time on page, clicks. All in one report. Any goals you have wanted to reach are made easy with Formidable's User Flow feature.

Step 1: Setup triggering on all clicks

Before tracking form submissions, all clicks on your site need tracking. This means every click reacts within the variables that Google Tag Manager operates with. No worries – it's far more simple than it sounds.

  1. In your Google Tag Manager dashboard, click on 'Triggers' in the left menu.
    Google tag manager form submit triggers menu
  2. Click on the 'New' button.
    Google tag manager form submit new click trigger
  3. In the new panel, click 'Choose a trigger type to begin setup'. Then select 'All Elements' below 'Clicks' on the right sidebar. Name your trigger with something that clarifies what it is. I chose 'Clicks – All'.
  4. Click the blue 'Save' button in the top right corner that appears when you’ve selected 'All Elements'.

Now that you've added a click trigger, you can setup Google events (and other sorts of tracking) on the clicks happening on your site.
Google tag manager form submit all elements

Step 2: Add more variables

More variables are needed in the preview mode to track form submissions (that you will learn more about later).

Click 'Variables' and then 'Configure'. Add variables under 'Clicks' and 'Forms' then click 'Overview'. Each added variable is autosaved.
Google tag manager form submit tracking variables

Step 3: Use preview to track clicks

One of the brilliant things about Google Tag Manager, is the ability to preview everything you're doing – including the triggering of clicks.

Click 'Overview' in the left menu to get back to the home screen. Then click 'Preview'.

Google tag manager form submit track clicks

Go to your website, where Google Tag Manager is installed. You should see the Google Tag Manager preview in the bottom half of your window.

In the summary to the left, you can see what happens when you click (that's the click trigger). In the following screenshot, I clicked the Submit button to get the relevant variables - followed by an instant press on my escape button. This is very important, or the site will reload itself, and the variables will disappear.

Google Tag Manager Preview Track Clicks

If you can't get it to stop refreshing, go to your form settings and set it to redirect after submit. You can always change it back when you have the variables you need) – or you can just trust me, and use the settings I use in this guide.

As you can see, there are numerous variables for the form submission. The 'Click classes' variable with the value 'frm_button_submit' is the variable we are interested in.

Step 4: Make a trigger from the variable

Now add the variable to a trigger within Tag Manager.

  1. Click 'Triggers' in the left side menu, then 'New' → 'Choose a trigger type to begin setup'.
  2. Select 'Click – All Elements' and this time also select 'Some Clicks'.
  3. Select 'Click Classes' in the field to the left, type 'frm_button_submit' in the field to the right, and set the middle field to 'contains'.
    Google tag manager form submit new trigger
  4. Click save.

Step 5: Add a tag (aka event tracking in Google Analytics)

This is where the fun starts now that all the ground work is done. Now we just need to setup a 'tag' and check if it works.

  1. Click 'Tags' in the left side menu, then click the 'New button'
    Google tag manager form submit new tag
  2. Click 'Choose a tag…' then 'Universal Analytics'.
  3. In 'Track Type' select 'Event'.
  4. Fill out Category and Action. Usually I only use Category and Action and fill them out as such:
    • Category: form
    • Action: {{Page Path}} (click the plus to the right to select it). {{Page Path}} shows which page the form was submitted from. The is very useful if you have the same Formidable form on multiple pages.
  5. In 'Google Analytics Settings', select the Analytics tag that you made before reading this guide.Remember to name your tag properly.
    Google tag manager form submit tag setup
  6. Now add the trigger created in Step 4. Whenever anyone is activates the trigger (in this case clicking the submit button), the event we just made is sent to Google Analytics and gives the 'hit' to track.Click 'Choose a trigger to make this tag fire…' and select 'form submit' (or whatever you named your trigger).
    Google tag manager form submit trigger
  7. Click save.

You’ve now successfully made a tag that fires an event to your Analytics whenever your form is submitted.

Step 6: Check if the tag works properly

Start by refreshing your preview so your new tag appears.
refresh Google tag manager form submit tags

Google tag manager form submit event setup

Visit your site. In the Preview screen you should see your new event:

As you can see, it's not 'fired' – this is because we haven't pressed the submit button yet.

Google tag manager form submit event

If your tag is setup correctly, you should see the tag change from 'not fired' to 'fired' when you click on the form submit button.

If you want to check that the event is transferred to your Analytics dashboard, visit your Analytics account.

Click Real-time > Events

Go to your website in another window, submit a form, and then go back to analytics. There should be an event triggered within analytics. In the 'Event Action' column you should see the URL where the form was submitted from.
Google analytics form submit tracking

To effectuate these changes click the blue submit button in the upper right corner of Google Tag Manager – this is very important.

Google Tag Manager form submit tracking

Now that you know how to add a click trigger and custom trigger and how to combine them with tags, the possibilities are endless. Track what you want and make scripts load when you choose.

Hope you enjoyed my guide ?. If you aren't using Formidable Forms yet, learn more about this awesome WordPress form builder plugin.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. Sivakumar says

    July 5, 2018 at 6:12 am

    Great Article, buddy.

    Reply
    • Mads says

      August 21, 2018 at 10:43 am

      Thanks man!

      Reply
  2. Stefan says

    August 3, 2018 at 6:16 am

    Thanks for the guide. What about multi paged forms, where the submit button is clicked every time the user navigates to the next step without actually submitting the form?

    Reply
    • Stefan says

      August 3, 2018 at 6:23 am

      Change the trigger click class to frm_final_submit

      Reply
  3. Marketable LLC says

    September 11, 2018 at 7:35 am

    Thanks, buddy. Keep it up sharing GTM information.

    Reply
  4. FRET says

    September 18, 2018 at 8:22 am

    Thanks, but how to track really and successfully submited forms? This way tracks also submiting unfinished forms, for example when there is blank input field and it ends with error message...

    Reply
  5. Wanlapa says

    September 18, 2018 at 6:26 pm

    This trigger includes all click on the submit button including ones that don't pass the validation. How to track a successfully submitted form?

    Reply
    • Antonio Almeida says

      December 21, 2018 at 2:44 pm

      Hi! If using "show message" after submission, create a new Element Visibility trigger in GTM, config element selector to .frm_message and check "observe DOM changes".
      Then add that trigger to the tag that is tracking the forms.
      It should count when the form is submitted but only when the success message appears on screen.

      Reply
      • Diddi says

        April 16, 2019 at 2:55 am

        But what about other messages that could appear? Unsuccsessful messages - will they set off the trigger?

        Reply
        • Danel says

          July 28, 2021 at 8:32 am

          This is probably late, but in the On Submit field where you put the success message, you can put the message in an html tag that contains a class. That way you can create a unique class that you can use for the trigger.

          Reply
  6. jamesbayley says

    October 19, 2018 at 4:09 am

    I have used Formidable and Google Analytics before but Google Tag Manager is new to me. Thank you for writing a really useful article.

    Reply
  7. StiganMedia says

    January 9, 2019 at 11:52 am

    My Click Class value is
    frm_button_submit frm_final_submit
    instead of just
    frm_button_submit

    Just an FYI maybe formidable made changes

    Reply
  8. Felipe says

    January 21, 2019 at 4:50 pm

    When you have a lot of different forms and you want to pick out a specific one just add another class in the forms > settings > html section and you should see it in the GTM preview mode and you can edit your trigger to see your custom class.

    I only mention this because all the formidable forms will use the frm_button_submit class so you need a little more if you have multiple forms you wish to track

    Good luck all

    Reply
  9. Mads Vindfeld Andersen says

    February 6, 2019 at 3:18 am

    Thanks for all the positive feedback. This is a "simple" guide, but there's a few gold comments that people should read as well.

    Remember: If you can think it, you can track it with GTM.

    Reply
  10. Krishnamraju says

    February 14, 2019 at 11:51 pm

    Hi, I am not able to track the forms with google tag manager. I configure the tagmanager as shown above but i am unable to track that. After filling the form I am seeing the "thank you message".

    Reply
  11. Federico Seo says

    April 18, 2019 at 1:03 am

    Hi, I don't know if something is changed during these months. But your way to track form submissions doesn't work for me.
    First of all, click class is: "frm_final_submit", but it will fire the event always, also when a user clicks on the submit button and hasn't filled all the requested fields.

    My solution is this one.
    I've seen that the "green message" when someone submits the form is contained into a div with this class: class="frm_message".
    So my trigger fires the tag when this class is visible into the page.
    Trigger type: Element Visibility
    Selection Method: CSS selector
    Element Selector: .frm_message
    When to fire this trigger: Once per page
    Minimum percent visible: 1
    Tick: Observe DOM changes
    All Visibility Events.

    Then you can create an event tag with this trigger. It works properly.

    Reply
    • Mads Andersen says

      April 18, 2019 at 1:05 am

      Hi there,

      I'm going to take a look at this article in the near future again, to update it 🙂

      Thanks for your reply, will definitely check it out.

      Reply
      • milko says

        March 1, 2021 at 7:42 am

        hi formidable 🙂
        i'm using formidableforms in my wp website.
        i have try to Track Leads with Google Tag Manager Form Submit Tracking.
        I have try your procedure without success.

        Reply
    • Anders says

      May 26, 2021 at 12:59 am

      Thanks, this seems to work properly!

      Regards
      Anders

      Reply
  12. captainslog says

    November 12, 2019 at 12:44 pm

    Has this been reviewed?

    I want to track after the form is submitted, so where do I put the code in the thank you page? There is no mention about where to put GTM code specific to the Formidable Forms.

    Jeff

    Reply
  13. Daniel says

    May 5, 2020 at 8:40 am

    I have set it up exactly following this guide, but I am not getting an event. I tried with other classes, but with no succes. Anyone has any useful input?

    Reply
  14. Brian T says

    September 12, 2021 at 11:46 pm

    please update. thanks!

    Reply
  15. Michel says

    February 11, 2022 at 6:31 am

    This is the worst guide possible. I'm shocked that you even try to market this as a solution. It is obvious that this method also tracks every click on the button, even if the form doesn't get send because of missing information. This guide is 3 Years old now and there is still no fix or update regarding this.

    Reply
  16. Brent Hicken says

    June 1, 2022 at 8:42 pm

    Here's a solution that worked for me:

    1. Create a GTM Variable (I named mine Formidable Forms Form Name)
    a. Choose Variable Type: Data Layer Variable
    b. Set the Data Layer Variable Name to formID
    c. Set the Data Layer Version to Version 2
    d. Save the variable
    2. Create a GTM Trigger (I named mine Formidable Forms Form Submit Event)
    a. Choose Trigger Type: Custom Event
    b. Set the Event name to formSubmission
    c. Keep the default - this trigger fires on All Custom Events
    d. Save the variable
    3. Create a GTM Tag (I named mine Formidable Forms Form Submit GA Event)
    a. Choose Tag Type: Google Analytics: Universal Analytics (of course, this Tag will be set up differently if you are using GA4 - I just haven't converted to GA4 yet.)
    b. Set Track Type to Event
    c. Set Category to whatever you want (I named mine form-submit)
    d. Set Action to the variable you created in step 1
    e. Set the label you whatever you want (I set it to the Page URL variable)
    f. Set the Google Analytics Settings to your Google Analytics variable
    g. Add the trigger you created in step 2
    h. Save the tag
    4. Create a GTM Tag (I named mine Formidable Forms Listener)
    a. Choose Tag Type Custom HTML
    b. Add the following script in the HTML box

    jQuery(document).ready(function() {
    jQuery(document).bind("frmFormComplete", function(event, formID) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    event: "formSubmission",
    formID: formID
    });
    });
    });


    c. Add the trigger All Pages (or you can set the specific page(s) where your form(s) is/are located)
    d. Save the tag
    5. Add code to your form's success message on your website
    a. In your website form setup, add the following script to the On Submit message (Formidable > Forms > Settings > General)

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'event': 'formSubmission',
    'formID': 'Contact Us'
    });


    b. Change the formID value ('Contact Us' above) to whatever you want to be sent as the Action in your Google Analytics event via the tag you created in step 3
    c. Save the form by pressing the Update button
    6. Test

    Reply
    • Marcia says

      September 14, 2022 at 7:44 am

      Hi Brent,
      Thanks for your sharing this information.
      It is quite similar to how I've set up ContactForm7 tracking in GTM (different html though).
      Except for step 5, and I am wondering if this step is necessary...

      I'm using GA4 as tag type (step 3). I know you have not been using GA4 (yet), but maybe you can still follow my thinking.
      So I've done all steps, except step 5. Here's why:
      In GA4 it is possible to make custom events. Very usefull when you have several forms and want to track each of them.
      This is how it's done:
      In GTM you set up the tags, variables and triggers like you described above, but using GA4. As event-name I chose to use 'formSubmission' too.
      You make a custom event in GA4 that you can name by choice (for instance 'Job Apply').
      The event parameters are 1) event-name equals formSubmission and 2) formId equals 1234 (this '1234' is your form number).

      This works perfectly with CF7. I can track all submitted forms, but also see the different forms.
      But I've never worked with Formidable Forms....
      So my question is if Step 5 is really required or not?
      Hopefully you can give your thoughts on it?

      Reply
    • Hans says

      November 18, 2022 at 3:12 pm

      Gold. I was expecting this to be the article, since the same logic applies to Elementor and WPBakery form widgets (but for submit_success and usCformSuccess events). Also, this didn't work for me in the free version, since it reloads on submit.

      Reply
      • srwells says

        November 21, 2022 at 1:38 pm

        Yeah, AJAX form submission is a pro feature, so you would need to upgrade to be able to submit the form with out a reload.

        Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews