TutorialChange AJAX Spinner in Gravity Forms

Do you want to replace the default AJAX loading spinner in Gravity Forms?

A custom spinner can make your form feel more polished and match your website’s branding. It also gives users a clearer visual cue that the form is still submitting, especially when AJAX is enabled and the page does not reload.

Prerequisites

Before you start, make sure you have:

1. Gravity Forms installed and active.
2. A form with AJAX enabled.
3. Access to your child theme’s functions.php file, a site-specific plugin, or a code snippets plugin.
4. A custom spinner image uploaded to your website or WordPress Media Library.

We recommend using a child theme or a code snippets plugin instead of editing a parent theme directly. This helps prevent your changes from being overwritten during theme updates.

Step 1: Create or Upload Your Custom Spinner

First, create or choose the spinner image you want to use. You can use a .gif, .png, or another image format that works well as a loading indicator.

You can create a spinner using a tool like loading.io, or you can upload your own branded loading icon to the WordPress Media Library.

After uploading the spinner, copy the full image URL. You will need this URL in the code snippet below.

Step 2: Add the Spinner Code

Add this code to your child theme’s functions.php file, a site-specific plugin, or a code snippets plugin:

add_filter( 'gform_ajax_spinner_url', 'gravitywp_custom_ajax_spinner_url', 10, 2 );
function gravitywp_custom_ajax_spinner_url( $image_src, $form ) {
    return 'https://example.com/wp-content/uploads/custom-spinner.gif';
}

Replace this example URL:

https://example.com/wp-content/uploads/custom-spinner.gif

with the full URL of your own spinner image.

The gform_ajax_spinner_url filter changes the default AJAX spinner image used by Gravity Forms. You can also review the official Gravity Forms documentation for the gform_ajax_spinner_url filter to see the hook parameters and form-specific usage.

Optional: Change the Spinner for One Form Only

If you only want to change the spinner for one Gravity Form, add the form ID to the hook name.

Use this version instead of the general snippet above, not in addition to it.

For example, this code applies only to form ID 6:

add_filter( 'gform_ajax_spinner_url_6', 'gravitywp_custom_ajax_spinner_url', 10, 2 );
function gravitywp_custom_ajax_spinner_url( $image_src, $form ) {
    return 'https://example.com/wp-content/uploads/custom-spinner.gif';
}

This is useful when you want one form to use a custom branded spinner while keeping the default spinner on your other forms.

Step 3: Test the Custom AJAX Spinner

Open the page where your Gravity Form is embedded and submit a test entry. If AJAX is enabled, your custom spinner should appear while the form is submitting.

If you do not see the spinner, check these points:

1. Make sure AJAX is enabled for the form.
2. Make sure the spinner image URL is correct.
3. Clear your website cache and browser cache.
4. Confirm that the code was added to the correct place.
5. Check that the form ID is correct if you used the form-specific version.

Related Gravity Forms Tutorial

If you are embedding your form with a shortcode, you can also enable AJAX using the `ajax=”true”` shortcode parameter. Learn more in our guide on Gravity Forms shortcode.

Final Thoughts

Changing the AJAX spinner in Gravity Forms is a small update, but it can make your form feel more polished. Once you upload your custom spinner and add the filter, users will see your own loading image while the form is being submitted.

Our Premium add-ons for Gravity Forms

Advanced Merge Tags

This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.

n8n Connector

Connect Gravity Forms to n8n and automate your workflows with secure, flexible, and powerful webhooks. Go beyond simple notifications and build advanced, two-way automations.

Entry to Database

Integrates Gravity Forms with internal or external databases, offering flexible mapping of form fields to database columns and real-time synchronization between entries and database rows.

All Entries

All your new Gravity Forms entries in one central place. Stop navigating between multiple forms to find new entries. Get immediate oversight and full control with a powerful, unified dashboard.

See all add-ons

Read tutorials about

Gravity Forms Zoho CRM Integration: How to Auto-Populate Form Fields by Email

Learn how to auto-populate Gravity Forms from Zoho CRM using GravityWP API Connector. This tutorial shows how to search Zoho Contacts by email and fill form fields with the returned data.

How to Create a Public Submission Business Directory in WordPress (Gravity Forms + GravityView)

Build a moderated business directory where users submit listings through a form, admins approve entries, and approved businesses appear in a searchable GravityView directory.

How to Create an Event Workshop Registration + Waitlist System in WordPress

This guide shows how to set up a workshop registration + waitlist system in WordPress: register attendees until capacity is reached, waitlist the rest, approve entries, and auto-promote people when a seat opens using Gravity Forms, Gravity Flow, and GravityView.

Gravity Flow Form Submission Step Tutorial

The Gravity Flow Form Submission step pauses a workflow until another form is submitted, then continues once the handoff is complete. This guide shows how to connect two forms, prefill fields with mapping, send the correct secure link, and troubleshoot the most common “workflow didn’t move” issues.

See all tutorials