How to Track Contact Form 7 Submissions via Google Tag Manager

Setting Up Data Layer Event For Contact Form 7 Submissions

First, we will set up an event listener for contact form 7 successful submissions. This uses the existing event for contact form 7 submissions. You can find Contact Form ‘s DOM events here.

We use the event listener and fire the data layer events with a custom HTML tag that fires on all pages (where the contact form exists).

Code:

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

Tag type: Custom HTML

Trigger: All pages (that the contact form exists on)

Explanation:

This tag fires a data layer event named “cf7submission” which can then be used as a trigger for other tags to use as a successful form submission.

Additionally, it passes 2 variable ids, “formId” and “response”.

The formId is a unique ID for the contact form. This can be useful if you have multiple contact forms and want to be able to track which form has been submitted or only track specific forms by filtering it on a trigger.

The response tracks the details of the inputted form fields. Please view the structure of the JSON for this in the data layer and select specific fields that you need to pass. Please be careful when using this that you comply with platforms terms and conditions and don’t pass PII (personally identifiable information) into platforms that don’t allow it e.g. Google Analytics.

Creating Data Layer Variables for Contact Form 7 Events

We can then create a data layer variable to access the form ID in Tag Manager.

Variable type: data layer variable

Data layer variable name: formId (exactly matching the ID in the custom HTML tag).

Using data layer version 2.

Tracking Contact Form 7 Events and Data to a Third Party (e.g. Google Analytics 4)

Using the data layer event and data layer variable created to create a trigger and pass dynamic information in a tag to a third party. We will go through an example of this using Google Analytcs 4.

Firstly, we can create a trigger to fire on the new data layer event

Trigger Configuration

Trigger type: custom event

Event name: cf7submission (exactly matching the event name in the custom HTML tag code)

Trigger fires on: all custom events

Next, we can put this all together with a Google Analytics 4 Event Tag.

This assumes you already have the Google Analytics 4 configuration tag set up.

GA4 Tag Configuration

Tag name: GA4 – Event – CF7 Submission

Tag type: Google Analytics: GA4 Event

Event name: form_submission

Event parameters:

form_id = {{DLV – Form ID}} – This distinguishes events received from different Contact Form 7 forms.

form_type = cf7 – This can be included if you use different form providers on your website to help categorise them in Google Analytics.

Trigger: CF7 – Contact Form Submitted (custom event)

As always, the event parameter names and values can be customised to your liking to fit in best with your Google Analytics set up.

Conclusion

After setting up your tags, variables and triggers, it’s always best to preview changes and test it is working as expected prior to publishing to the live website.

The data layer events, variables and triggers can also be used from here to build further tags to send information to other third parties.

Let me know if you have any questions in the comments or any other topics you would like covered next!