Contact Form 7 Event Handling

The Contact Form 7 plugin created and maintained by Takayuki Miyoshi is the de facto standard for form creation in WP. Yes there are Gravity Forms occasionally popping into view, but they are as common as hand written forms, which is to say - not that common.

CF7 gives you a simple interface, nonce checking, AJAX submission and emailing out of the box! It’s robust, extendable and comes with built-in integrations for CAPTCHAs, anti-spam, even filtering.

The trouble starts when it misbehaves, or when you need it to do one more thing on the page: redirect after sending, fire an analytics event, show your own error. That’s where its quirks bite. This post is my cheat sheet for those moments. Feel free to steal it.

Prerequisites: Getting CF7 to Work Properly

Before jumping into events, ensure your WordPress setup includes these critical functions in your theme:

wp_head();  // Place in header
wp_footer(); // Place in footer

These functions load CF7’s JavaScript properly – skipping them is a common pitfall, especially in custom themes.

Essential CF7 Events and When to Use Them

The four I actually reach for:

1. Form Validation (wpcf7invalid)

Fires after the server has processed the submission and said no. The response usually tells you exactly which field failed and why.

document.addEventListener('wpcf7invalid', function(event) {

  console.log('Form Invalid:', event.detail);

});

2. Spam Detection (wpcf7spam)

A special flavor of “invalid”: the server got the submission and decided it smells like spam. Same timing as wpcf7invalid.

document.addEventListener('wpcf7spam', function(event) {
    // Handle potential spam submissions
    console.log('Possible spam detected:', event.detail);
});

3. Success! (wpcf7mailsent)

The one everybody’s here for. The mail went out, so do your thing, like the classic thank-you redirect:

document.addEventListener('wpcf7mailsent', function(event) {
    // Redirect after successful submission
    window.location.href = '/thank-you-page';
});

4. Form Submission Complete (wpcf7submit)

The catch-all. Doesn’t care how it went.

document.addEventListener('wpcf7submit', function(event) {
    // Triggers regardless of outcome
    console.log('Form submitted:', event.detail);
});

CF7 is free. If it saves you time, consider contributing to the project or donating.

Tips

• These events work with jQuery too – just use $(document).on('wpcf7mailsent',...)
• Access form data via event.detail.inputs
• Test events using browser dev tools
• Mail sent but never arrived? That is usually SPF, DKIM and DMARC, not CF7. The SPF & DMARC builder tells you what your records actually say
• Events fire in order: validation → spam check → mail send, and wpcf7submit always fires last, whatever the outcome.

There’s no comment section here. If something above is wrong or you’re stuck, my email is on the contact page. Getting to it is a small puzzle of its own.