Disable Contact Form 7 form submit

Question

I'm using a contact form for my WP website. I want to call some function before I submit the form.

I thought I could disable the submit form by using the following code:

let form = document.querySelector('form');
form.addEventListener('submit', function(ev){
    ev.preventDefault();
    //some more functions
});

For some reason this isn't working and CF7 is still submiting my form. Does someone know how to prevent the submit function.

I don't want to use the disabled function on the button cause this way the form loses it's orignal function.

Answer 1

I tried it on my page and had the same problem.

Try it with input[type=submit] instead of form .

let form = document.querySelector('input[type=submit]');
form.addEventListener('click', function(e) {
    e.preventDefault();
})

Edit:

This would work if you only use 1 form in your HTML:

window.addEventListener('submit', function(e) {         
    e.preventDefault();
}, true)

Answer 2

Option is to block 'clicking' on the submit input. So not 100% what you needed, but for me it does the job.

Not sure if that is not against your condition to avoid 'disabled function on the button' but for me the form keeps the original function, just depends on user decision.

 var submit = document.getElementsByClassName('wpcf7-submit')[0]; submit.addEventListener('click', function(e) { var confirmMessage = 'If you require a response, please make sure you have completed the 'Name' and 'Email' fields.'; if (!confirm(confirmMessage)) { e.preventDefault(); } });

 <form method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate"> <p><label> Name<br> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p> <p><label> Email address<br> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false"></span> </label></p> <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form>

Answer 3

Quickfix, should be refactored by extending this js. As UX i've added a GIF image instead of the button after first submit click.

For anyone who haven't found a solution in contact-form-7/includes/js/scripts.js search for line 499 now, probably changing meantime, you have wpcf7.clearResponse, inside in this function add :

var str = '<img src="path_of_file"/>';

$('.wpcf7-submit').replaceWith(str);

This will replace your button after click with the image with path path_of_file.