=> Add below script in Wordpress Footer
<script type="text/javascript">
jQuery(document).ready(function (){
// Contact Form 7 Submit Button Overlay
var OriginalSubmitValue;
jQuery('.wpcf7-submit').on('click', function () {
OriginalSubmitValue = jQuery(this).val();
jQuery(this).val('Processing ...');
/*setTimeout(function(){jQuery('.wpcf7-submit').attr('disabled','disabled');},1000);*/
jQuery("body").after('<div id="quoteformloadingscreen" style="background: rgba(0, 0, 0, 0.4);position: fixed;top: 0;left: 0;z-index: 999999;width: 100%;height: 100%;overflow-y: hidden;overflow: hidden;"></div>');
});
// Hide new spinner on result
jQuery('div.wpcf7').on('wpcf7:invalid wpcf7:spam wpcf7:mailsent wpcf7:mailfailed', function () {
//jQuery('.ajax-loader-custom').css({ visibility: 'hidden' });
//jQuery('.wpcf7-submit').prop('disabled', false);
jQuery('.wpcf7-submit').val(OriginalSubmitValue);
jQuery("#quoteformloadingscreen").remove();
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function (){
// Contact Form 7 Submit Button Overlay
var OriginalSubmitValue;
jQuery('.wpcf7-submit').on('click', function () {
OriginalSubmitValue = jQuery(this).val();
jQuery(this).val('Processing ...');
/*setTimeout(function(){jQuery('.wpcf7-submit').attr('disabled','disabled');},1000);*/
jQuery("body").after('<div id="quoteformloadingscreen" style="background: rgba(0, 0, 0, 0.4);position: fixed;top: 0;left: 0;z-index: 999999;width: 100%;height: 100%;overflow-y: hidden;overflow: hidden;"></div>');
});
// Hide new spinner on result
jQuery('div.wpcf7').on('wpcf7:invalid wpcf7:spam wpcf7:mailsent wpcf7:mailfailed', function () {
//jQuery('.ajax-loader-custom').css({ visibility: 'hidden' });
//jQuery('.wpcf7-submit').prop('disabled', false);
jQuery('.wpcf7-submit').val(OriginalSubmitValue);
jQuery("#quoteformloadingscreen").remove();
});
});
</script>
Worked but i would like to add a white background overlay on button so i can add loader on the buttom
ReplyDeleteGood click in here
ReplyDeleteContact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering, and so on.If you want to know that Contact Form 7 Not Sending Emails then click for more information:
ReplyDeleteCONTACT FORM 7 NOT SENDING EMAILS