Disable submit button while loading

We are experiencing the same issue, multiple form submissions from impatient users. It would be great if the proposed solution can be integrated.

I have a temporary solution which does not require hacking the plugin files. Add this javascript to your page. If you don’t know how, use a plugin like “Simple Custom CSS and JS” and add as front-end javascript in footer.

jQuery(document).ready(function () {

    (function() {
        var ev = new jQuery.Event('style'),
            orig = jQuery.fn.css;
        jQuery.fn.css = function() {
            jQuery(this).trigger(ev);
            return orig.apply(this, arguments);
        }
    })();

    setTimeout(function () {
        jQuery('img.ajax-loader').bind('style', function (e) {

            var style = jQuery(this).attr('style');
            //console.log("style: " + style);
            if(style) {
                if(style.indexOf("hidden") > 1) {
                    // enable button
                    //console.log("Disable  button");
                    jQuery('input.wpcf7-submit').attr('disabled','disabled');
                } else {
                    //console.log("Enable  button");
                    jQuery('input.wpcf7-submit').prop('disabled', false);
                }
            }
        });
    }, 2000)
});

Works like a charm, thanks!

I found simplier solutuon for this ?? Just 5 lines of code.

https://epsiloncool.ru/programmirovanie/preventing-multiple-submits-in-contact-form-7

I would like to thank arenddeboer for his code and fix, I have been facing this issue for sometime now.

It works perfectly! users can not click again on the submit button at all!

I have read comments and disagree with the author of contact form 7 saying that the design of a website is to blame, not the case at all.

Even with the Ajax loading gif customers would repeatedly click on the submit button in an impatient manner, now with this code they can not… no bad customer experience by doing this.

I think the plugin author should implement this code and thank the poster for making the user experience even better, and also better for the site administrator not having to deal with duplicated emails which are annoying and frustrating.

I just added the code to my website main theme js file which had various JavaScript

Thanks again.

Note: After CF7 versio 4.6. update button disabling with arenddeboers solution doesn’t works but Epsiloncool script works with small mod:

jQuery(document).on('click', '.wpcf7-submit', function(e){
     if( jQuery('.ajax-loader').hasClass('is-active') ) {
          e.preventDefault();
          return false;
     }
});

• This reply was modified 7 years, 11 months ago by just_me000.

Thank you, veerap000 !

Hi, is it possible to use Epsiloncool script to disable permanently the submit button (not only when loading.gif is active)?

jQuery(document).on('click', '.wpcf7-submit', function(e){
			 if( jQuery('.ajax-loader').hasClass('is-active') ) {				 
				  e.preventDefault();
				  return false;
			 }
			 jQuery('.wpcf7-submit').attr('disabled','disabled');
		});

is this right?

• This reply was modified 7 years, 11 months ago by harding13.

Hi harding13

What is the event after which you need submit button to become disabled?

If you need submit to be disabled immediately after page load, you need to put something like this

    jQuery(document).ready(function(){
        jQuery('.wpcf7-submit').attr('disabled','disabled');
    });

However this code will disable ALL submit CF7 buttons at the page. Better if you assign some class to the button you need to disable and put this class near .wpcf7-submit so it will look like

'.wpcf7-submit.myspecificsubmitbtn'

• This reply was modified 7 years, 11 months ago by Epsiloncool.

I want to disable submit button after submit

• This reply was modified 7 years, 11 months ago by harding13.

In this case your solution looks correct.