How to disable submit button and change text on form submit at Wordpress "contact form 7"

Question

I am using "contact form 7" WordPress plugin.

I want to disable submit button on form submit and change text like

"Submitting...." and enable on success or on error so the user can click again.

Answer 1

Please use this code to disable the submit button.

jQuery('.wpcf7-submit').on('click',function(){
    jQuery(this).prop("disabled",true); // disable button after clicking on button
});

As we know that the contact form 7 plugin returns various responses after submitting.

This is for mail sent event:

 document.addEventListener( 'wpcf7mailsent', function( event ) {
      jQuery(this).prop("disabled",false);// enable button after getting respone
    }, false );

see all events of contact form 7

Updated:

document.addEventListener( 'wpcf7submit', function( event ) {
    var status = event.detail.status;  
    console.log(status);  
    //if( status === 'validation_failed'){
        jQuery('.wpcf7-submit').val("Send");
    //}    
}, false );

jQuery('.wpcf7-submit').on('click',function(){
    jQuery(this).val("Submitting....");
});

Note: status returns the responses like validation_failed, mail_sent, etc after form submitted.