How to Track WordPress Contact Form 7 In Google Analytics 4: 2023 Edition

Out of the total websites in the world, more than 40% are built using WordPress. That’s a huge number for any CMS platform and hence, there is a great chance that your website is built using WordPress. Also, you probably use the WordPress Contact Form 7 plugin for your website's contact us form.

So tracking of WordPress contact form 7 is extremely important.

We will show two ways to track WordPress contact form 7

• Traditional Google tag manager way that would take a lot of time.
• and Tagmate way! ( No Code set up and fast way) 😲

‍

‍

What is WordPress contact form 7?

WordPress Contact form 7 is a free and very much popular plugin that allows you to build and put a simple contact form on your website without any coding experience.

It has 5+ million downloads and is available at -  Contact Form 7  for free.

‍

How to identify that my website has WordPress Contact form 7 form?

‍

Step 1: Open your WordPress website

Let's say I opened our Tagmate demo site here

‍

Step 2: Go to the form on the website

And, opened the contact us form

‍

Step 3: Inspect Element

Right-click on the mouse and click on ‘Inspect element’

‍

Step 4: Check for ‘Form element’ on the form

• Go to the Form element “<form>” in the HTML code.
• Check Class - it has something written with wpcf7

Track WordPress Contact Form 7 using Google Tag Manager

Form Submission using Google Tag Manager | Track Form submission of WordPress contact form 7

‍

Part 1: Create Container and set workspace in GTM

‍

Step 1: Sign in to your Google Tag Manager

If you do not have a Google tag manager account then you can sign up with a new account using this link - Google Tag manager account.

‍

Step 2: Create a container and select your workspace

If you do not know about workspace and container then please read more: Add a new container to an existing account.

‍

Pro TIP: Create a new container and user ‘Default Workspace’

‍

and if you have already having container and workspace then skip this step.

‍

Part 2: Create Event Listener

In order to track WordPress contact form 7, you have to create an event listener in your Google tag manager. Sounds technical right? Why don’t you go with the easy way is the Tagmate way 🙂

Ok, here we go:

‍

What is DOM Event?
DOM (Document Object Model) Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser. (Wikipedia)

Some of the standard DOM Events:

• Mouse events: mouseup, click, dblclick, mousedown, mousemove, mouseover, etc.
• Form events: focus, blur, change, submit.
• Keyboard events: keydown, keypress, keyup.
• Window events: scroll, resize, load, unload

DOM events for WordPress Contact Form 7 DOM events include as per the website:

• wpcf7submit: fires when form submission has been completed.
• wpcf7mailsent: fires when form submissions and also email has been successfully sent.
• wpcf7invalid: fires when the form has invalid inputs.
• wpcf7spam: fires when possible spam activity has been there.
• wpcf7mailfailed: fires when form submission has been completed successfully, but sending mail failed.

We will create an event listener that listens for the wpcf7mailsent DOM event.

‍

Step 1: Copy the JavaScript code

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

‍

Step 2: Go to Tags > Click on ‘New’

‍

Step 3: Select Custom HTML tag

Click on 'choose a tag type to begin setup > select 'Custom HTML'

y

Step 4: Paste the JavaScript

‍

Step 5: Select the trigger  

Select the ‘all pages’ trigger from the trigger type

‍

Step 6: Save the custom HTML tag with the trigger

‍

Part 3: Configure custom event Trigger and variable

‍

Step 1: Open your WordPress Admin and Take Form ID

Go to Contact form > Locate active form > Just Copy form Id

Step 2:  Create New Trigger

Open Google Tag Manager and workspace> Go to ‘Trigger’ > Click on ‘New’

‍

Step 3:  Choose ‘Custom event’ Trigger type

Click on ' Choose a trigger type to begin setup..' > Go to Other > Click on ' Custom Event'

Step 4:  Configure Custom event trigger

• Give the trigger a meaningful name
• Write ‘cf7submission’ in the event name
• Select the ‘All custom events’ radio button
• click on save.

Step 5:  Create  Variable

Go to workspace > Click on Variables > Go To user-defined variable > Click ‘New’

Step 6:  Chose Data layer variable type

Click on ‘Chose a variable type to begin setup…’ > Click on Data Layer Variable'

‍Step 7:  Configure Data Layer variable

• Give a meaningful name to variable
• Enter ‘formId’ in the data layer variable name
• Click on save

‍

Part 4: Create Tag

‍

Step 1: Go to “Tags”

Go to Tags from the left navigation > Click on “ New”

‍

Step 2: Create Configuration Tag

Give a name of tag > Choose Tag type > Select ‘Google Analytics: GA4 Configuration’ Tag

‍

Step 3: Enter Measurement ID

Enter Google Analytics 4 Measurement ID

Don’t know hot to get GA4 Measurement ID? Click HERE

‍

