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.

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.

45 Comments

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

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

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

  • HeNRy Hu says:

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

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

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

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

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

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

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

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

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

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

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

  • 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

  • Chris thank you for updating your post.

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

  • 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’}

  • 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

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

  • 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! 🙂

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

  • Pansiri Tay says:

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

  • 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

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

Leave a Reply