dreamholders

Yeah! 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 or after the validation of inputs


Here is the sample code with init action hook

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	
}