1

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.

Gufran Hasan
  • 8,910
  • 7
  • 38
  • 51
Yogesh Saroya
  • 1,401
  • 5
  • 23
  • 52
  • Hi I'm not sure why you want to do this. But CF7 already has a loader built in when someone submits a form. also changing the text from submit to submitting would be pointless because unless your code is really bad or something is making your site really slow you would only have the submitting... text visible for maybe 2 second if you lucky. – 13garth Dec 13 '18 at 11:50
  • 2
    yes. it has loader,.. but its very old style. form submit takes some time and then it look like nothing happening that's why i want to change button text like .. Submitting.. or please wait... so user can feel like it working and also button disable so can not submit more then time. – Yogesh Saroya Dec 13 '18 at 12:09

3 Answers3

6

The above answers didn't work for me, could be a conflict with the latest version of CF7.

Anyway, I've updated the code above so that it works with the latest version.

I've also improved the code so that it works with any form on a website, regardless of what the submit button says.

It disables the submit button, changes the value to ask the user to be patient, then when the form is finished submitting, the original submit value is restored.

/**
 * Disable WPCF7 button while it's submitting
 * Stops duplicate enquiries coming through
 */
document.addEventListener( 'wpcf7submit', function( event ) {
    
    // find only disbaled submit buttons
    var button = $('.wpcf7-submit[disabled]');

    // grab the old value
    var old_value = button.attr('data-value');

    // enable the button
    button.prop('disabled', false);

    // put the old value back in
    button.val(old_value);

}, false );

$('form.wpcf7-form').on('submit',function() {

    var form = $(this);
    var button = form.find('input[type=submit]');
    var current_val = button.val();

    // store the current value so we can reset it later
    button.attr('data-value', current_val);

    // disable the button
    button.prop("disabled", true);

    // tell the user what's happening
    button.val("Sending, please wait...");

});
lukeseager
  • 2,365
  • 11
  • 37
  • 57
  • So far this is the answer which I am looking for, it is working fine as needed to disable the submit button while form is getting submitted and prevent the duplicate entries. Thanks! – Sachin More Feb 17 '21 at 06:21
5

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.

Gufran Hasan
  • 8,910
  • 7
  • 38
  • 51
  • Please visit this link https://contactform7.com/dom-events/ and https://stackoverflow.com/questions/27798264/contact-form-7-ajax-callback – Gufran Hasan Dec 13 '18 at 11:52
1

You can use this instead. This code will help you to disable submit button till sent the success email. You can stop multiple submit by this code.

// disable button after clicking on submit button
<?php add_action('wp_footer', 'mycustom_wp_footer');
function mycustom_wp_footer()
{
?>
    <script type="text/javascript">
        jQuery('.wpcf7-form').submit(function() {
            jQuery(this).find(':input[type=submit]').prop('disabled', true);
            var wpcf7Elm = document.querySelector('.wpcf7');
            wpcf7Elm.addEventListener('wpcf7submit', function(event) {
                jQuery('.wpcf7-submit').prop("disabled", false);
            }, false);
            wpcf7Elm.addEventListener('wpcf7invalid', function() {
                jQuery('.wpcf7-submit').prop("disabled", false);
            }, false);
        });
    </script>
<?php
}?>
Pooja Paghdar
  • 11
  • 2