How to Prevent Duplicate Form Submissions in Contact Form 7 Using JavaScript

The Problem: Why It Happens

If a user taps the submit button again before the first form finishes processing. You will likely end up with multiple submissions—cluttering inboxes, CRMs or databases. This usually happens when:

• Forms are inside modals or tabs.

• The response is slow or unclear.

• There’s no feedback that the form is processing.

Preventing extra clicks is the key to keeping your submissions clean.

How to Diagnose It

✅ Confirm your form is using Contact Form 7.
✅ Check if it’s embedded in modals, popups, or tabs.
✅ Test: Click multiple times. Do you receive multiple emails or database entries?

If yes—it’s time to fix it.

The Fix: One Line of Defense

1️⃣ Leverage CF7’s Built-In Events

‍
Contact Form 7 provides JavaScript events that trigger at specific points. We’ll use wpcf7mailsent because it only fires after a successful form submission.

2️⃣ Target the Form Intelligently

‍
Instead of relying on fixed IDs, use a wrapper like #cform so your code is flexible and won’t break when forms change.

3️⃣ The Script:

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

 if (event.target.closest('#cform')) {

   const submitButton = event.target.querySelector('input[type="submit"]');

   if (submitButton) {

     submitButton.disabled = true;

   }

 }

}, false);

4️⃣ Why This Method Works

‍
Using wpcf7mailsent ensures that the button only disables after a successful submission—not before validation, like the wpcf7submit event would. That way, you don’t accidentally block valid form attempts.

What You’ll Achieve

✅ Better UX for your visitors.
✅ Clean, single submissions in your inbox.
✅ No more spammy duplicates.

Need help improving your WordPress forms or custom workflows? We build

‍