Multiple Validation Error Message & Multiple Email

2 Min Read Add Comment

Problems:

When the user tries to press submit button multiple times then it shows a contact form 7 validation error message multiple times.

Solutions:

We should disable the submit button and change its attribute to sending after submitting the form using the DOM event listener and enable it after the form submission.

To stop the Multiple Validation Error Message & Multiple Email for Contact Form 7, you can use the following code snippet. This code should be added to your theme’s functions.php file or in a custom plugin.

add_action( 'wp_footer', 'prevent_cf7_multiple_emails' );

function prevent_cf7_multiple_emails() {
?>
<script>
var disableSubmit = false;
jQuery('input.wpcf7-submit[type="submit"]').click(function() {
jQuery(':input[type="submit"]').attr('value',"Sending…");
if (disableSubmit == true) {
return false;
}
disableSubmit = true;
return true;
})

jQuery('button.wpcf7-submit').click(function() {
jQuery('button.wpcf7-submit').innerHTML("Sending…");
if (disableSubmit == true) {
return false;
}
disableSubmit = true;
return true;
})

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7_before_send_mail', function( event ) {
jQuery('button.wpcf7-submit').innerHTML("Sent");
disableSubmit = false;
}, false );

wpcf7Elm.addEventListener( 'wpcf7_before_send_mail', function( event ) {
jQuery('.wpcf7 :input[type="submit"]').attr('value',"Sent");
disableSubmit = false;
}, false );

wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
jQuery('button.wpcf7-submit').innerHTML("Submit");
disableSubmit = false;
}, false );

wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
jQuery('.wpcf7 :input[type="submit"]').attr('value',"Submit");
disableSubmit = false;
}, false );
		
		</script>
<?php	
}

Output: