What’s The Deal?
Have you ever had a customer complete a form and they SMASH the submit button, sending you multiples of the same email? Annoying, right?
The reason this happens is because while Contact Form 7 includes a teeny tiny loader image when the “submit” button is pressed, it doesn’t disable the button! So if a customer doesn’t see that minuscule loader, they assume the form didn’t send, so they – of course – hit the button again!
As you can see below from the before image, we were able to submit the same form nearly half a dozen times by mashing the submit button. Crazy!
If you’re like me, this is annoying from the side of the customer and the company. Why hasn’t Contact Form 7 implemented a fix? Who knows! But we have something you can use to put a stop to the madness.
With this simple piece of jQuery, you can disable the button when someone clicks it, and then set a timer on when it is enabled again (in milliseconds).
Requirements:
- jQuery
Before
After
The JQuery
You’ll need to have the ability to add your own script. We’ve added this code to our child theme’s custom.js file.
jQuery(document).ready(function($) {
// Temporarily disable CF7 Button on Submission
$(“.wpcf7”).on(‘submit.wpcf’, function(){
if ($(“.ajax-loader”).hasClass(“is-active”))
{
$(‘input[type=”submit”]’).attr(‘disabled’, ‘disabled’);
setTimeout(function() {
$(‘input[type=”submit”]’).removeAttr(‘disabled’);
},3000);
}
});
});
[/cc]