I have a WordPress site and there is Contact form 7 plugin and I want to add attr to submit button to disable double submission. Now I have this code to prevent double submission

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

but I want to add attr disabled while form sending or getting error response for better user experience

I have a WordPress site and there is Contact form 7 plugin and I want to add attr to submit button to disable double submission. Now I have this code to prevent double submission

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

but I want to add attr disabled while form sending or getting error response for better user experience

• javascript
• jquery
• wordpress
• contact-form-7

• Is submission done without any JS or there's some explicit ajax handler? In the second case, please share that as well. Also, please add html of your submit button to your question. Best regards – YakovL Commented Mar 22, 2018 at 17:12
• It is a plugin, so there are lots of html that plugin ganerates and I can see this html only in developer tools in browser. And yes, there is ajax preloader. It is a plugin and this ajax handler is hidden by default and without class 'is-active', but if form submitting this .ajax-loader bees visible and has class '.is-active'. After form submitted or get an error '.ajax-loader' bees hidden and hasn't class '.is-active'. So this handler in script I showed in question is only to catch time while form in process of submitting – Yaroslav Saenko Commented Mar 22, 2018 at 18:35
• .ajax-loader is just a class of an element, I'm talking about JS bit that creates ajax http-request. Usually they have callbacks which are used once browser gets response. My point is, you could disable everything on click and remove disabled state on response which requires to modify the callback. But without more code shown, I can't help in any more specific way – YakovL Commented Mar 22, 2018 at 21:56

6 Answers 6

Improving on Matt's answer -

$('.wpcf7-form').on('submit', function() {
   $(this).find('.wpcf7-submit').attr('disabled', true);
});

This would disable the submit button when clicked on it. Now to get that activated again after success or failure you would need to remove the attribute after the submission is plete(whether success or failure). Since the plugin developer is a bit whimsical about how the events work, I am writing this solution for first quarter of 2019 -

$('.wpcf7').on('wpcf7submit', function (e) {
   $(this).find('.wpcf7-submit').removeAttr('disabled');
});

where '.wpcf7' is the parent container of the form, '.wpcf7-form' is the form itself. The 'wpcf7submit' is event listener that the DOM listens to, after the form gets submitted(irrespective of the fact that is valid or invalid).

This will disable the button and submit the form. You need to re-call submit after disabling the button.

jQuery( '.wpcf7-submit' ).click(function() {
    jQuery( this ).attr( 'disabled', true );
    jQuery( this ).submit();
});

This will re-enable the button if there's an error with the submission.

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

$(document).on('click', '.wpcf7-submit', function(e){
    $(this).prop('disabled',true);
});

I implemented this script to help prevent multiple submissions. The biggest difference from the others is that it works with multiple CF7 forms on each page. Basically, it disables the form and the submit button on submit (since a form can also be submitted with an Enter-press), adds a new label "Please Wait.." to the submit button, and re-enables them if there are input errors. Also, not dependent on jQuery (Vanilla JS).

(function () {
  var elems = document.querySelectorAll('.wpcf7');
  if (!elems.length) {
    return false;
  }
  var forms = document.querySelectorAll('.wpcf7-form');
  if (!forms.length) {
    return false;
  }

  function _evtFormSubmit() {
    this.disabled = true;
    var submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.setAttribute('data-default-text', submitBtn.innerText);
    submitBtn.innerHTML = '<span>Please wait...</span>';
  }

  function _evtInvalid(e) {
    var thisForm = document.querySelector('#' + e.detail.id + ' form');
    thisForm.disabled = false;
    var submitBtn = thisForm.querySelector('button[type="submit"]');
    setTimeout(function() {
      submitBtn.disabled = false;
    submitBtn.innerHTML = '<span>' + submitBtn.getAttribute('data-default-text') + '</span>';
    }, 600); // give it a bit of time in case it is a fast submit
  }

  for(var i = forms.length-1; i >= 0; i--) {
    forms[i].addEventListener('submit', _evtFormSubmit, false);
  }
  for(i = elems.length-1; i >= 0; i--) {
    elems[i].addEventListener('wpcf7invalid', _evtInvalid, false);
  }

})();

Note: if you have more than one submit button (why?), this only affects the first button in the form.

For future people who are looking for a solution here. Simple SCSS/CSS option without Javascript need. For me is work pefect. It always works reliably for me. (2022)

.wpcf7-form {
    &.submitting {
        .wpcf7-submit {
            pointer-events: none;
        }
    }
}

This style is perfect work for me.

form.submitting .wpcf7-submit {pointer-events: none;}