Title: Disable submit button while loading Last modified: September 1, 2016 --- # Disable submit button while loading * Resolved [just_me000](https://wordpress.org/support/users/veerap000/) * (@veerap000) * [9 years, 12 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/) * Users can click the submit button while form is sending the message -> impatient users clicks the button multiple times -> the message is send multiple times - > multiple messages are messing up the analytics (Google goals, etc.). * Ready-to-use code for fixing can be found here: [https://wordpress.org/support/topic/disable-button-on-form-submit](https://wordpress.org/support/topic/disable-button-on-form-submit) * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/) Viewing 12 replies - 1 through 12 (of 12 total) * [arend](https://wordpress.org/support/users/arenddeboer/) * (@arenddeboer) * [9 years, 11 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-7470971) * We are experiencing the same issue, multiple form submissions from impatient users. It would be great if the proposed solution can be integrated. * [arend](https://wordpress.org/support/users/arenddeboer/) * (@arenddeboer) * [9 years, 11 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-7470972) * I have a temporary solution which does not require hacking the plugin files. Add this javascript to your page. If you don’t know how, use a plugin like “Simple Custom CSS and JS” and add as front-end javascript in footer. * ``` jQuery(document).ready(function () { (function() { var ev = new jQuery.Event('style'), orig = jQuery.fn.css; jQuery.fn.css = function() { jQuery(this).trigger(ev); return orig.apply(this, arguments); } })(); setTimeout(function () { jQuery('img.ajax-loader').bind('style', function (e) { var style = jQuery(this).attr('style'); //console.log("style: " + style); if(style) { if(style.indexOf("hidden") > 1) { // enable button //console.log("Disable button"); jQuery('input.wpcf7-submit').attr('disabled','disabled'); } else { //console.log("Enable button"); jQuery('input.wpcf7-submit').prop('disabled', false); } } }); }, 2000) }); ``` * Thread Starter [just_me000](https://wordpress.org/support/users/veerap000/) * (@veerap000) * [9 years, 10 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-7470977) * Works like a charm, thanks! * [Epsiloncool](https://wordpress.org/support/users/epsiloncool/) * (@epsiloncool) * [9 years, 8 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8266503) * I found simplier solutuon for this 🙂 Just 5 lines of code. * [http://epsiloncool.ru/programmirovanie/preventing-multiple-submits-in-contact-form-7](http://epsiloncool.ru/programmirovanie/preventing-multiple-submits-in-contact-form-7) * [jimbo-76](https://wordpress.org/support/users/jimbo-76/) * (@jimbo-76) * [9 years, 7 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8344781) * I would like to thank arenddeboer for his code and fix, I have been facing this issue for sometime now. * It works perfectly! users can not click again on the submit button at all! * I have read comments and disagree with the author of contact form 7 saying that the design of a website is to blame, not the case at all. * Even with the Ajax loading gif customers would repeatedly click on the submit button in an impatient manner, now with this code they can not… no bad customer experience by doing this. * I think the plugin author should implement this code and thank the poster for making the user experience even better, and also better for the site administrator not having to deal with duplicated emails which are annoying and frustrating. * I just added the code to my website main theme js file which had various JavaScript * Thanks again. * Thread Starter [just_me000](https://wordpress.org/support/users/veerap000/) * (@veerap000) * [9 years, 6 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8532837) * **Note:** After CF7 versio 4.6. update button disabling with arenddeboers solution doesn’t works but Epsiloncool script works with small mod: * ``` jQuery(document).on('click', '.wpcf7-submit', function(e){ if( jQuery('.ajax-loader').hasClass('is-active') ) { e.preventDefault(); return false; } }); ``` - This reply was modified 9 years, 6 months ago by [just_me000](https://wordpress.org/support/users/veerap000/). * [Epsiloncool](https://wordpress.org/support/users/epsiloncool/) * (@epsiloncool) * [9 years, 6 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8533401) * Thank you, veerap000 ! * [harding13](https://wordpress.org/support/users/harding13/) * (@harding13) * [9 years, 5 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8543125) * Hi, is it possible to use Epsiloncool script to disable permanently the submit button (not only when loading.gif is active)? * [harding13](https://wordpress.org/support/users/harding13/) * (@harding13) * [9 years, 5 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8543189) * ``` jQuery(document).on('click', '.wpcf7-submit', function(e){ if( jQuery('.ajax-loader').hasClass('is-active') ) { e.preventDefault(); return false; } jQuery('.wpcf7-submit').attr('disabled','disabled'); }); ``` * is this right? - This reply was modified 9 years, 5 months ago by [harding13](https://wordpress.org/support/users/harding13/). * [Epsiloncool](https://wordpress.org/support/users/epsiloncool/) * (@epsiloncool) * [9 years, 5 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8543260) * Hi harding13 * What is the event after which you need submit button to become disabled? * If you need submit to be disabled immediately after page load, you need to put something like this * ``` jQuery(document).ready(function(){ jQuery('.wpcf7-submit').attr('disabled','disabled'); }); ``` * However this code will disable ALL submit CF7 buttons at the page. Better if you assign some class to the button you need to disable and put this class near. wpcf7-submit so it will look like * `'.wpcf7-submit.myspecificsubmitbtn'` - This reply was modified 9 years, 5 months ago by [Epsiloncool](https://wordpress.org/support/users/epsiloncool/). * [harding13](https://wordpress.org/support/users/harding13/) * (@harding13) * [9 years, 5 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8543297) * I want to disable submit button after submit - This reply was modified 9 years, 5 months ago by [harding13](https://wordpress.org/support/users/harding13/). * [Epsiloncool](https://wordpress.org/support/users/epsiloncool/) * (@epsiloncool) * [9 years, 5 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8543486) * In this case your solution looks correct. Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘Disable submit button while loading’ is closed to new replies. * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255) * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq) * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/) * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/) * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/) ## Tags * [ajax](https://wordpress.org/support/topic-tag/ajax/) * [button](https://wordpress.org/support/topic-tag/button/) * [submit](https://wordpress.org/support/topic-tag/submit/) * 12 replies * 5 participants * Last reply from: [Epsiloncool](https://wordpress.org/support/users/epsiloncool/) * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/disable-submit-button-while-loading/#post-8543486) * Status: resolved