How to track form submissions in GTM if you have Contact Form 7

In this article, you'll learn how to set up form submission tracking in GTM.
We have described the entire setup in four simple steps.

Things to keep in mind when tracking Contact Form 7 form submissions

The Contact Form 7 plugin works on AJAX, which means that the page itself does not reload when the form is filled in and submitted.

You won't be able to use the classic GTM form tracking tool here.

Most often, this applies to single-page sites, but sites with a large number of pages can also have such forms.

For such cases, we use event tracking, which is transmitted by the form itself when it is submitted.

Adding a tag for tracking submission of Contact Forms 7

You need to add a tag in GTM: custom HTML.

Add this code to it, taken from the official Contact Form7 website:

<script
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.dataLayer.push({
      "event" : "cf7submission",
      "formId" : event.detail.contactFormId,
      "response" : event.detail.inputs
    })
  });
</script

Let's see how everything works. Click on "Preview" in the upper right corner. If GTM is installed correctly, you'll see an orange icon with the following message "Previewing the Default Workspace"

Next, go to our website. A special window should appear at the bottom of the browser screen. We submit the form again and see the following in it:

Pay attention to the name of the event, as this is what we will need for further configuration: cf7submission.

Setting up triggers and variables to track Contact Form 7 form submissions

You need to create several triggers

You need to go to the "Triggers" in the left menu and click "Create".

Specify the name by which you will distinguish it. Choose the type of trigger "Custom event"

Insert "cf7submission"

Now it's time to set up the variables. Let's take a closer look at what exactly the form returns when you submit it:

Everything that follows the word "response", and the numbering is sequential, starting from 0.

It is in this form that I am particularly interested in email, but in general, you may have a different key field.
The result is a variable with the value response.2.value (check if I have defined the string correctly)
Go to the "Variables." and in the section "Custom variables" click "Create"

Need help setting up website conversions?

We will set everything up for you!

Choose "Data level variable"

In the name, insert what we got: response.2.value

If you have several forms on your site, I recommend adding the formId variable. It is created in the same way.

We need to check how everything works. Again, go to the preview in the GTM and navigate to our form page. If everything is set up correctly, you will see the form correctly displayed, including the formId.

Google Universal Analytics tag to track form submissions Contact Form 7

We're halfway there! Let's set up a custom Google Universal Analytics tag.
Let's go to the Tags. and press "Create". Select it in the Google Universal Analytics tag configuration.
Of course, at this stage, you should have Google Analytics installed.

Tracking type: Event.
Category: Submission Form
Action is our variable FormID
The label is our variable email
Google Analytics settings: Google Analytics variable
Trigger our tag cf7 submit