Change the default Gravity Forms AJAX spinner

By North Street, A Creative Studio

The default gravity form spinner is ugly. Use the following to change it to a new spinner:

/* */
add_filter( 'gform_ajax_spinner_url', 'ns_io_custom_gforms_spinner' );
 * Changes the default Gravity Forms AJAX spinner.
 * @since 1.0.0
 * @param string $src  The default spinner URL.
 * @return string $src The new spinner URL.
function ns_io_custom_gforms_spinner( $src ) {

    return get_stylesheet_directory_uri() . '/img/ajax-loader.gif';

You can grab a pretty spinner for your design, here:

It does need to be a gif file, as Gravity Forms by default, using an image. Sorry, no fancy all-css solutions.

Finally, you’ll need to adjust your CSS. The spinner usually ends up being next to the form button, which it’d be nicer to be on TOP of the form button.

You’ll need to adjust this SCSS, but this is more or less what you’ll want to do. (FYI, this solution is using bourbon a function to do the transform)

	.gform_footer {
		position: relative;

		.gform_ajax_spinner {
			position: absolute;
			top: 14px;
			left: 50%;
			@include transform(translateX(-50%));

		input.disabled {
			background-color: $gray-blue;



About north street

We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.

More Notes

A bowler hat with radio waves behind it

From Layoff to Leadership: Tom Conlon’s Journey to a Prosperous Business

Welcome to Your 2024 Branding Pep Talk

A bowler hat with radio waves behind it

CEO Tom Conlon talks shop on Podcast Marketing Secrets