Summary:
Duplicate form submissions are a common issue in WordPress, especially when a user clicks the submit button multiple times. This guide explains how to enhance Contact Form 7 (CF7) to prevent multiple submissions by disabling the submit button after a successful form send using JavaScript and CF7’s built-in DOM events.
Issue background
Users reported duplicate entries being submitted via a form embedded in a modal or sidebar tab. This issue often occurs when the user clicks the submit button more than once—either due to a slow response or not realizing the form was already processing.
Preventing repeated clicks on the submit button is key to ensuring only a single submission is sent and processed.
Diagnosis
To isolate the problem:
- Confirm the form is built with Contact Form 7.
- Check if the form is embedded inside a container like a modal or a panel.
- Observe if clicking the button multiple times leads to repeated emails or database entries.
The issue usually stems from the absence of button disabling logic or lack of post-submit handling in JavaScript.
Resolution steps
1. Use CF7’s DOM events
Contact Form 7 fires custom JavaScript events during form lifecycle stages. For this task, use the wpcf7mailsent event, which only fires after a successful form submission.
2. Target the form safely
Instead of using a hardcoded form ID, identify the form using a wrapper element (e.g., a #cform container). This makes the script more flexible and less likely to break if form IDs change.
3. Add the following JavaScript
document.addEventListener('wpcf7mailsent', function (event) {
if (event.target.closest('#cform')) {
const submitButton = event.target.querySelector('input[type="submit"]');
if (submitButton) {
submitButton.disabled = true;
}
}
}, false);
This script:
- Listens for the
wpcf7mailsentevent. - Checks if the form is within the
#cformwrapper. - Disables the submit button once the form is successfully submitted.
4. Why not use wpcf7submit?
The wpcf7submit event fires before validation, meaning it may disable the button even if the submission fails due to validation errors. The wpcf7mailsent event ensures the button is only disabled after a successful send.
Final outcome
By using CF7’s JavaScript event hooks and conditionally disabling the submit button after success, the site now prevents users from sending multiple form entries. This approach improves user experience and avoids redundant processing on the backend.
Need help enhancing your forms or solving plugin-related issues? Contact Freshy — our team can help you implement clean, reliable form behaviors on any WordPress site.
