How to Track WordPress Contact Form 7 (CF7) form submission with Google Tag Manager (GTM)

Now that 'on_sent_ok' and 'on_submit' have officially been removed from ContactForm7 (CF7), you need an alternate way to track when WordPress forms are submitted.

From a marketing point-of-view, submitted forms are key events and here's how to use Google Tag Manager (GTM) to track submitted forms as events and goals in Google Analytics (GA).

The following assumes that you have GTM active on your WordPress site, your CF7 form is working, and that you have connected GTM to your GA account.

 (1) In GTM, go to Tags > New

Create a custom HTML tag with the following javascript, and set the tag to fire on every page.

Title your tag whatever you like, I've used 'CF7-FormSubmit-Listener' and here's what it will look like in GTM

 

(2) From WordPress, get the ID of your Contact Form 7 form.

You can find this in the form's shortcode, in this example the ID we want is '246'

 

(3) Create a trigger in GTM which fires when the form is submitted.

In GTM

• go to Triggers > New
• give it a descriptive title (in this example I've used 'CF7-ContactForm-Submitted'
• trigger type is custom event
• event name must be exactly 'form_submitted_' plus the form ID from step 2. In this example the final event name is 'form_submitted_246'
• set the trigger to fire on all custom events.

The finished trigger in GTM is shown below.

 

 

(4) Create a tag in GTM which links the submitted form event to your Google Analytics (GA) tracking

In GTM:

• go to Tags > New
• give your tag a descriptive title, in this case I've use 'GA-ContactForm-Submitted'
• tag type is 'Universal Analytics'
• track type is 'Event'
• manually enter your own descriptions for category, action and label. Make a note of the label you chose, you'll need that in step(6) if you want to create a goal which converts when the form is submitted
• in the Google Analytics setting, add your GA tracking ID
• set this tag to fire when the submitted when the trigger from step (3) fires

The completed GTM tag is shown below.

 

(5) Check the Results in Google Analytics

If you go to the Real-Time Reports in GA and submit the form, you should see that the event is registered. If not, debug by putting GTM in preview mode, return to the WordPress page which has the form, and check which tags are being loaded and fired.

 

(6) Create a Goal linked to the submitted form

You may wish to go one step further and create a goal which converts everytime the form is submitted. To do this:

• go to GA > Account > Property > View > Goals > New Goal
• under Goal Setup choose 'Custom'
• under Goal Description name your goal and choose type of 'Event'
• under Goal Details, the label must be exactly what you specified as the label in step (4), you don't necessarily have to set any other event conditions.

If you've only just configured the firing of this event in GTM, don't be surprised if 'Verify this Goal' shows that this goal hasn't converted yet.

Here's what my finished goal looked like in GA

 

That's it, good luck.

 

---

  Need help configuring event and form tracking with your WordPress site?
Contact us, we'll be happy to help!