Skip to main content

Contact Form 7 Event Tracking with Google Tag Manager

By March 20, 2017March 14th, 2018Analytics

If you fit the following criteria, this article is right for you:

  1. You use the Contact Form 7 plugin on your WordPress site.
  2. You want to set up contact form submissions as a Goal in Google Analytics (or even just as an Event).
  3. You have Google Analytics deployed on your site using Google Tag Manager.

If you’re not using Google Tag Manager, the tutorial on Contact Form 7’s site is really quite good. However, if you’re using Tag Manager, I haven’t found a resource that will help you much, so I created one here. It’s really quite easy, there are several simple steps:

Step 1: Create a GTM Tag that pushes a Data Layer event when mail is actually sent (and includes the form ID).

Step 2: Create a GTM Trigger that looks for the Data Layer event when mail is sent, and triggers a second tag.

Step 3: Create a GTM Tag that sends events to Google Analytics based on the Data Layer event.

Step 4: Create a form ID Data Layer Variable.

Step 5: Set up a Goal Conversion in Google Analytics based on the Event.

Ninja Forms

Step 1: Log into GTM and Create Tag #1

When the click the “Submit” button on a Contact 7 Form, it fires a form submission event. Unfortunately, it fires this event regardless of whether the required fields have been filled out – the form may not have actually sent, but the event is still triggered.

Fortunately, the plugin does fire DOM events for several different scenarios and these DOM events distinguish between successful form submissions and unsuccessful form submissions. What does that mean? These are the DOM events as described on the Contact Form 7 website:

  • wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.
  • wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
  • wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.
  • wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.
  • wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.

The middle one is key: wpcf7mailsent. As described, this trigger fires when the form has actually been submitted and mail has actually been sent. We’re going to use Javascript to create a Data Layer event. Log into GTM and either select the “New Tag” box or navigate over to the “Tags” section and create one there. Create a new GTM tag (I’ve called mine wpcf7mailsent) with the following configuration:

Tag Type: Custom HTML

Add the following code:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
        dataLayer.push({
          'event' : 'wpcf7successfulsubmit',
          'CF7formID' : event.detail.contactFormId
        });
    	}, false );
</script>

Triggering: All Pages

What this does is listens for the wpcf7mailsent DOM event and fires an event into the Data Layer called “wpcf7successfulsubmit.” It also captures the form ID in the Contact Form 7 shortcode and pushes it into the Data Layer too (in the screenshot below, that ID is “1192”).

Next we’ll set up a Trigger that uses this Data Layer event to trigger the Google Analytics Events that the Goal Conversion will be based on.

Step 2: Create a GTM Trigger

Next, create a Trigger for the Tag you’ve just created. I named mine Contact Form 7 Trigger.

Trigger Type: Pick Other – Custom Event from the default list. We’re going to use the event we created in Tag #1 as the trigger event.

Event Name: wpcf7successfulsubmit

This Trigger Fires On: All Custom Events

This uses the custom Data Layer event we created in Step 1 to trigger a Google Analytics event tag which we’ll setup in Step 3.

Step 3: Create Tag #2

Log into GTM and either select the “New Tag” box or navigate over to the “Tags” section and create one there. Name the new tag whatever you want (I’ve chosen the oh-so-descriptive “Contact Form Submission”).

Fill out the following fields as such:

Tag Type: Universal Analytics

Tracking ID: Your tracking ID. I have mine set up as a variable, which explains why it says {{GA Tracking Code}}

Track Type: Event

Next you’re going to set the Category, Action, Label and Value for the Event we’re creating. If you’re not familiar with these, there’s more information in Google’s Analytics Help page for Events.

Category: You can set this as whatever you want and that’s what it’s going to show up as in Google Analytics when you go to the Events report. I named mine contact-form.

Action: Again, the choice is yours. I’ve selected successful-form-submission-mailsent.

Label: If you want to track different forms separately, you need to set this as {{CF7-formID}} and follow the rest of these instructions closely.

Value: I did not add a value.

Non-Interaction Hit: This is also your decision and the True/False answer will effectively change your bounce rates when the hit is fired. In essence, if someone lands on a page and completes a form submission then leaves without viewing other pages, that would be considered a bounce unless you choose False. I think someone who completes a form submission then leaves should not be considered a bounce, but that’s different for everyone. (Read more about bounce rates.)

More Settings & Advanced Settings: If you’re an analytics whiz, there are advanced settings in here that you may want to configure. However, I did not change any of them.

When you’re done, you’ll end up with something like this:

 

 

