Is your Contact Form 7 not working as expected? Let’s dive into the essential DOM events that power CF7’s functionality and learn how to use them effectively.
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 footerThese functions load CF7’s JavaScript properly – skipping them is a common pitfall, especially in custom themes.
Essential CF7 Events and When to Use Them
Here’s your go-to reference for all CF7 events, with practical examples:
1. Form Validation (wpcf7invalid)
document.addEventListener('wpcf7invalid', function(event) { console.log('Form has invalid fields'); // Example: Show custom error message alert('Please check your inputs'); });2. Spam Detection (wpcf7spam)
document.addEventListener('wpcf7spam', function(event) { // Handle potential spam submissions console.log('Possible spam detected'); });3. Success! (wpcf7mailsent)
document.addEventListener('wpcf7mailsent', function(event) { // Redirect after successful submission window.location.href = '/thank-you-page'; });5. Form Submission Complete (wpcf7submit)
document.addEventListener('wpcf7submit', function(event) { // Triggers regardless of outcome console.log('Form submitted:', event.detail); });Pro 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
- console Events fire in order: submit → validation → spam check → mail send
Need help implementing these events? Drop a comment below!
Leave a Reply