Contact Form 7: Send event to Google Analytics on Form Submit with GTM

This is an updated post from my old post dated back to 2015 on how to send a Form Submit to GTM via the Contact Form 7 plugin in WordPress.

The biggest change is that we are going to look at how to do send the data to Google Analytics 4, and not the old Universal Analytics. It’s very easy to adapt this and send the data to Universal Analytics if you are still using that.

Sending the event through Google Tag Manager is very easy to achieve, and I’ll walk you through two way of doing it in this post. Both with a GTM Plugin in WordPress and without a plugin.

How to send the data with GTM4WP

If you are using the GTM Plugin for WordPress (which I personally use on all my sites), there’s a nifty little feature in it that allows you to push an event into the dataLayer when a Contact Form has been submitted.

Activating the Contact Form 7 integration in GTM4WP.

By checking the box found under the Integration tab, the plugin itself will push events into the dataLayer when you visitors navigate through your Contact Form and most importantly, it will send a specific event when the form has been submitted. How great is that?

The Google Tag Manager dataLayer has been populated with data showing that the form has been sent.

As you can see, when the form has actually been sent, an event named gtm4wp.contactForm7Submitted  was pushed into the dataLayer.

So far, so good. But what happens if you don’t use a plugin for Google Tag Manager but still want to track the submits?

Send the formSubmit via Contact Form 7

In the settings for Contact Form 7 at the very top of the actual form it self there’s a tab named Additional Settings and according to the documentation it’s very straight forward to add event tracking using only Google Analytics.

There’s a hook in the plugin named on_sent_ok:  that you should use in order to tell the plugin what to do after the form has been sent, or submitted.

So, by pushing an event into the dataLayer we can achieve the exact same thing as the plugin above did. So for the sake of simplicity we are going to create an event matching the name used above and then carry on creating the actual tag and trigger in GTM based on this.

Feel free to change the name of the event to whatever pleases you, just make sure that you change accordingly during the implementation.

Enter this code into the Additional Settings box:

on_sent_ok: "dataLayer.push({'event': 'gtm4wp.contactForm7Submitted'});"

Basically, we’re telling the plugin that upon on_sent_ok, push the event value of gtm4wp.contactForm7Submitted into the GTM Message Queue.

Send an Event into Google Analytics when Form has been submitted

This will assume you are running GA4. If you are still on Universal Analytics, it’s very easy to adapt the below steps. Drop a comment below if it’s unclear.

Tag Configuration in Google Tag Manager for Contact Form 7 setup.

First, create a New Tag in GTM and give it a proper name. I went with GA4 – Event – CF7 Form Submit.

Then select the Tag Type Google Analytics: GA4 Event and configure it as the screenshot above. You initially just need to enter the Configuration Tag (which should already be in place) and then give it an Event Name that makes sense. In this case; form_submit.

Creating the custom Trigger in Google Tag Manager for the Contact Form 7 Form Submit.

Then create the Trigger as shown in the screenshot above.

Make sure to use the exact Event Name as the value you’re sending into the dataLayer. This is going to be gtm4wp.contactForm7Submitted unless you’ve changed it.

Check the result in GA4

Check your Real-Time report in GA4 and there you have it!

Good luck, and May the Force be with you!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get 10,000 extra words for free with Jasper AI

LEARN HOW TO DRIVE MORE
TRAFFIC TO YOUR SITE