Contact Form 7 Event Tracking with Google Tag Manager

By March 20, 2017Analytics

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:

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.

Chris Berkley

About Chris Berkley

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

76 Comments

  • 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 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.

  • 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.

  • 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