First - I love the plugin. Thank you!
One of my forms uses quite a few "acceptance" checkbox fields which disables the SUBMIT button until they are all checked. My client wanted an alert sent out if the button was clicked before all the acceptance fields have been checked (they thought the form was "broken" when they clicked the SUBMIT button and nothing happened.) So... I had to do the unthinkable and make some changes to the plugin's javascript. I'm posting my code changes here in the hopes that it might be something you can put in a future release.
(1) This method works as long as you surround your submit button with a <label> tag
(2) I added the following to the end of $.fn.wpcf7AjaxLoader (if the submit button is disabled, it adds an overlay on top of the submit button with a "click" function to send the alert)
if ($(this).attr("disabled") == "disabled") {
var parent = $(this).closest("label");
var overlay = $('<div id="disable-button-overlay" />').css({'position':'absolute','top':parent.position().top,'left': parent.position().left,'width': parent.outerWidth(),'height': parent.outerHeight(),'zIndex': 10000,'backgroundColor': '#fff','opacity': 0}).click(function () {return alert('Please check off the required fields above.');});
$(this).after(overlay);
}(2) In $.fn.wpcf7ToggleSubmit I added one line below the line if (! acceptances.length) return;
The added line is
form.find('div#disable-button-overlay').css({display:'none'});
(3) Also in $.fn.wpcf7ToggleSubmit I added one line in acceptances.each function.
The added line is : form.find('div#disable-button-overlay').css({display:'block'});
and the function now looks like this :
acceptances.each(function(i, n) {
n = $(n);
if (n.hasClass('wpcf7-invert') && n.is(':checked')
|| ! n.hasClass('wpcf7-invert') && ! n.is(':checked')) {
submit.attr('disabled', 'disabled');
form.find('div#disable-button-overlay').css({display:'block'});
}
});
