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.

List Number Format

With this Gravity Forms Add-on you can change List Field columns into a number field, do calculations within a row or column. Extra merge tags are available with total counts of columns.

Field to Entries

Create entries based on Checkboxes & Multi Select choices & List Field rows.

Advanced Number Field

Functionality for Number Fields, like rounding or only absolute numbers, fixed point notation, range calculation, custom units like % or m2 & show as slider.

See all add-ons

Read tutorials about

Gravity Forms Asana Integration: Create Tasks From Form Submissions

Learn how to connect Gravity Forms to Asana with GravityWP API Connector. This tested workflow creates Asana tasks from form submissions and saves the returned task ID and URL back to Gravity Forms.

Gravity Forms Google Calendar Integration: Create Events From Form Submissions

Connect Gravity Forms to Google Calendar with GravityWP API Connector. Learn how to create calendar events from form submissions, map event details, configure OAuth 2.0, handle time zones, and save the returned Event ID and URL.

Gravity Forms Notion Integration: Create Database Pages Without Zapier

Connect Gravity Forms to Notion without Zapier. This tested tutorial shows how to create Notion database pages from form submissions and save the returned page ID, URL, creation time, and API response.

Gravity Forms ClickUp Integration: Create Tasks Without Zapier

Create a Gravity Forms ClickUp integration without Zapier. This step-by-step tutorial shows how to create ClickUp tasks from form submissions, map priority and requester data, and save returned task details back into Gravity Forms.

See all tutorials