Track Leads Using Contact Form 7 and GTM

Let’s start with bare essentials. You will need the following.

• WordPress-powered site
• GTM Container that you can publish
• Contact Form 7 plug-in

Set up your Contact Form 7

This is a really simple form that we use on our Contact page. Its configuration looks like this.

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Try it out, and see whether the form you’d submitted has arrived to your e-mail. If yes, let’s proceed to the next step.

Build an event listener in GTM

We have built a simple and functional form. It’s now necessary to let Google Tag Manager know when visitors of your website successfully submit it. We do that by adding the following code (known as event listener) as a Custom HTML Tag into your container.

<script>
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function(event) {
    window.dataLayer.push({
        'event' : 'form-submit',
        'eventCategory' : 'form-contact',
        'eventAction' : 'submit',
        'eventLabel' : '{{Page Path}}',
        'eventNonInteraction' : false
    });
}, false );
</script>

I have taken the liberty to modify the standard CF7 listener that can be found here.

Here is what it does. It listens to changes you specify in DOM. When a form is submitted, DOM registers a change. Then window.dataLayer.push command fires. GTM now knows that an event called form-submit happened. It also has all the important details about that event in the dataLayer, so we can easily work with them.

Set the event listener to fire on all pages. If you have a large site and are obsessed with performance, you may want to limit this Custom HTML tag to firing only on pages where the users might actually find the contact form.

Add dataLayer variables to GTM

Do you have all keys from the dataLayer object above set in GTM as variables? If not, make it so.

Build a trigger

Make sure you name the event in the trigger form-submit, otherwise it wouldn’t work.

To ensure the trigger sets off only after successful form submission, you may add further conditions for its activation. In our case, this trigger activates only when an event with variables dl.eventCategory equal to form-contact and dl.eventAction equal to submit fires.

Create a GA event tag

Lastly, we need to build a tag that sends data about the submitted form to Google Analytics. We have all information about the event in the dataLayer object connected to the event listener. At the same time, all dataLayer variables from the event listener are put in to the GTM, so they can be easily read.

SIDE NOTE
I have chosen to read values like Event Category or Event Action from the dataLayer over manually inputting them into the event tag. This makes the GTM implementation more scalable and avoids having tens of event tags. This approach comes in handy when implementing GTM on larger sites.

Now, create a tag with the following parameters. Make the tag fire on the trigger you’ve created in the previous step.

Test

Almost done. Turn on the preview mode and try submitting a form with dummy data. If you’ve done everything correctly, you should see the event listener fire on page load and the GA tag fire on form submission.

Next steps

Contact Form 7 has many different functions to extend your tracking and data collection. For example, you can extract user’s name or e-mail and send it to your analytics software (provided your software’s Terms of Service allow it) or even to your own database. We shall re-visit this idea later. Stay tuned.