Disable “Submit” after click in Contact Form 7

Ok, I found the path that this script needs to go in. In the “Select plugin to edit:” drop down, select “Contact Form 7 Conditional Fields”. Then, from the Plugin list choose the “js” folder and then edit the “scripts.js” file there. Go to the very bottom and paste the code, save. Cheers to everyone for the solution to this issue!

Hi everyone,
I have the same issue. My form takes a while to submit (as the user needs to upload a document as well) and if they click multiple times I receive multiple submissions, which should not be the case.

I tried to paste the code that was kindly written here but with no luck. I am using CF7 with CF7 Conditional Fields and CFDB to save into the DB. I cannot see the “scripts” file for CF7, I can only find the one of CF7 Conditional Fields. Even posting the code there (either inside or outside the “jQuery” label) I can’t make it work.

Hope someone has more specific advice on how you made it, as this is driving me crazy!
Thanks!

Hi,
we have tried to use the solution (thanks to whyameye) adding it in one of the javascript in our theme, just with some little fixes.
It seems working fine also with more that one contact form in the same page.

The code we have used is the following:

/*===============================================*/
$(document).ready(function() {
/*..*/
fixCF7MultiSubmit();
}
function fixCF7MultiSubmit(){
jQuery(‘input.wpcf7-submit[type=”submit”]’).click(function() {
var disabled = jQuery(this).attr(‘data-disabled’);
if (disabled && disabled == “disabled”) {
return false;
}else{
jQuery(this).attr(‘data-disabled’,”disabled”);
return true;
}
});
jQuery(‘.wpcf7’).bind(“wpcf7submit”,function(){
jQuery(this).find(‘input.wpcf7-submit[type=”submit”]’).attr(‘data-disabled’,”enabled”);
});
}

Thanks Sandro for your answer. Unfortunately, I am not able to make it work.
I had to opt for a much more complex and not-bulletproof solution, which prevents double lines in the DB from being saved and double emails from being sent.
Hope the plugin author soon provides a way to disable the button on sent natively.

Worked like a champ… thank you sandro.tassa

@zanyojimbo check again there might be some console error. recheck the single quotes and double quotes after copying the above code.

I’ve made a minor modification to sandro’s solution so that it can be embedded as a javascript snippet (we use a visual composer thing at work). I tested it with the chrome console emulating a slow connection so I could observe the enabled/disabled change happen. Also, if you want to just drop this anywhere in a page (under the assumption that said page is already utilizing jQuery), you can simply Enclose it in a <script></script> tag pair.

It’s worth noting that copy/pasting plain text off of here does indeed cause some issues with single and double quotes. I don’t know if that applies to things enclosed in the code tags on here, but sandro’s solution does require some quote-checking.

(function($) {
	$(document).ready(function() {

		fixCF7MultiSubmit();

		function fixCF7MultiSubmit(){
				jQuery('input.wpcf7-submit[type="submit"]').click(function() {
					var disabled = jQuery(this).attr('data-disabled');
					if (disabled && disabled == "disabled") {
						return false;
					} else {
						jQuery(this).attr('data-disabled',"disabled");
						return true;
					}
				});
			jQuery('.wpcf7').bind("wpcf7submit",function(){
				jQuery(this).find('input.wpcf7-submit[type="submit"]').attr('data-disabled',"enabled");
			});
		}
	});
}(jQuery));

Same issue with duplicate form submissions. I even had a message appearing under the Send button which appeared after successful submission which said, “You’re form was submitted successfully. Check your email for confirmation.” But that didn’t help either!

So I’ve changed the text on the submit button from “Send” to “Send – just click once”

We’ll see if it works.