Step 4: Create a Form ID Data Layer Variable

In Step 2 we pushed the shortcode’s ID into the Data Layer. When the form is submitted, the form IDs are pushed into the Data Layer (see below) and we need to capture them and get them into GTM and into our Google Analytics Events.

 

Add a new user-defined Variable called CF7-formID. Set the Data Layer Variable Name as CF7formID (case sensitive).

 

Step 5: Setting up the Goal Conversion(s)

Next, go into Google Analytics and navigate to Admin > View > Goals. Click +New Goal and set it up as such:

Goal setup: Select Custom

Goal description:

Name: Call it whatever you want. Consistent with the spirit of this how-to, I’ve called mine Contact Form. 

Type: Select Event.

Goal details: 

Category: Equals to > contact-form (or whatever YOU named it in GTM)

Action: Equals to > successful-form-submission-mailsent (or whatever YOU named it in GTM)

Label: Select the form ID of the form you want to track. If you don’t want to track different forms separately, you can leave this blank. Mine was 1192.

Value: You can add another variable here if you want, like page URL, etc.

Use the Event Value as the Goal Value: If you had a value attached to each event, you could set that up here. Since I did not, I will not.

Now click ‘Save’ and you’ve set up the Goal Conversion and appropriate tracking. If you want to set up other goals for different form IDs, just repeat the process but change the Label in the Goal Conversion.

If you’re having issues making this work, please see my troubleshooting guide first, and if you’re still not successful, contact me and I may be able to take a look.

Ninja Forms Conversion Tracking

See how to set up similar tracking for Ninja Forms using GTM and GA.

Chris Berkley

Chris is a digital marketing consultant specializing in SEO and Analytics across industries including healthcare, education, finance and others.

