When a user submits a message using the Divi Theme's contact form module, the contact form is faded out while the message is being submitted. However, this doesn't provide much feedback to the user that anything is actually happening. We can improve feedback to the user by adding a spinning "loading" icon overlaying the faded out contact form to indicate to the user that something is actually happening. Here's how…
Add an Icon to the Contact Form using jQuery / CSS
You can add a spinning icon using the following jQuery / CSS code. Simply paste the code below into the "Divi > Theme Options > Integration > Add code to the head of your blog" box:
<script>
jQuery(function($) {
// Add the (initially hidden) loader gif to the contact form(s)
var site_url = (typeof et_site_url !== 'undefined')?et_site_url:'';
site_url = (typeof et_pb_custom !== 'undefined' && 'images_uri' in et_pb_custom)?et_pb_custom.images_uri+'/../../../..':site_url;
var loader = site_url + '/wp-content/themes/Divi/core/admin/images/ajax-loader.gif';
$('.et_pb_contact_form_container').after($('<img class="et_pb_contact_form_loader" />').attr('src', loader).hide());
// Extend jQuery's fadeTo function to capture the start and end of the module fade out
$.fn.fadeToOrig = $.fn.fadeTo;
$.fn.fadeTo = function() {
// If a contact form is being fade in / out, show / hide the spinner
if ($(this).hasClass('et_pb_contact_form_container')) {
var opacity = arguments[1];
var submitting = (opacity < 1);
$(this).next('.et_pb_contact_form_loader').toggle(submitting);
}
// Apply the default fade function behavior
return $.fn.fadeToOrig.apply( this, arguments );
};
});
</script>
<style>
.et_pb_contact_form_loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>Now when you submit the contact form you should see an overlaid loading icon, as shown in this screenshot:
you are the best