Title: Disable Submit Button While Sending Form
Last modified: April 8, 2021

---

# Disable Submit Button While Sending Form

 *  Resolved [zdwebmaster](https://wordpress.org/support/users/zdwebmaster/)
 * (@zdwebmaster)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/)
 * Hi!
 * I have problem with submit button.
 * When I click Submit button, it’s working and I have green response.
 * But while sending (spinner is working) I can click submit button again!
 * So I had so many mail from CF7
 * How can I disable submit button while sending?

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/#post-14296113)
 * Have a read through this: [Preventing multiple submissions — why this is a terrible idea.](https://contactform7.com/2019/11/26/preventing-multiple-submissions/)
 *  Thread Starter [zdwebmaster](https://wordpress.org/support/users/zdwebmaster/)
 * (@zdwebmaster)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/#post-14296818)
 * Hi [@takayukister](https://wordpress.org/support/users/takayukister/)
 * You right but I need disable this button. Because I send random link to for one
   user. When users click submit button again, they can get many random links.
 * I want when submit is clicked and spinner is working, button must be disable.
   When progress is finish it will be enable again.
 * How I can do this with CF7?
 * Thank you.
 *  Thread Starter [zdwebmaster](https://wordpress.org/support/users/zdwebmaster/)
 * (@zdwebmaster)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/#post-14306371)
 * I found the solution
 * If someone need:
 * > <script type=”text/javascript”>
   >  $ (document). ready (function() { var myinter2
   > = setInterval(function(){ var el = $(document.getElementsByClassName(“fusion-
   > slider-loading”)); if ($(el).css(“display”) !== ‘none’) { $(“.wpcf7-submit”).
   > prop(“disabled”,true); } else{ $(“.wpcf7-submit”).prop(“disabled”,false); }
   > },100);
   >  }); </script>
 *  [bredaportoni](https://wordpress.org/support/users/bredaportoni/)
 * (@bredaportoni)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/#post-14316827)
 * Hi, where I have to put this code?
 *  Thread Starter [zdwebmaster](https://wordpress.org/support/users/zdwebmaster/)
 * (@zdwebmaster)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/#post-14316890)
 * Hi [@bredaportoni](https://wordpress.org/support/users/bredaportoni/)
 * You can add this code under the shortcode of CF7 on your webpage.
 * My theme is Avada so I use this code :
 * var el = $(document.getElementsByClassName(“fusion-slider-loading”));
 * but you can check your loader at console. It can be this too :
 * var el = $(document.getElementsByClassName(“ajax-loader”));
 * Good luck!
 *  [rian1995](https://wordpress.org/support/users/rian1995/)
 * (@rian1995)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/#post-14401164)
 * Hi there,
    Mine website using the “prop(“disabled”,false)” cause the form not
   able to be submit data, it just stop right there and do nothing. even if i add
   a setTimeOut to prevent this issue. And I solve this issue by add a fake button
   switch showing in between the real one. And I and my own control logic
 *     ```
       <script language="javascript">
       	var realBtn=document.getElementsByClassName('wpcf7-submit').item(0),
       		fT=0,
       		flagF=false,
       		fS="";
       document.getElementById('qt').style.display="";
       document.getElementById('fakeBtn').style.display="none";
       realBtn.setAttribute("onclick","subchecking();");
       function subchecking(){document.getElementById('qt').style.display="none";
       					   document.getElementById('fakeBtn').style.display="";
       					   if(fT<5 && !flagF){window.setTimeout(cS,500);}}
       function cS(){fS = document.getElementsByClassName('wpcf7-form').item(0).dataset.status;
       			  if(fS == 'sent' || fS == 'resetting'){
       				  document.getElementsByClassName('mainform').item(0).classList.add('hidden');
       document.getElementsByClassName('sentform').item(0).classList.remove('hidden');
       alert('Great success');
       				  flagF=true;
       			  }else if(fS == 'submitting'){
       				  window.setInterval(rcs,100);
       			  }else if( fS == 'invalid' || fS== 'init'){
       				  if(fS=='invalid'){
       					  fT++;
       					  document.getElementById('fakeBtn').style.display="none";
       					  document.getElementById('qt').style.display="";
       			  }else{
       				  document.getElementById('fakeBtn').style.display="none";
       				  document.getElementById('qt').style.display="";}
       			  }else{
       				  alert('Try later');
       				  document.getElementById('fakeBtn').getElementsByTagName('p').item(0).innerHTML="You sent too many times"}}
       function rcs(){
       	fS = document.getElementsByClassName('wpcf7-form').item(0).dataset.status;
       	if(fS==""){fS = document.getElementsByClassName('wpcf7-form').item(0).dataset.status
       			  }else if(fS=='submitting'){fS=""}else{clearInterval(rcs);cS();}}
       </script>
       ```
   
 * First step: Make your own fake button in first and give it id=”fakeBtn”.
    Second:
   check there only one submit button and only only one CF7 form. The javascript
   doing the reset: 1.Add the onclick property to the real submit button. 2.Set 
   fake Button disapear (you should do this in advance in case u forget) 3.If the
   user click the “real submit” trigger event=> hide real button and show the fake
   button =>wait 500ms and check the submit status is submittng? invalid data? or
   just sent success? if it is subbmiting or checking =>wait every 100ms to check
   again (I feel this speed is cool not overly wait or short)=> status changed stop“
   rechecking” if it is invalid give the real button to user and hide the other 
   one. if it is success alert “great success” (you can change it into active something
   else) if click the real button over 5 times (change at “if(fT<**5** && !flagF)”)
   Only show the fake button and change the fake button html text as”You sent too
   many times”
 * Plugin Author is right. Make sure your form is total correct in setting. Then
   think about hiding button things

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Disable Submit Button While Sending Form’ 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

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [submit button](https://wordpress.org/support/topic-tag/submit-button/)

 * 6 replies
 * 4 participants
 * Last reply from: [rian1995](https://wordpress.org/support/users/rian1995/)
 * Last activity: [5 years, 1 month ago](https://wordpress.org/support/topic/disable-submit-button-while-sending-form/#post-14401164)
 * Status: resolved