Advanced ContactForm7 Tracking with Google Tag Manager

Track your WordPress ContactForm7 submissions and improve user experience with our Google Tag Manager and Google Analytics custom event script. If you’re a user of WordPress, you’ve probably come across ContactForm7 or CF7 for short. It’s a very popular and free contact form extension which allows you to build custom forms for your wordpress site with ease. Under the hood, there are a few excellent hidden features which allow you to expose usage information. With a little bit of scripting magic, this extra layer of information can be used within Google Analytics to better understand how your contact form is being used.

---

Time Required: 15mins Difficulty: 3/5 Tools Required: Knowledge of JavaScript and the Data Layer, Google Tag Manager, Google Analytics, WordPress, ContactForm7 Notes: This isn’t an easy copy and paste kind of guide – you will need to tailor the event names and variables to fit your contact form field names

---

Step 1

Find out how your forms’ input fields are named by adding the following code as a new GTM tag

<script>
document.addEventListener('wpcf7mailsent', function(event) {
    console.log(event.detail.inputs); // output data to console
});
</script>

Example: Note: Not required, but we’ve have locked this script down to only fire on the contact page. Since this is only a temporary step, you can use the built-in All Pages trigger.

Step 2

Once the above code is deployed, go to your site and successfully submit the form. Open your browser debug console and you should be presented with a readout similar to this:

0: {name: "name", value: "Joe Bloggs"}
1: {name: "email", value: "joe@bloggs.com"}
2: {name: "issue", value: "Hosting Issue"}
3: {name: "message", value: "My hosting is down!"}

The idea here is to figure out the names of the fields you wish to pass through to Google Tag Manager & Google Analytics. For this example, I want to grab the issue  field so I can figure out which support issues seem to be the most common. We’ll use this in the next steps.

Step 3

We’re going to extend the initial script to contain a function which will lookup a requested name and return its’ value. Or, if the field name is incorrect, return as undefined.

var data = event.detail.inputs; // Get Data
function getValue(target) {
    var output = data.filter(function(obj) {
        return obj.name == target ? true : false;
    });
    return output === undefined ? null : output[0].value;
}

We can call this function like this: getValue(“issue”)  which will return the value: Hosting Issue

Step 4

Next, we need to add the Data Layer push which includes the values we wish to use in Google Tag Manager.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    'event': 'contactForm',
    'contactForm': {
        'status': 'success',
        'issue': getValue("issue") //Get the Issue Field Value
    }
});

Example Final Script

Once you’ve pinpointed the fields you need based on their names and you’ve added them to the Data Layer code, you’re nearly ready to go! Here’s the full script minus the original console.log(event.detail.inputs)  – we don’t need this in the production version of the script as it was for reference only.

<script>
document.addEventListener('wpcf7mailsent', function(event) {

    // Retrieve input values
    var data = event.detail.inputs;

    // Fetch value belonging to specified field name
    function getValue(target) {
        var output = data.filter(function(obj) {
            return obj.name == target ? true : false;
        });
        return output === undefined ? null : output[0].value;
    }

    // GTM Event
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'contactForm',
        'contactForm': {
            'status': 'success',
            'input-name': getValue("object-input-name") // Example Input
        }
    });
}, false);
</script>

---

Collect the Results in Google Tag Manager

So we’ve got the results firing into the Data Layer – let’s get them loaded into Google Tag Manager. To get the data from the Data Layer, we need to create custom variables. For the above example, we need to assign the value of the issue  field as a Data Layer Variable called contactForm.issue

Create a New Trigger

We need to make a trigger which will watch for form submissions.

Create a Google Analytics Event Tag

As this is a basic contact form with a singular Data Layer Variable, we can create a Google Analytics Event with the Issue field detailed in the Label section. With everything in place, test your configuration. You should see the following in Google Analytics as an event:

• Category: Contact Form
• Action: Submitted
• Label: Issue: Hosting Issue

Tip 1:  If you’re handling a lots of important fields which you’d like to track – it would be more efficient to set up custom dimensions within your Google Analytics Property and pass through each field using a top-level Form Submission event instead. However, there are limits on custom dimensions – so think strategically before doing this as you could end up using your allotment of custom dimensions very quickly. Tip 2: Don’t add personally identifiable information (PII) into Google Analytics. This is strictly forbidden and may result in your account being closed down. This process is designed to enhance user experience by understanding how your users are interacting with your forms. Do you need help implementing your form submission data into Google Analytics? Let’s chat.