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:-
Advertisements
- 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”
Related posts:
How to block customer from accessing WP Admin in WordPress
WordPress: How to create left sidebar template in TwentyEleven theme?
WordPress: How to remove meta generator tag?
How to change 'Out of Stock' text in Woocommerce
WordPress visual editor not showing
WordPress: add javascript event after widget save
WordPress Plugin Dev: How to send email using SMTP?
WordPress: How to open rss links in new window?
Share this with your friends:-