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:
Free WordPress 2 Columns Kubrick Plain Theme - Red
How to add user custom field in My Account page in Woocommerce?
Woocommerce show product RSS feed by category and tags
WordPress: How to remove meta generator tag?
Woocommerce: How to bcc all order email to multiple recipients according to status
Woocommerce: Behaviour of each payment method during checkout
How to add native menu support in your WordPress theme?
How to block customer from accessing WP Admin in WordPress
Share this with your friends:-