Add Loading Icon to Divi Contact Module

|

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:

1 Comment

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.