Disable “Submit” after click in Contact Form 7

This issue is caused because your contact form behaves in a confusing way. Why don’t you attempt to fix it? Don’t you think disabling Submit button might make the situation worse?

I was hoping that it would disable after the initial click, so only one application is received. I’d be happy to try to fix the contact form, but I wouldn’t know how given that deactivating my plugins is not an option.

Any solultions to this? The design of the form isnt the issue and will not improve it.The issues is in the couple of seconds that people have to wait for the form to submit, some users are pressing send again.

I would like to see an option that makes the “Submit” button inactive until all required fields are filled in and again after submitting.

that would be awesome.

We’re having the same problem. User clicks Submit, the button doesn’t deactivate after clicking so users keep on clicking. Basically, what Bjornen (above) suggested would be the perfect addition to this already awesome form.

Yes, I agree (obviously).
Let’s hope that the author of the plugin at least implements an option for this.

I am not asking for this to be the default behavior, but as an option for the [submit “Send”] tag would be nice. Example:

[submit “Send” disabled=”until_all_required”] and
[submit “Send” disabled=”until_all_required_and_after”]

Or something like that.

I’ve just moved to Contact Forms 7 from Ninja Forms, and have always known disabling the submit button onclick() to be best-practice. It’s clearly a bug that should be fixed, so it’s surprising the author’s response is to blame the form.

At any rate, I too would like to see the submit button inactivate on click.

My solution is below. It’s not the cleanest. I tried disabling the button through standard js but for some reason that broke the plugin, so I used a global variable instead:

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;
})

var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
    jQuery(':input[type="submit"]').attr('value',"send")
    disableSubmit = false;
}, false );

Thanks for finding a solution, whyameye. Can I ask which file (pathway) this code goes in and where would I place it in the code? Many thanks!

Thanks for working up a solution! However I’m quite clueless about this type of thing, so I’d also like to know where I should be placing this code.

I believe I figured out where to put it, through much trial and error. Here are the steps that walk through even how to get there:

1. Open Editor form Plugin menu
2. Choose Contact Form 7 in the ‘Select plugin to edit’ dropdown
3. Under the ‘Plugin Files’ use the ‘js’ dropdown
4. Select ‘scripts.js’ under that dropdown
5. Go to the bottom of the ‘Selected file content’ and paste in the following (thanks again whyameye!):

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;
})

var wpcf7Elm = document.querySelector( ‘.wpcf7’ );
wpcf7Elm.addEventListener( ‘wpcf7submit’, function( event ) {
jQuery(‘:input[type=”submit”]’).attr(‘value’,”send”)
disableSubmit = false;
}, false );

6. ‘Update File’ (Note: I had to select a checkbox saying something along the lines of ‘do you want to update even though it may break your box’ before the ‘Update File’ box became clickable.

Big thanks again to whyameye for writing this! By following the above steps, it seemed to have done the trick for my forms, as once they are clicked the button changes to say’sending’ and doesn’t allow it to be submitted again until after it has been sent.

ir2wausau, I applied your fix but it didnt change anything. I pasted your code at the very bottom of Contact Form 7/includes/js/scripts.js. Should this be applied in a different js folder, like under admin/js?

The one you did is what worked for me. I ended up there through trial and error since I don’t understand this stuff very well, so I unfortunately won’t be any help if that doesn’t work.

Sorry about that! I guess I just figured that if it worked for me it would work universally…

There are 2 scripts.js files in the Contact Form 7 section. I was mostly wondering which pathway you used. The /includes or /admin?

I used the /includes one that it looks like you did as well