contact form 7 tracking with google tag manager
ANALYTICS

How to Setup Contact Form 7 Event Tracking with Google Tag Manager

Contact Form 7 is one of the most popular plugins for WordPress & the best part of this plugin is – it can easily be tracked in Google Analytics through Google Tag Manager. The best part of this plugin is you don’t need to create a thank you page for this & Google Analytics has no issues on it.

To set up the tracking, we would be required:

  1. Contact Form 7 plugin installed on your WordPress
  2. Google Analytics Installed on your WordPress
  3. Google Tag Manager installed on your WordPress

STEP 1:

Create a GTM tag for Form Submission Event

Contact Form 7 Form Event submission means when you hit the form “Submit” button, an event fires which actually show that your form has been submitted & the mail has been sent.

When someone submits the form, the Contact Form 7 plugin fires the DOM Events for several events which determine if the form has been submitted successfully or not. These DOM Events are:

  1. wpcf7invalid — Fires when form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.
  2. wpcf7spam — Fires when form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
  3. wpcf7mailsent — Fires when form submission has completed successfully, and mail has been sent.
  4. wpcf7mailfailed — Fires when form submission has completed successfully, but it has failed in sending mail.
  5. wpcf7submit — Fires when form submission has completed successfully, regardless of other incidents.

Since the wpcf7mailsent is that DOM Event which fires on form submission & mail sent successfully. We will create tags & triggers for this.

To create this tag:

  1. Go to Google Tag manager
  2. Click Tags on the left menu bar
  3. Click New on the dashboard
  4. Name this tag wpcf7mailsent, or what you feel convenient.
  5. Click on Tag Configuration & Choose Custom HTML
google tag manager tutorial
  1. Now, add the following code:

<script>

document.addEventListener( ‘wpcf7mailsent’, function( event ) {

        dataLayer.push({

          ‘event’ : ‘wpcf7successfulsubmit’,

          ‘CF7formID’ : event.detail.contactFormId

        });

             }, false );

</script>

  • Fire this tag to the All Pages –Page View  trigger
  • Save this tag
contact form 7 event tracking

STEP 2:

Create a GTM Trigger for Above Tag

  1. Go to Google Tag manager
  2. Click Triggers on the left menu bar
  3. Click on New &name it as per your convenience (I have used  the name: Contact Form 7 Trigger)
  4. Click on Trigger Configuration & choose Custom Event
  5. Add event name wpcf7successfulsubmit
  6. Fire this trigger on All Custom Events
  7. Save this trigger
contact form 7 tracking google analytics

STEP 3:

Create a Tag for Form Submission

  1. Go to Google Tag manager
  2. Click Tags on the left menu bar
  3. Click New on the dashboard
  4. Name this tag Contact Form Submission, or what you feel convenient
  5. Click on Tag Configuration & Choose Universal Analytics
  6. Add the details are below:
    1. Action successful-form-submission-mailsent
    1. Label Enter Form ID, as mentioned in the Next step: 4.
    1. Non-Interaction Hit, choose the default value False
    1. Google Analytics Settings, choose you Google Analytics Settings
  7. Now, fire this tag on Contact Form 7 Triggerwhich we created on the previous step
contact form 7 wordpress

STEP 4:

Create a Form ID Data Layer Variable

Every form which you create on Contact Form 7, has the unique form ID which mentioned in Data layers when a form submitted successfully. We need to add this ID into the Goal but before this, we need to create a variable for this Form ID.

contact form 7 google analytics

NOTE: The CF7formID highlighted in the above screenshot is the same which I used in tag creation in previous step 3.

To create this Data Layer Variable:

  1. Go to Google Tag Manager
  2. Click on Variables on the left menu.
  3. Under User-Defined Variables, Click New
  4. Name this Variable C7-formID
  5. Click Variable configuration & choose Data Layer Variable
  6. Add CF7formID as the Data Layer Variable Name
  7. Hit Save button
contact form 7 tags

STEP 5:

Setting up the Goal Conversion

Now as the final step, you need to set a goal for you successful form submission in Google Analytics.

To create the goal, follow the below steps:

  1. Login to your Google Analytics account
  2. Navigate to Admin > View > Goals. Click +New Goal and set it up as:
contact form 7 leads tracking
  • Add the Goal name as per your convenience, I have added Form Submission – Contact Us
  • Now add the goal details as
  • Category: Equals to > contact-form (or whatever YOU named it in GTM)
  • Action: Equals to > successful-form-submission-mailsent (or whatever YOU named it in GTM)
  • Label: Select the form ID of the form you want to track. If you don’t want to track different forms separately, you can leave this blank. Mine was 136 (Check Step 3 & 4).
  • Value: You can leave this value field blank.
contact form 7 database
  • Click on Save & check the form workings in Google Analytics Real-Time conversion feature.

So, this is the procedure which you need to follow when you create a goal for Contact Form 7 through Google Tag Manager. To set up more goals, you just need to repeat STEP 5 & change the Label according to the form ID.

Hope this you find this blog helpful. If you are having any issue while setting up goals with the above procedure, just comment below & we will help you out.

Contact Form 7 Conversion Tracking FAQs

How to setup Contact Form 7 in Google Analytics?

If you have Contact Form 7 in Google Analytics plugin installed on your WordPress then you need to set up tags triggers using Google tag manager. This is a simple process.

How do I track a submission in Google Analytics?

Contact form 7 configuration in analytics required to google analytics event tracking which is done using Google Tag manager data layers. Once you are done with contact form 7 setup on WordPress, follow the steps mentioned in this blog to track Contact Form 7 submission.

What is the Contact Form 7 Plugin?

Contact Form 7 Plugin is a free WordPress plugin to create forms with simple HTML markup.

How to use Contact Form 7?

To use Contact Form 7, you need to install it to your WordPress & start creating forms. You can simply put the forms on any page using shortcodes.

Related Articles

Best Website Traffic Monitoring Tools

How To Create Custom Reports In Google Analytics

10 Best Keyword Research Tools to Find the Right Keywords for SEO in 2020

Previous article

10 Most Popular Content Marketing Platforms 2020 (With DA)

Next article
Sumit Kumar
Sumit is a digital marketing specialist and results-driven entrepreneur with more than ten years of rich industry experience. His engaging and insightful columns help audience to make it big.

You may also like

Leave a reply

Your email address will not be published. Required fields are marked *