This blog post has been a long time in the making. There are a variety of Contact Form 7 “fixes” to get submissions to show on Google Analytics, but seemingly none of them work. It used to be as simple as dropping a bit of code into the “additional settings” in the contact form, but no longer. It’s taken some time to figure out exactly how this can be done — and actually work — so I’d like to share the various solutions for fixing this. This blog post is dated July 20th, 2017; changes may occur in the future that may make this solution defunct. Please be aware of this.

Solution #1: Manual Code

Step 1. Make sure that you have Google Analytics code in your header of your site. You can do this by viewing the source code of your page and searching for “GoogleAnalytics” or “UA”. It should look like this:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-1', 'auto');
ga('send', 'pageview');

</script>

Step 2. Insert the tracking code listener into the header of your page. Here is the code:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga( 'send', 'event', 'contact', 'submit' );
}, false );
</script>

You can add this to footer.php with this code:

function mycustom_wp_footer() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga( 'send', 'event', 'contact', 'submit' );
}, false );
</script>
<?php
}

Step 3. Give your contact form a test. If it’s working, it should show in Google Analytics under Behavior > Events > Overview as “contact”. It can take 24 hours for this to show.

Things to remember: Check and make sure when you’re copy pasting the code that it’s not utilizing smart quotes. HTML, Javascript, etc won’t work properly with smart quotes.

Solution #2: WP Google Analytics Events plugin

Step 1. Make sure you have the Google Analytics code in your site by following the same steps as step 1 above.

Step 2. Install WordPress plugin “WP Google Analytics Events“.

Step 3. Set up “click tracking” with the following information:

Element Name: wpcf7mailsent (this will track ONLY when the form is successfully sent; this is the preferred method)

OR
The wpcf7mailsent feature does not appear to be properly working any longer. I have confirmed that the wpcf7-submit method does, in fact, work with the setup and plugin I am describing.

Element Name: wpcf7-submit (this will track when the user clicks on “submit”)
Type: class
Event category: Contact Form (or however you want your label to show up)
Event action: submit
Event label: Contact form submission

WP Google Analytics Events Plugin

Step 4. Click “add”

Step 5. Give your contact form a try. If it’s working, you should see it in the real-time Google Analytics, or under Behavior > Events > Overview. It can take up to 24 hours for this information to show.

Google Analytics Contact Form

Well hold on… I have more than one contact form. Isn’t this a catch all?

You’re right. The method above IS a catch all for if you either a. don’t care about differentiating your contact forms or b. only have one contact form. If you want to set up contact form tracking differently on each contact form, here’s how you can do it.

In this example, we have a “quotes” form and a “contact form”. We want to track them individually to find out whether people are writing in for quotes or otherwise.

I’ll set up WP Google Analytics Events plugin the same as above. I’m going to define two classes, though. It will look like this:

Element Name: quote-submit
Type: class
Event Category: Quotes
Event Action: submit
Event Label: Quote Submission

Element Name: contact-form
Type: class
Event Category: Contact Form
Event Action: submit
Event Label: Contact Form Submission

Individualized Click Tracking for Contact Form 7

Once you set this up, go into your contact form and make changes to the submit code.

My quotes page submit button now looks like: [submit class:quote-submit “Send”]

My contact form page submit button now looks like: [submit class:contact-form “Send”]

There is a bug within Contact Form 7 that if you place an ID or class after the submission text (in this case, “Send”) it will not take or show. Make sure you place your ID or class before the submission text.

Give your contact form a try. If it’s working, you should see it in the real-time Google Analytics, or under Behavior > Events > Overview. It can take up to 24 hours for this information to show.

Want to get updates like this delivered straight to your inbox?
Subscribe to our blog to receive website design tips, development tricks, the latest in SEO, and more. We don't share your email address with anyone and you can unsubscribe at any time.

12 responses to “How to track contact form 7 submissions using Google Analytics”

  1. Dmitry says:

    Hi!
    What if I have two different form on the website? I want to track events from each. Event1 and Event2. How to do it?

    • Aimee Cozza says:

      Hi Dmitry,

      It’s actually pretty simple. Install the WP Google Analytics Events plugin. Once you have that installed, set up separate classes for each contact form you want to set. For example:

      Event1
      Element name: Event1
      Type: class
      Event Category: Event1
      Event Action: submit
      Event Label: This is from Event1 Form

      Event2
      Element name: Event2
      Type: class
      Event Category: Event2
      Event Action: submit
      Event Label: This is from Event2 Form

      Once you have that set, go into Contact Form 7 and edit your form. On your submission tag, add your Event1 class. i.e:

      [submit class:Event1 “Send”]

      DO NOT put your class AFTER the “Send”. There is a bug in CF7 that if you put it AFTER “Send” it won’t apply the class.

      Once you save this and give it a test, you should see results coming in immediately.

      • Dmitry says:

        Unfortuntelly, it necessary not for Google Analytics, but for Yandex.Metrika. And there is no plugin for it.
        It works with code:

        document.addEventListener( ‘wpcf7mailsent’, function( event ) {
        yaCounter12345.reachGoal(‘get-consult’); return true;
        }, false );

        But only for one form.

  2. Dmitry says:

    I found the solution. It is possible to track different events without plugin:

    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    if ( ‘809’ == event.detail.contactFormId ) {
    ga( ‘send’, ‘event1’, ‘contact’, ‘submit’ );
    }

    if ( ‘113’ == event.detail.contactFormId ) {
    ga( ‘send’, ‘event2’, ‘contact’, ‘submit’ );
    }

    }, false );

    809 and 113 – form’s ID.

  3. Juan says:

    Hi,
    I have contact form 7 by using the siteOrigin Contact Form plugin. Do you know how can I make it works in the same manner? Thanks in Advance.

    Juan

    • Aimee Cozza says:

      Hi Juan,

      The plugin method above should work the same. SiteOrigin just allows CF7 to be “widgetized”, making it easier to place a contact form. The same methods as described above will work.

      • Juan says:

        Hi Aimee,

        It is not working. I added wpcf7-submit and the same category, action and label as the image and selected True for non-iteraction event and nothing happens in GA. I have no idea what my error is.

        • Juan says:

          How can I identify this section on the code: [submit class:quote-submit “Send”]

          • Aimee Cozza says:

            Hi Juan,
            Can you share your URL of your page so I can look at it?
            That code will be under the Contact Form 7 plugin, in the contact form, under “form”.

Leave a Reply

Your email address will not be published.