Changes to Tracking Contact Form 7 Submissions

With over 3 million downloads and counting, Contact Form 7 is one of the most popular tools for creating a variety of forms on the WordPress platform. When using Contact Form 7 it’s easy to see why this plug-in has become a favorite of developers and website owners. The ease of use, flexibility, breadth of options, customization yet simplicity all combine to make up one of the most comprehensive and widely used plug-ins to date.

One of the great things about Contact Form 7 has always been the easy and effective way of tracking form completions through either a redirection to a “thank you” page or once the form is submitted or just redirecting users to a new page to encourage further action. For anyone familiar with the way that Contact Form 7 works these two settings for assigning Javascript may look very familiar:

  • on_sent_ok
  • on_submit

However, these settings are in the process of being phased out completely by the end of 2017. One of the only ways to track form submissions going forward will be to use event tracking. Luckily this is relatively simple, especially for Google Analytics users, to implement. In fact, by putting an event tracker similar to the one we suggest below, you can track form completions in much the same way as always but with even more accuracy.

The 3PRIME Solution
When adding event tracking to contact forms, there are a few checks that need to be made beforehand. The very first thing is to check to see if Google Analytics code exists in the header of your page. Without this, nothing else will work as intended. Once that is confirmed, we can get into the scripting/functionality.

We will need either to add a script to the page/template or we can find a dedicated javascript file to handle the work, which I would recommend. A common file such as a main.js or default.js, something that already exists on the page as a source. If there is no js file on the page then we would need to create one and link it, or we can go with the alternate method of just adding script to the page/footer.

Wherever you put your script, make sure there is a way to detect on click events. One common way is with jquery which exists on many sites and in many forms. If jquery is not on the site then we can either have the site start referencing jquery or make a more basic reference for a click event. Then check to see if any “document ready” code is in the js file. If not, you will need to state that this will happen when the document is ready to ensure that the script is not loaded before the form is.

Now in the template/page that has the form, find the submit button and add a class to it in the class field. it can be any name you want that fits the guidelines of a class name but for this example we will call it “contactEmail”. Once a class is set we can start referencing it in our script on document ready. IDs also work but classes are more consistent and user-friendly when used on the same or even multiple pages.

In the script we just have to make sure that the class is targeted correctly now. We can do this through testing. A common method is by using console.log for javascript to print a message to the inspector console when an event occurs. Add an “onclick” event handling function behind the “contactEmail” button class being clicked and simply put console.log(“ok”) inside it. If you click your button now, then the console should print out “ok.” If this isn’t working as intended then you will need to reevaluate your javascript/class/function as any of those could be the issue.

Once an onclick function is set and confirmed as working, simply add the google analytics event handling code inside the onclick function. A basic analytics function works like so:

  • ga(‘send’, ‘event’, { eventCategory: “”, eventAction: ‘click’, eventLabel: ””});

We are now sending a new event to Analytics to record, giving it a category, action, and label. These are important as they help discern and differentiate every action you wish to record in analytics. More details on how the code works can be found here. Putting it all together, we will get a function like this inside of our “main.js” file that is included on our site and on our contact form page.

EXAMPLE USING JQUERY
$(‘#contactEmail’).click(function (){
ga(‘send’, ‘event’, { eventCategory: ’emailclick’, eventAction: ‘click’, eventLabel: ’emailContactPage’});
});

When you click on the submit button with the “contactEmail” class at any point in time when on the page, an event should be tracked and recorded on your analytics dashboard, under the category “emailclick” and labeled as “emailContactPage”. Remember to test extensively and clear caching if your code is not saving/updating properly!

For more information and other form tracking solutions straight from Contact Form 7’s developer click here.