Techie Corner

If you are using ContactForm7 for your wordpress website, you might encounter a problem where user like to double click on the “Submit” button whenever they try to submit a form. If you are using the form to run a registration campaign, then this probably end up with many duplicate emails in your inbox. Fortunately, ContactForm7 did provide some programming hook for us to extends it’s capabilities.

ContactForm7 – Follow the steps below to prevent user from double click on “Submit” button:-

• go to Appearance -> Theme Editor  -> click on functions.php
• scroll down to the end of the page and add these line (before the ?> tag) and click on “Update File” button.

  add_action( 'wp_footer', 'techiecorner_cf7_prevent_double_click' );
  
  function techiecorner_cf7_prevent_double_click() {
  ?>
      <script>
  
  	// START -- contactform7 prevent double submit //
  	jQuery( '.wpcf7-submit' ).click(function() {
  		jQuery( this ).css( 'display', 'none' );
  		jQuery('.loading-text').text('Processing...');
  	});
  
  	document.addEventListener( 'wpcf7submit', function() {
  	    jQuery( '.wpcf7-submit' ).css( 'display', 'block' );
  		jQuery('.loading-text').text('');
  	}, false );
  
  	document.addEventListener( 'wpcf7invalid', function() {
  		jQuery( '.wpcf7-submit' ).css( 'display', 'block' );
  		jQuery('.loading-text').text('');
  	}, false );
  
  	document.addEventListener( 'wpcf7mailsent', function() {
  		alert('Thank you for your submission');
  	}, false );
  	// END -- contactform7 prevent double submit //
  
      </script>
  
  <?php
  } // end func

• Now go to ContactForm7 module – click on left navigation ‘Contact’.
• Click on your form to edit. Now add this line after your [submit] button and “Save” the form

              <div class="loading-text"></div>

• You may now try to submit your form at the front end. When the form is successfully submitted it will show an alert “Thank you for your submission”

---