143 Comments

  • Gabriel says:

    Thanks a lot, it’s working.
    I noticed one minor but important error, which is in step 3, (setup Google Analytics tag)
    It refers to label {{CF7-formID}} while this should be {{CF7formID}} without – (dash)
    Because the version without dash – is the variable name created in step 4.

    • Chris Berkley says:

      No, this is not an error, and the tracking works as indicated in the guide. The GTM variable that we’re creating is {{CF7-formID}}, which pulls the form ID from the datalayer. The field in the datalayer is named CF7formID (with no dash).

  • Tapu Goswami says:

    Thank you so much for sharing the whole process i details step by step. Kudos to the author of the blog.

  • Krzysiek says:

    Hi Chris,

    I have been tried to implement this for 2 months! I read your troubleshooting tutorial and I have a question.
    You said: “You will see two tags fired: Universal Analytics (basic page view tracking) and also the wpcf7mailsent tag with the custom Javascript that fires when mail is actually sent.” and I don’t see this Universal Analytics tracking, When this tag was created and how to make it?

    • Chris Berkley says:

      It’s not included in this guide, but assuming you have basic GA tracking implemented through GTM, you would see that tag fire also.

  • Mariia says:

    Very helpful! Thanks a lot, Chris.

  • inovies says:

    Your posted steps are simple and easy to understand on creating google tag manager. Keep sharing these types of posts.

  • Charlie says:

    Awesome work! So glad someone did the heavy lifting for a GTM noob like me.

  • Tim Schmitz says:

    Hey Chris, thanks for the tutorial. Works like a charm!

  • Ciril Pilai says:

    Thanks for sharing this step with us with proper details.

  • Sunil Patle says:

    well described.keep going.

  • Tom says:

    Thanks a lot for this great tutorial – ive been banging my against this for a few hours. Never wouldve worked this out

    Great tutorial

  • Arnault says:

    hi Chris,
    just discovered your website today, great job ! Everything work for me !

  • Audrey says:

    Hello Chris thanks so much for this, really helpful. I’ve used it many times and it always worked but I have an issue now…I’ve set up the goal on analytics but it comes up as an event not a conversion. I don’t understand it never did that before.
    Any idea ?

    • Chris Berkley says:

      If it’s showing up as a GA Event, but not a GA Goal Conversion, then there’s an issue with your Goal Conversion setup within GA. Double check everything and make sure it’s configured correctly.

  • Henry H. says:

    Hi Chris. Thank you so much for this useful article that really helps me much. However, I do still have several questions to be brought up and looking forward to your reply:

    1) “No Activity in GA Real-Time View Even I Did See Tag Fired After The Form Filled & Sent in GTM Preview Mode” – Is there any possibility besides the 4 points brought up as mentioned at the end of “Troubleshooting Contact Form Tracking With GTM”?

    2) Goals Set up For Submissions on Multiple Forms – To practice goals for differentiated submissions, just simply divide them by using different form IDs as the Goal Value in GA?

    3) To Differentiate Submissions on 2 or More Forms as Multiple Events – According to this tutorial, we’re taking all form submissions as one event, isn’t it? If so, how can I divide them into 2/more events by tweaking a bit?

    Super thank you to this tutorial and looking forward to your reply.

    • Henry H. says:

      Hi Chris. I went through the Hard Refresh process but I just could not get any activity shown in EVENT neither GOAL section, though I did get through the trouble-shooting for GTM part. My guess is the communication between GA and GTM somehow not be set properly. Any idea on this situation?

      • Chris Berkley says:

        Did you enter your GA tracking code correctly? I have mine setup as a variable in GTM. To track different forms, you setup different Goals and then use different Event Labels to differentiate. An Event will fire anytime a form is submitted, regardless of the form ID. It doesn’t matter how many times you submit the form, an Event will fire every time.

  • Paul says:

    Hi Chris,

    You have made a great tutorial. Thank you for that!!
    I have followed the instructions carefully step by step. I also checked the troubleshooting guide as well.
    The trigger works perfectly. I see the events in my Analytics > Real Time > Events tracking.
    But I don’t see conversions. What can be wrong with that?

    I’m ready to send you the screenshots of all parts of the process.

    I have checked several times the Goal Details in the Admin section of GA.
    It is all clear, but for some reason the conversions are not registered.

    Kind regards, Paul.

    • Chris Berkley says:

      If Events are showing up in GA, but Goal Conversions are not, then the problem is somewhere in GA. First I would triple check your Goal Conversion setup – this is really the only place that could cause conversions not to register. Secondly, I would test using a UTM tagged URL so you can be 100% sure the Events registering are yours. If you have IP filters setup, you might be blocking your own traffic. You might also try reloading the site without the cache (CTRL + F5 in Chrome) and clearing your cookies.

  • Hi Chris,

    Thank You for a great tutorial, really assisted me in setting up the data layer for my CF7 form. My only issue at this point is Google Analytics is not picking up the event when I submit a form. I have been through the troubleshooting and my information matches that of the tutorial 100%.

    The goal is showing under Real-Time > Conversions, but not recording and it isnt present under Real-Time > Events at all. I imagine it is an issue on the analytics side as the tags I debugged and are firing as expected.

    Would you be able to assist?

    • Chris Berkley says:

      In Step 3, do you have your UA code set up as a variable? If not, you’ll need to enter your UA code directly, or create a constant variable in GTM. If you’re not getting ANY events showing up, it’s likely a problem in GTM.

  • Dai says:

    Hi Chris,

    Iam testing and I worked perfectly, tag is fired and event also but GOAL is not recored on Google Analytics yet. Although I created goal exactly follow your instruction? Do you know how to fix this problem?

    Many thanks

    • Chris Berkley says:

      If you’re seeing Google Analytics Events fired, but not Goals, then there’s an issue with your Goal Conversion setup. Double check that and make sure there aren’t any typos.

  • Charlie says:

    Thank you so much for providing such thorough and easy to follow instructions!

    We have just used this to setup tracking for a site that has more than 20 forms. However, as GA only allows 20 different goals to be be setup, is there a way to track multiple forms under the one goal. I.E. in one goal, are we able to insert multiple form labels using a comma to track forms that are closely related together?

    • Chris Berkley says:

      Yes, assuming you’re logging the form ID, when you setup the Goal Conversion, you can use “Matches Regex” instead of “Equals To” in the Label field.

  • It worked! Thank you!!!

  • Noah says:

    Hi Chris,
    Thanks for such a great video and clear instructions. I installed the event tracking by following your instruction. The event works, however, it is recorded as a conversion in GA.

    • Chris Berkley says:

      Well, yeah, that’s the point of all this. If you want event tracking without goal conversions, then you can skip the goal conversion setup steps.

  • Jean says:

    never mind my previous post i got it working, the issue was the tracking id in the analytics trigger. I posted my actual id and not a constant with the id

  • Jean says:

    Awesome tutorial, great stuff! I did setup everything as you described and i did the troubleshooting seeing all the events and Id’s exactly how they’re suppose to look like all though when i look at google analytics under real time -> events i don’t see any event there?

  • MCast says:

    Thanks for this! It worked! Special thanks to Andrei Klein for sharing those PDFs!

  • Maria says:

    Hi, I ‘ve done what you said, step by step and It works very well! Thank You! But what if I need to see the Contact Form Title instead of the formID in Google Analytics? Do you have a method? Do i have to change the code html that you gave me or is it another method that I have to follow?
    Thank you!!

  • Greg says:

    Hi Chris,

    I rarely (actually never) leave comments on a blog. But your tutorial helped me tremendously with the work I have for a client. From the bottom of my heart: thank you for the time and effort you’ve put in this, and for being so kind to share!! I owe you! 😉

  • Anders says:

    Hi Chris,

    I’ve been using classic GA with this tracking code for contact form 7 inserted before /head.

    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    ga( ‘send’, ‘pageview’, ‘Kontaktform – ‘ + window.location.pathname );
    }, false );

    This gives me the subpage of where the form has been completed. It’s easy to configure and gives precise data of which subpages are performing well. I was wondering if it’s possible to do something like this with GTM and Universal Analytics with the same easy setup?

    Cheers

    • Chris Berkley says:

      Yes, with Universal Analytics and GTM, Page URL is a built-in datalayer variable, so you shouldn’t need any additional configuration. You can select the Page URL variable as an event value or label in Step 3.

  • Hi Chris,

    I appreciate the help, however, I’ve tried for hours and hours and cannot get the tags to fire. I’ve checked the troubleshooting post and double, triple checked spelling.

    Nothing seems to be working. Could old tags be affecting the new tags?

    • Chris Berkley says:

      None of the tags fire at all? The first tag should be firing on page load. If that tag doesn’t fire, none of the rest of them will. Is there something preventing that tag from firing?

  • lex says:

    Very helpful article! Greetings from colleagues from abroad!

  • Clari says:

    Hi Chris,

    I’ve followed everything in the video. Checked every spelling mistakes but still the “Contact Form Submission” tag is not firing.

  • Zane Tuck says:

    Hi Chris! Thanks so much for putting together this guide. I am having an issue with getting the “wpcf7mailsent” tag to fire. I’ve followed the instructions and read through the troubleshooting guide. On the site, the page doesn’t reload when submitting the form. Any ideas?

  • Stewart says:

    Hi Chris,

    Great tutorial – it has really helped, many thanks.

    I’m seeing one issue and can’t figure out why the tag isn’t firing. I set this up on one of my sites all OK, but on the other site everything I think exactly the same, but this time In the GTM preview mode, I fill out the contact form and see:

    Tags Fired On This Page:
    Universal Analytics
    Universal Analytics – Fired 1 time(s)

    wpcf7mailsent
    Custom HTML – Fired 1 time(s)

    But also:
    Tags Not Fired On This Page

    Contact Form Submission
    Universal Analytics

    I can see no reason why the contact form submission tag doesn’t fire? any ideas at all of what I can try?

    Thanks,

    • Chris Berkley says:

      Sounds like your first tag is working correctly. I’d take a closer look at the Trigger in Step 2 and the Tag in Step 3. Also, double check that the page isn’t reloading after the form submission – that can cause issues. The ‘Contact Form Submission’ tag should fire after a successful submission.

      • Stewart says:

        Many thanks for the reply here – appreciated,
        It all looks OK I think – have pasted the screenshot link on form..

        Really can’t see what’s happening, is slowly driving me mad! – all looks OK I think?
        The page looks to stay static after the form submission, doesn’t look to reload…

        I could send the form page if you think would be help?
        Many Thanks,
        Stewart

  • Andre Klein says:

    Hi Chris, I’ve been working on this all day and can’t get it to generate the event in GA.

    Everything seems to look fine; the Contact Form 7 Submission tag is fired, the wpcf7successfulsubmit event created, the data being passed through the data layer and is contained in the variable, but no event or conversion is generated in Google Analytics.

    Although one can never be sure, I’m believe to have followed your instructions closely and also went through the troubleshooting guide.

    I have no IP filters in GA, tested it with Chrome and Firefox and also from a mobile phone, having switched off Wi-Fi.

    I have created a PDF document where you can see captures of my results and settings. https://awk-support.s3.amazonaws.com/ContactForm7-EventTracking-with-GTM-SUPPORT.pdf

    If you could give me a helping hand on this, I would appreciate it very much.
    Best regards,
    André Klein

  • Lukas says:

    Thank you very very much!
    This is exactly what I’ve been looking for! I’ve followed your instructions carefully and it perfectly does the job!

  • Proson says:

    Will your implementation work on https site? I tried but seems GA does not record the event but Google tag manager preview shows the trigger was fired,

    do you know why?

    • Chris Berkley says:

      Yep – works on both HTTP and HTTPS sites. If the second tag is firing but nothing is showing up in GA , there are two likely possibilities: A) There’s an issue with one of your GTM Tags (most likely the second one) or B) you have filters in GA that are preventing the events/goals from showing up.

    • Andre Klein says:

      Have a look at my comment above. in my case all settings wer correct, but the GA variable should have been defined as “Constant” and not “Google Analytics Settings”). See this capture https://www.screencast.com/t/PYsnBAJUYst. It was thank to Chris’s knowlege that we (he) had found the reason.

  • Sander says:

    Hi Chris,

    Great tutorial! Got it working without much trouble, thanks!
    I am using Optimize to tune my contactform interaction. So I have got 2 instances of the same form to test the best conversion. How do I implement this? Using the same triggers and variables but different tags and GA goals seem to resolve in a conflict.

    Hope to hear from you! Regards, Sander

  • Kai says:

    Hi Chris,

    thank you so much for this great tutorial. It helped me a lot and everything seem to work fine.

  • korhan says:

    Hi, thanks for this post. I actually did what you say here, but than i realized that i am using the GTM plugin for WordPress : https://wordpress.org/plugins/duracelltomi-google-tag-manager/

    So i went ahead and follewd the instructions here: http://dcarlbom.com/google-tag-manager/contact-form-7-on-wordpress-with-gtm/

    And went ahead and created (custom) Goal at GA, with Category equal to “Contact Form” and Action equal to “Sent” and that is it. At the preview of GTM i see the tag being fired, but no result at GA real time.

    Can you help pls?

    • Chris Berkley says:

      I wouldn’t use the on_sent_ok method described in that post because on_sent_ok has been deprecated. That may be why it isn’t working for you. There’s a pretty easy way to do it with the duracelltomi plugin, I’ll do a separate write up on that soon.

  • Pavithra says:

    HI Chris,

    Thank you for such a great video and tutorial. This is exactly what I was looking for.

    I have followed the steps exactly as enlisted in the tutorial, but I have a small issue in seeing the goal conversion statistics on google analytics.

    In the GTM preview mode, I am able to see that the tags are getting fired. In the datalayer & variables tab, I am able to see the form ID.
    (I have other goals in Google analytics which seem to be working fine)
    Since yesterday i have been struggling to understand why google analytics cant receive the data from tag manager.
    Any pointers on where else to debug would be really helpful.
    Thank you so much in advance.

    Pavithra

    • Laura Coles says:

      Hi Pav,

      I am also having the same issue so please let me know if you manage to find a resolution 🙂

      Many Thanks,
      Laura

      • Chris Berkley says:

        Without seeing your implementations, my best guess is that there’s an issue with the Tracking ID in Step #3 (Tag 2). Can you double check that? I used {{GA Tracking Code}} because I setup a GTM variable for it. If you don’t have a GTM variable, you’ll need to enter your UA code (example: UA-55555555). That Tag is the one that really connects GTM to GA, so I recommend re-examining it very carefully. If it still doesn’t work, send me an email and we can talk about troubleshooting further.

        • David Brooks says:

          Shouldn’t we create a second data layer variable related to {{GA Tracking Code}}?

          • Chris Berkley says:

            You have two options – you can enter your UA code, or create a variable for it. The variable is more future-proof and needs to be a constant variable, not a datalayer variable.

  • Laura says:

    Hi Chris

    Thanks for your video and guide, however, I am still having no luck. I have gone through your troubleshooting guide and all is fine with GTM, however when I get to the Analytics Troubleshooting I do not see anything in the Events section, therefore not measuring goals. I have checked the Contact Form 7 Trigger and it looks okay?

    Would you be able to help?

    • Chris Berkley says:

      Do you have any Google Analytics filters set up? This is the most common culprit. I recommend using a GA view with no filters (raw data) and testing on a mobile device, on data (NOT wifi) to see if a GA filter is blocking data from entering GA.

      • Laura Coles says:

        Hi Chris,

        I have tested on my mobile (data) and I can see myself as an active user in GA but nothing registers as a goal in current or previous data? I have no filters set up.

        Many Thanks,

  • Jeremy Wood says:

    Hey Chris thanks works great. Can you expand on this step?

    Value: You can add another variable here if you want, like page URL, etc.

    What do you mean making the Value another variable like page URL. how would you do that? Would you just type the word page URL and it would put the url that the contact form was sent from? or could you add something that would tell you the source medium that delivered the form submission? mean like this form came from Organic or Email like GetResponse?

    • Chris Berkley says:

      There are additional variables in the ‘Variables’ tab of GTM that can easily be added. You may be able to create a custom variable for source/medium.

  • A lot of thanks for your guide is very helpful to me and everything works as smooth as you explained 🙂
    And if it does not bother you to take your article and translate it into Hebrew (of course I will link credit)

  • Claudio says:

    Hi Chris,

    I followed your guide but the custom tag was not activated. I modified by inserting “All pages” as trigger and now it works. Why is not this passage in your guide?

    https://postimg.org/image/6s4ngdmd1/

    Thanks.

  • Brandstory says:

    Nice information but I can’t track the successful form submission. what should i do?

  • Scott says:

    Hi,

    My submission tag is firing on page load? any ideas. I only have one form so skipped step 4 is that right?

  • Jacky says:

    Hi Chris, thanks for this tutorial. Really helpful.

    I have multiple forms setup, and the process works. But when I check my analytics, every form submission returns 2 values. Also, even though I have my IDs properly setup, each form submission sends value to the other forms. As I have eight forms, when I fill out one form, all eight forms get a value (in this case two actually). Would you know wht?

  • Marko Pitesa says:

    I want to express my gratitude too Chris. It’s a fantastic tutorial and works like a charm. Thanks for sharing it with us.

  • Steve says:

    Implemented this earlier. 100% successfully. Thank you so much Chris. Note to others that might be struggling – give it 20 minutes to flush through. The first 4 test contact submissions I made did not show in GA, but then started to work after 20 minutes or so.

  • Ivan says:

    Thank you man! It is the most usefull tutorial of Contact Form 7 tracking!
    You are a Hero!=)

  • Himanshu says:

    Hi,

    I have tried to do all the steps for tracking the contact form on WordPress website.
    But it didn’t work. Can you please help in this ?

    Thanks

  • Attila Jáki says:

    Hi Chris,

    thank you for the great article.
    I have followed the steps exactly, double checked all the text for typos, still can´t get my form tracking to work properly. After submitting the form, the event “wpcf7successfulsubmit” does not show up in the Summary panel of the GTM prewiev. The form parameters, CF7-formID,Click ID etc. are all undefined?! I´m pulling my hair out, trying to solve the problem since two days but no light in sight. I have to mention, that I´m using DuracellTomi´s GTM plugin. Can it be an issue? Otherwise other kind of event trackings are working fine on my site and trackable in Google Analytics.
    I would appriciate your help very much.

  • Ken says:

    Hi, thanks for a great tutorial.
    I am facing a problem. I am using GTM’s Debug mode to see if the event is firing. The only tag fired on the page with a form is Universal Analytics.
    The wpcf7mailsent tag does not appear.
    I rechecked the settings of wpc7mailsent, custom HTML, but everything is the same as written here. Could you help me out?

    • Chris Berkley says:

      Is your wpcf7mailsent tag set to fire on all pages? When you add the custom HTML to the Tag, there’s a section below it that says “Triggering” and you’ll want to select “All Pages” if you haven’t already.

      • First off this is one of the best videos I have seen with regards to describing GTM and how to use it. So thank you for taking the time. I am a bit confused about the comment about not having a trigger for the wpcf7mailsent tag. Unless I completely missed the audio in your videos between 2:29 and 2:31 it is specifically stated that no trigger is needed. I thought that odd when I watched the video but I followed as instructed. I am going to try now and add the trigger to all pages as I suspect that is why I am not seeing data.

        On a different note in the JS :

        document.addEventListener( ‘wpcf7mailsent’, function( event ) {
        dataLayer.push({
        ‘event’ : ‘wpcf7successfulsubmit’,
        ‘CF7formID’ : event.detail.contactFormId
        });
        }, false );

        I noted that there is a FormID in event detail. When i look at the GTM assistant I am seeing a FormName variable there as well. Again this is something I haven’t tested but if that FormName is in fact the Contact Form’s name/ title rather than the form ID then I would much rather push that as my Label so that I can get Dynamic reports for the over 30 contact forms I have on my site.

        Any insight into the two items mentioned?

        again keep up the good work

        Rich

        • Chris Berkley says:

          Hi Rich – you are correct, there is an error in the video and you DO need to trigger that tag on All Pages. I’m working on revising it. Secondly, there may be a way to pass the form name, but I don’t know it, and it isn’t listed as an event object property in the CF7 documentation: https://contactform7.com/dom-events/

  • abdul says:

    I have followed the steps and when i tried to check debug the through GTM
    using contact form 7 plugin for form
    Tags Not Fired On This Page:
    Contact Form Submission

    please could

  • Martin Koekenberg says:

    Hello,

    I want to a step futher….. A goal in analytics is based on a field in the form.
    There are 4 checkboxes. When I select the first it’s Goal A, when I select the second or / and the third checkmark it’s goal B.

    Is this possible with Contact Form7 & GTM?

  • Courtney says:

    It’s laborious to seek out knowledgeable individuals on this subject, however you sound like you realize what you’re talking about! Thanks

  • Pansiri Tay says:

    Oh I found my answer! Thanks so much, Chris. This was a life saver!

  • Pansiri Tay says:

    Hi Chris, my contact form ID is 4. Where & when do I need to insert this CF ID into the code?

    • Chris Berkley says:

      Your contact form should already have a default ID associated with it – there’s no need to add additional code.

      • Pansiri Tay says:

        Hi Chris, sorry to trouble you again! I have two contact forms on my website. But whenever I sent out a test enquiry on either, both tags are triggered. I can’t seem to figure out how to differentiate between the two. Please help! Thank you!

        • Chris Berkley says:

          If you’re referring to the GTM tags – yes, both tags should trigger on successful CF7 form submissions, regardless of which form it is. The differentiation happens in Google Analytics, where the different form IDs will be stored as a different Event Labels. From there you can create separate Goal Conversions for each form ID.

  • Lemme says:

    Hi! This is Excellent (with a biiig E)! I have four separate forms on my website (x3 due to the site being multilingual) and I just verified via GA real-time report, that this step-by-step method works perfectly. Thank you, Chris! 🙂

  • Chris Berkley says:

    Hi John, If you want to use forms with different IDs, then you need to create multiple forms and then they will have different IDs by default. No shortcode edits required.

  • John says:

    Hello! i don’t understand step #4. How and where you have create changes in shortcodes for cf7? in some one php files? thanks

  • Petr says:

    Hello Chris, first of all, let me thank you for this tutorial, it is by far the best tutorial I have read this evening (and I have been googling this problem for 4 hours).
    However, I have one problem. The form ID (Label) is not passed to Google Analytics, it says not set. I think that there is something wrong around the #5, because when I look at mine Data layer, it is much shorter:

    Data Layer values after this Message:

    1
    {gtm: {start: 1509909488397, uniqueEventId: 4}, event: ‘wpcf7successfulsubmit’}

  • Chris thank you for updating your post.

    This will be very useful. I’ve bookmarked your page for future reference.

  • Vit says:

    Hi Chris,

    I’m not able to set this up after watching all both video and reading this.. I wanted to ask will you be making another 2nd version video?
    FYI… I have Google Analytics via the X Theme Extension for tracking.. I also now installed Google Tag Manager, which has Google Analytics Tag – universal set up

    Am I duplicating tracking by having this setup ? I want to track events on page .. that’s why Google Tag Manager seems best… any help thank you

  • Daniel says:

    Hi Chris,
    Great tutorial but I am stuck on step 4. How do I add Form ID or Class to the shortcode? I cannot edit the code.
    Thank you.

    • Chris Berkley says:

      Daniel – I updated the post with a method that doesn’t require you to edit the shortcode – it relies on the native Contact Form 7 form ID instead of an HTML ID.

  • Andrea says:

    Would you be able to expand this tutorial or help me figure out how I can do this for multiple contact form 7 forms? I have 8 (4 in two different languages) and I’m not sure what I need to repeat and where I should be differentiating? Would it be in the form class section?

    Thank you!

    • Chris Berkley says:

      Andrea – I’ve updated the tutorial to include instructions for tracking different forms. Let me know if you have any questions.

  • Jan Sevcik says:

    Hello Chris,

    is something wrong with using in concrete CF7 form on_sent_ok (in Additional Settings)? I have there on_sent_ok: “dataLayer.push({‘event’ : ‘wpcf7successfulsubmit’, ‘formID’ : ‘Form name’});” and it seems to work fine.

  • Ali K says:

    Hi Chris,

    I also applied all the steps exactly as you described above. Unfortunately, it didn’t work. No events were fired. The only DOM events generated were “gtm4wp.formElementEnter” and “gtm4wp.formElementLeave”. There was no “wpcf7successfulsubmit” or “wpcf7mailsent”.

    I’m using these plugins;
    – DuracellTomi’s Google Tag Manager for WordPress (Container code implemented using “Codeless injection (no tweak, right placement but experimental, could break your frontend)”)
    – Contact Form 7
    – Contact Form 7 – Success Page Redirects
    – Contact Form 7 MailChimp Extension

    I would appreciate your help.
    Best.

    • Chris Berkley says:

      The thank you page plugin is most likely preventing this from working. If you’re using thank you pages, you can setup Goal Conversions in GA using the thank you page as a destination URL.

    • Chris Berkley says:

      The Success Page Redirects plugin is going to prevent this method from working. You can set up Goal Conversions in a much easier way in Google Analytics without needing GTM implementation.

    • You have to activate the integration of CF7 within the plugin settings (tab “Integration”). Just mark the checkbox and save.

      • Pickle says:

        Settings> Google Tag Manager> Integration > Contact Form 7 > Check Box
        Check this to include a dataLayer event after a successfull form submission.

        Yep. a crucial step I was missing.

  • Chris K says:

    Hi, Chris!
    Thanks for sharing. I was wondering if there was a way to track 2 or more, unique forms on a website. I have several on a site and would like to differentiate those events in GA from one another.

  • Hello Chris,

    I did follow the steps exactly as you said and just wanted to tell you that it does not track the form submissions using your method..

    • Chris Berkley says:

      Can you elaborate more? Are you seeing Events firing in Google Analytics, but not Goal Conversions? Or neither of them? I also recommend double checking that you’re not blocking the IP address you’re testing from, or using any Google Analytics opt-out plugins.

  • Mark says:

    Hi. I could not get GTM Tag #1 to fire until I reconfigured the trigger to fire on a Page Load event (renaming the trigger CF7 Load EventListener). With that change GTM Tag #2 triggers when the event listener fires Custom Event ‘wpcf7successfulsubmit’.

  • D says:

    Chris, thanks for the tutorial. For me, everything is working fine but I find trouble with Goal 1 data, it won’t show up. Do you maybe know why? I did everything you did.

    Thanks,
    D.

  • Alex says:

    Hi Chris, Your method doesn’t work. Tag fired on page even if form’s fields were not filled in.

    • Chris Berkley says:

      Alex – I’ve updated the process to use DOM events which verify that mail was actually sent. Give it a try and let me know if it works for you.

  • Antony says:

    This is not tracking the successful form submissions. Instead it tracks all the clicks on the submit button whether or not they are filled. Is there a way to validate and the tag fires when there is a thank you message?

    • Chris Berkley says:

      Antony – There is, and it took me a while to figure it out. I’ve edited the post, please give it a try now and let me know if it works. Thanks for the heads up.

  • HeNRy Hu says:

    What a great tutorial content – Clear & Specific!! Thank you for sharing this.

  • Ivo Cruz says:

    Hi Chris,

    Thanks for this article! It has been really difficult to find something actual about this.

    I’ve followed your steps but, instead of using RegEx=wpcf7-form, i’ve used the Form ID triggering options selecting onyl the forms that i wnat to track. I’ve opted for this method because i want to track 2 different types of forms, contact forms and quote forms. Until now it’s not working 🙁

    My question is, did you have tried this approach?

    At this time, I’m reaching the limit of my efforts. I’ve tried a lot of techniques and can’t get analytics to track anything 🙁

    • Chris Berkley says:

      Glad I could help! I don’t see any problem doing it that way. This guide is basic tracking – there are dozens of ways to get more specific and that sounds like an ideal use case, especially if you’re using multiple form variations.

  • This is phenomenal! So simple and effective. Thank you so much Chris.

  • Helen says:

    Thank You for the article!
    I have one question: How do I track contactform-7 with diferent ID? I know where to find the shortcode with the ID but I dont know how to track several forms on a page?

    • Chris Berkley says:

      Helen, are you looking to use the Form ID? I *think* this is what you’re looking for. You can right click, inspect element, and grab the Form ID. https://www.screencast.com/t/xSs8LiMkj

      • I have the same question. I followed your tutorial in you tube https://www.youtube.com/watch?v=rzEroHn2j5M.

        But I see now that all Contact Form 7 forms in my site will get registered in the goal.

        What Would I need to have a different goal /event for each…?
        I have one CF7 form for my contact page , another to register for a newsletter (with connection to MailChimp) and others they need to fill out to download ebooks.

        Should I do all the same steps for all but use their individual ID..? Where should I add that ID information ..?

        • Would be great if you could elaborate a little bit on creating different IDs for different Contact Form 7 forms. Thanks for your help.

          • Chris Berkley says:

            Fernando – I have updated the tutorial to include instructions for tracking multiple forms. This method relies on actually creating different forms within the CF7 plugin, so they have different form IDs.

Leave a Reply