Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!

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);
        }
    });
   
});