Step 4: Allocate Trigger to Tag

Click on ‘Choose a trigger to make this tag fire…’ and select ‘All Pages’ Trigger

‍

Step 5: Save the Tag

Click on the ‘save’ button

‍

Step 6: Go to “Tags”

Click on Tags > Click on “New”

‍

Step 6: Create GA4 Event Tag

Enter Tag name > Click on “Choose a tag type to begin setup…”> Click on “ Google Analytics: GA4 Event”

‍

Step 7: Configure the GA4 Event tag

‍

7.1 Select Configuration tag

‍

7.2 Enter the event name

You can enter any event name here of your choice but we suggest putting ‘form_submit’ or let's say form name like ‘contact_us_submit’

‍

7.3 Set event parameters

• Enter ‘from_id’ as the parameter name and set dynamic value form id ( created data layer variable)
• Enter pageURL as the parameter name and set value {{Page URL}}

‍

7.4 Select the trigger

Click on choose a trigger to make this tag fire

‍

7.4 Choose a Custom event tag

Click on the custom event tag which is created for WordPress contact form 7 (check earlier steps)

‍

7.5 Save the GA4 event tag

Part 5: Preview the container to check the tag

‍

Step 1: Go to the Tag dashboard and Click “Preview”

‍

Step 2: Enter your website and click on ‘connect’

Step 3: Submit the form on your website (tag assistant mode)

‍

Step 4: Check event listener is fired or not

‍

Step 5: Check the ‘cf7submission’ event and check whether tags fired or not

‍

Step 6: Open your Google Analytics account

• Go to admin
• Click on ‘Debug view’

Step 7: Check the event and other parameters (e.g. form Id)

Form Submission using Tagmate | Track Form submission of WordPress Contact form 7 using Tagmate in GA4

‍

What is Tagmate?

Tagmate is a web tagging software. Tagmate enables the user to save development time and improves first-party data quality by automating the setup of analytics and marketing tags.

Learn More: Visit the Website of Tagmate

‍

Why you should track your form submission using Tagmate?

• It is a No code/Low code tagging solution using Google Tag Manager.
• It has pre-built tag templates according to your industry.
• Data accuracy and reduced human efforts.
• No need to understand the expert level of google tag manager!
• DIY tool and very easy workflow.
• Increase productivity and save tons of time and cost.

Let’s see step-by-step form submissions tracking using Tagmate!

‍

Step 1: Sign in with Your account

Step 2: Chose Google Analytics 4 project

Choose 'Set up GA4 Events w/wo your developer

‍

Step 3: Select the GTM account OR Add new

Click on the “GTM Account” Option listed in the left navigation

‍

Select GTM Account OR you can Add a new by Click on “Add New”

‍

Step 4 : Start/Launch a project

Create Project

Dashboard> Click on 'Launch Project OR

Go to Project Option (left navigation) > Click the “Add new” button

‍

Step 5: Create a Project

Learn more: Create a GA4 Project in Tagmate

Provide project name > Select Platform > Set GTM workspace 4> Enter Measurement ID > Click

‍

Step 6: Open your Tagmate app

Select the project > click “ Select”

‍

Step 7: Click on “add new” on the dashboard

‍

Step 8: Go to “Form Submission” > Click “Push to GTM”

‍

Step 9: Select “WordPress contact form 7 ” > Click on “select ” Or “Push”

Step 10: Click on ' Push Custom HTML to GTM' and then click on Next

‍

Step 11: Provide form details and click next

• Enter the form name (title of the form on your website)
• In the trigger condition, select the condition as ‘Equals' and set the value of form Id in the ‘value’ text field

‍

Step 12:  Provide Trigger conditions

• Set ‘Page URL’ as a variable from the drop-down
• Set the condition as ‘contains’ from the drop-down
• Enter the website URL on which the form needs to be tracked.

‍

Step 13: Click on ‘Push to GTM’

‍

Step 14: Check the tag in your GTM

Step 15: Start Preview mode

Before starting preview mode, makes sure that the GTM container code must be inserted in your website’s HTML file after <Head> element. Don’t know how to do this? Click here to learn it

‍

Step 16: Enter your website and click on ‘connect’

‍

Step 17: Submit the form on your website (tag assistant mode)

‍

Step 18: Check whether the event listener is fired or not

‍

Step 19: Check the ‘cf7sumbission’ event and tag is fired or not

‍

Step 20: Open your Google Analytics account

• Go to admin
• Click on ‘Debug view’

Step 21: Check the event and other parameters (e.g. form Id)

Wrap Up

As you might have observed, the first method involving Google Tag Manager can be extremely tedious and in practice, you might need to devote up to two hours for implementation.

But with Tagmate, you can setup tracking for WordPress contact form 7 in just ten minutes!

Can’t believe? Try Tagmate.

‍