Disable Button on Form Submit

Disabling submit buttons isn’t so easy, and can cause side effects. Usually these double-submit issues are very rare cases caused by confusing form design. I would suggest considering design improvement.

In what way would you say that form design is the issue? I don’t personally quite understand how that could be causing people to double-click the submit button.

Are there any other methods CF7 allows for that could cut back on the number of double submissions? An alert after clicking, or something limiting duplicate entries, something like that?

There is a simple way to disable the submit button while the form’s script processes the fields and submits it. You are utilizing 2 functions to trigger the spinning arrows while the ajax runs.

A line of code in each of these functions will disable the submit button when the spinner becomes visible and then enable it when the spinner/notifications are triggered.

I modified the file includes/js/scirpts.js on one of my installs and it performs wonderfully. Is there any reason why this couldn’t be added for us? I have included the 2 lines I added and the locations to where I added them.

Lines: 15 – 20
adding the following line directly before or after the line toggling the visibility of the .ajax-loader element

$form.find('input.wpcf7-submit').attr('disabled','disabled');

beforeSubmit: function(arr, $form, options) {				$form.wpcf7ClearResponseOutput();
$form.find('[aria-invalid]').attr('aria-invalid', 'false');
$form.find('img.ajax-loader').css({ visibility: 'visible' });
return true;
},

Lines: 363 – 369
adding the following line directly before or after the line toggling the visibility of the .ajax-loader element

$(this).find('input.wpcf7-submit').removeAttr('disabled');

$.fn.wpcf7ClearResponseOutput = function() {
return this.each(function() {
$(this).find('div.wpcf7-response-output').hide().empty().removeClass('wpcf7-mail-sent-ok wpcf7-mail-sent-ng wpcf7-validation-errors wpcf7-spam-blocked').removeAttr('role');
$(this).find('span.wpcf7-not-valid-tip').remove();
$(this).find('img.ajax-loader').css({ visibility: 'hidden' });
});
};

@aaron Cohrs,

thank you very much for this! I’ve been looking for a solution for quite some time! Works like a charm!

This should be included in the plugin, I think! My users may upload up to 10 images in a form and the uploading of these images causes long server responses. Often users click on submit again because they are not familiar with the spinning arrow (indicating them to wait).

Thanks again!

I appreciate the plugin and your input, Takayuki. I disagree with the idea that it’s simply poor design. I think users are confused pretty easily, to be honest, and we have this issue across sites. I think that adding a function that disables the button submit would simply improve your excellent plugin. I think it would be good to add it in some way, at least as an option.

Is there at least some way to create this functionality as an addon? I’m not familiar enough with these things to do it myself.