How to Track WordPress Contact Form 7 In Google Analytics 4: 2023 Edition
%20How%20to%20track%20%20WordPress%20Contact%20Form%207%20in%20Google%20Analytics%204.png)
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
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.