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

List Text

Add features like textarea, placeholder and custom validation to a column or multiple columns in a Gravity Forms List Field.

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.

List Datepicker

Add a Datepicker with calendar select to a column or multiple columns in a Gravity Forms List Field.

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.

See all add-ons

Read tutorials about

How to Validate Repeatable Contact Rows in Gravity Forms

Learn how to validate repeatable Gravity Forms List field rows with GravityWP List Text. This tutorial shows how to add email and regex validation, test invalid values, and confirm that valid team roster data is stored correctly.

Gravity Forms Airtable Integration: Create Records From Form Submissions

Learn how to build a Gravity Forms Airtable integration with GravityWP API Connector. Send form submissions to Airtable, create new records automatically, and save the returned Airtable Record ID and response back to Gravity Forms.

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.

See all tutorials