I often use a great plugin Contact Form 7 in my work. Initially, this plugin was designed to create contact forms, but after some fiddling with hooks («actions» in WordPress) it turns into a flexible tool for the development of forms for any purpose. Today we will speak about the simple solution of a plug-in problem — ability of re-submition the form.
If your site is not a super-fast, and if, in addition, the user is impatient, he is inclined to press the «Submit» button several times, despite the fact that next to the button shown «busy» icon. As a result, we get multiple requests to the same data and must to catch this situation somehow.
This subject has lot of information at the web, there are even numerous requests to the author of the plugin to add a functionality of preventing re-submittion, but so far nothing has changed. Indeed, to deny repeated requests from the same data, you need to remember the result of the previous query to find out — what fields must be unique, and so on. So this issue can’t be solved simple at the plugin level.
I propose a simple and effective solution that solves the problem by 98%, and perhaps by 100%.
The essence of the following — it is necessary to intercept pressing «Submit» via Javascript, then to analyze the existence of «busy» icon. And, in case icon is displayed, cancel the event to prevent recursive requests.
Below is a ready code, so you can insert in your javascript right now. I propose header.php or your script.js (which loaded in each page) as the best place for it.
jQuery(document).on('click', '.wpcf7-submit', function(e){
if (jQuery('img', jQuery(this).closest('div')).css('visibility') === 'visible') {
e.preventDefault();
return false;
}
});
This code looks a bit different for Contact Form 7 version 4.6 and above:
jQuery(document).on('click', '.wpcf7-submit', function(e){
if( jQuery('.ajax-loader').hasClass('is-active') ) {
e.preventDefault();
return false;
}
});
Subscribe to my news, there will be lots of interesting things further!