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

JWT Prefill

Fill forms with data you can trust. Prefill Gravity Forms fields with a secure token instead of links with editable url parameters, so your data is accurate, tamper-proof, and ready to use.

List Text

Add features like textarea, placeholder and custom validation 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.

List Datepicker

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

See all add-ons

Read tutorials about

Gravity Forms Discount Code Field: Apply Fixed or Percentage Discounts in a Form

Learn how to create a Gravity Forms discount code field that applies fixed or percentage discounts. This tutorial shows how to calculate subtotals, discount amounts, and final totals using tested form logic.

Gravity Forms Zoom Integration: Create Zoom Meetings From Booking Forms

Learn how to connect Gravity Forms to Zoom without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create Zoom meetings from booking form submissions and save the returned meeting details back to Gravity Forms.

Gravity Forms monday.com Integration: Create New Items From Form Submissions

Learn how to connect Gravity Forms to monday.com without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to create new monday.com items from form submissions and save the returned monday.com item ID back to Gravity Forms.

Gravity Forms Pipedrive Integration: Send Form Contacts to Pipedrive Without Zapier

Learn how to connect Gravity Forms to Pipedrive without Zapier using GravityWP API Connector. This step-by-step tutorial shows how to send form contacts, custom fields, and the returned Pipedrive Person ID directly from WordPress to Pipedrive CRM.

See all tutorials