Track Contact Form 7 in GA4 with Google Tag Manager

To track successful Contact Form 7 mail submissions in GA4, listen for the form’s success event, push a small event into Google Tag Manager’s data layer, and send that event to the correct GA4 property. Verify the full chain before treating it as a business conversion.

This guide measures the browser-observed mail-sent outcome. It does not prove inbox delivery or lead quality. It assumes Contact Form 7 uses its normal AJAX flow and that your site already has a working Google Tag Manager container, Google tag and consent configuration.

Choose the event you actually need

Contact Form 7 documents several DOM events. Use wpcf7mailsent for the successful mail-sending outcome in this example. Do not substitute wpcf7submit: that event also occurs when an AJAX submission ends with another result.

GA4 enhanced measurement can also collect form_start and form_submit. Those generic form interactions have a different definition. Inspect existing events first. Counting both a generic submission and your custom success event as the same lead can make one visitor action appear twice in your reporting.

Name the new event cf7_mail_sent and document it as a technical submission outcome. If your business later qualifies the inquiry in a CRM, keep that later milestone distinct.

Install one small listener

Add the following JavaScript once through your site’s maintained JavaScript setup, such as an approved child-theme asset. A developer can also package the listener in a GTM Custom HTML tag when that fits the site’s existing tag policy. The snippet shown here is JavaScript; an HTML container would require the appropriate script wrapper.

(function () {
  if (window.cf7AnalyticsBridgeInstalled) return;
  window.cf7AnalyticsBridgeInstalled = true;

  document.addEventListener('wpcf7mailsent', function (event) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'cf7_mail_sent',
      cf7_form_id: String(event.detail.contactFormId)
    });
  });
})();

The installation flag prevents this particular snippet from registering itself twice on the same page. It cannot prevent duplicate tracking from another plugin or an unrelated listener. Review those separately. Install early enough to hear a submission, and confirm optimization settings do not defer it until after the visitor has already finished.

Google’s data layer documentation explains why the existing array should be preserved. The event name and form identifier are pushed together so the tag can read the identifier when the event is processed. This code intentionally does not inspect or transmit the submitted field values.

Create the variable and trigger in GTM

1. Create a Data Layer Variable named, for example, DLV – CF7 Form ID. Its data layer variable name is cf7_form_id.
2. Create a Custom Event trigger that matches cf7_mail_sent exactly.
3. If only one form should count toward a particular goal, restrict the trigger using the form ID observed during preview.
4. Keep a clear naming convention so a colleague can identify the listener, trigger and GA4 event tag later.

The numeric Contact Form 7 identifier is not necessarily the same as the HTML form element’s id attribute. Avoid merging those values under one reporting definition. A short internal lookup sheet can associate each CF7 ID with a stable purpose such as sales inquiry or support request.

Send a GA4 event using your existing Google tag

Create a GA4 Event tag for the intended measurement ID and set its event name to cf7_mail_sent. Add an event parameter called cf7_form_id, using the Data Layer Variable you created. Attach the Custom Event trigger.

Check the property and stream carefully, especially when staging and production use different destinations. Avoid installing a second Google tag just to add this event. Preserve your consent settings and any applicable tag restrictions; an analytics implementation should not change whether visitors have granted permission.

For reporting by form, register the parameter as an event-scoped custom dimension where appropriate. Google’s event parameter guide distinguishes sending a parameter from making it available in reports. Use a controlled form identifier rather than personal or high-cardinality values such as email addresses or message text.

Test the complete chain before publishing

Start GTM Preview and open the form as a normal visitor. Submit one clearly labelled test using an inbox you control. In Tag Assistant, confirm a single cf7_mail_sent event, the expected form ID and one firing of the intended GA4 tag. Then confirm the event and parameter in GA4 DebugView.

Repeat with a missing required field. That attempt should not emit this success event. Test a second form if your site has several, and inspect the consent states your site supports. An event absent because analytics permission was withheld should not be “fixed” by bypassing the consent mechanism.

Publish a versioned GTM change only after preview passes. Record the container version, form IDs, event definition and test time so a future analytics change can be compared against this baseline.

Troubleshoot from the earliest missing checkpoint

• No CF7 success event: verify that the form actually reaches its mail-sent outcome and inspect JavaScript errors. CF7’s event troubleshooting guidance notes that these events depend on AJAX submission.
• Data layer event but no tag: inspect the trigger spelling, filters, consent state and selected container.
• Tag fires but GA4 is empty: confirm the destination stream and debug setup, then inspect blocking or network issues without weakening site protections.
• Two events for one action: look for duplicate containers, listeners or competing tracking plugins before changing the metric.

Use the wider form testing checklist to verify the mailbox and any lead destination as well. For choosing between site analytics and WordPress submission reporting, see our five-tool analytics comparison. Reliable reporting begins with an event definition that everyone understands.