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 with it.

To set up the tracking, we would be required to:

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 the Form Submission Event

Contact Form 7 Form Event submission means when you hit the form “Submit” button, an event fires which actually shows 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 been completed successfully, but mail hasn’t been sent because there are fields with invalid input.
2. wpcf7spam — Fires when form submission has been completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
3. wpcf7mailsent — Fires when form submission has been completed successfully, and mail has been sent.
4. wpcf7mailfailed — Fires when form submission has been completed successfully, but it has failed in sending mail.
5. wpcf7submit — Fires when form submission has been 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 is convenient.
5. Click on Tag Configuration & Choose Custom HTML

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

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

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 Google Analytics: GA4 Event.
6. Add the Event Name: Content_Form_Submission (This name will be used in Google Analytics 4 as a parameter)
   1. Action – successful-form-submission-mailsent
   2. Label – Enter Form ID, as mentioned in the Next step: 4.
   3. Non-Interaction Hit, choose the default value False
   4. Google Analytics Settings, choose you Google Analytics Settings
7. Now, fire this tag on Contact Form 7 Triggerwhich we created in the previous step

STEP 4: Setting up the Conversion in Google Analytics 4

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

To create the conversions, follow the below steps:

1. Login to your Google Analytics account
2. Navigate to Admin > View > Conversions. Click +New Conversion Event.

• once you create it, don’t forget to test it multiple times using Google Tag Manager & Google ANalytics 7 debug mode.

So, this is the procedure which you need to follow when you create a conversion for Contact Form 7 through in Google Analytics 4 using Google Tag Manager.

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

If you need any assistance in your SEO campaign, you can hire us.

Need any help or assistance on Google Analytics 4?

Contact Form 7 Conversion Tracking FAQs

Related Articles

How to Setup Google Ads Conversion Tracking in BigCommerce (With Order Amount & Order ID)

How to Setup Enhanced Ecommerce Tracking to WooCommerce

How to Setup Ninja Forms Event Tracking with Google Tag Manager

The Use of Artificial Intelligence (AI) in SEO – All You Need To Know

Best Website Traffic Monitoring Tools

How To Create Custom Reports In Google Analytics 4