Add an Animated "Submitting" Icon to the Contact Module

This post may contain referral links which may earn a commission for this site

Add an Animated "Submitting" Icon to the Contact Module

When a user submits a message using the Divi 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 loader = et_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:

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

1 Comment

Submit a Comment

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

Hundreds of new features for Divi
in one easy-to-use plugin

1 Comment

Submit a Comment

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