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.
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:
- A Google Tag Manager container within your website.
- Analytics tracking within Tag Manager.
- 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.
? 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.
- In your Google Tag Manager dashboard, click on 'Triggers' in the left menu.
- Click on the 'New' button.
- 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'.
- 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.
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.
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'.
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.
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.
- Click 'Triggers' in the left side menu, then 'New' → 'Choose a trigger type to begin setup'.
- Select 'Click – All Elements' and this time also select 'Some Clicks'.
- 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'.
- 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.
- Click 'Tags' in the left side menu, then click the 'New button'
- Click 'Choose a tag…' then 'Universal Analytics'.
- In 'Track Type' select 'Event'.
- 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.
- In 'Google Analytics Settings', select the Analytics tag that you made before reading this guide.Remember to name your tag properly.
- 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).
- 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.
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.
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.
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.
Great Article, buddy.
Thanks man!
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?
Change the trigger click class to frm_final_submit
Thanks, buddy. Keep it up sharing GTM information.
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...
This trigger includes all click on the submit button including ones that don't pass the validation. How to track a successfully submitted form?
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.
But what about other messages that could appear? Unsuccsessful messages - will they set off the trigger?
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.
I have used Formidable and Google Analytics before but Google Tag Manager is new to me. Thank you for writing a really useful article.
My Click Class value is
frm_button_submit frm_final_submit
instead of just
frm_button_submit
Just an FYI maybe formidable made changes
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
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.
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".
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.
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.
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.
Thanks, this seems to work properly!
Regards
Anders
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
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?
please update. thanks!
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.
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
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?
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.
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.