listener/contact-form-7

Contact Form 7 Event Listener

Track every CF7 submission accurately in Google Tag Manager. Send robust data-layer events and boost your conversion tracking setup without writing custom JavaScript.

Get Started

Implementation Steps

  • Create Custom HTML Tag in GTM
  • Insert Listener Code
  • Set Trigger to Pageview
  • Create Custom Event Trigger [cf7submission]

The Listener Code

Copy and paste this lightweight JavaScript snippet into your website's header or tag manager to instantly track Contact Form 7 submissions.

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

Copy Code

Core Architecture

Built-in DataLayer Variables

Capture rich semantic state from your frontend seamlessly. These variables inject context directly into your analytics pipeline with zero custom code setup.

formId

Resolves the exact HTML ID attribute of the submitted form. Critical for tracking multiple lead-gen portals across complex multi-step funnels.

response

Stores JSON payload responses returned from asynchronous API operations. Ideal for validating success metrics and capturing granular error patterns.

event

The custom identifier sent to the container runtime. Signals Google Tag Manager or other analytics targets to execute precise triggers in real-time.

Ready to Track Conversions?

Get our comprehensive, step-by-step guide to mastering analytics setup, tag configurations, and bulletproof conversion tracking for your business.

Contact Us