Add a loading spinner on multi step form

Get Help
, , , ,
1

Hey everyone,

im trying to add a spinner on the “next” button click, cause sometime some of my step take time to load cause of my API call.

I just want the user to know that the form is loading, cause for now nothing happend when the user click on the next button, and if one of my API is offline, it take some time to have the next step of my form loading.

My form have the ajax enabled.

Thanks in advance!

2

By default Gravity Forms already shows an ajax spinner next to the button when ajax submission is enabled for the form.

You can customize the spinner image and the HTML element after which you want to display it using the following filters:

3

Dont know why but I had to specify the path in my function.php …

add_filter("gform_ajax_spinner_url", "spinner_url", 10, 2);
function spinner_url($image_src, $form) {
    return  '/wp-content/plugins/gravityforms/images/spinner.svg' ;
}

Super dumb cause its the default spinner, and the default path.

But since I specified the path in my function.php it solved my issue…

Second question, Is it possible to grey out the entire form and have the gif spinner centered in the form ?

4

You can use the second filter in my previous reply to customize where you want the spinner to be placed. There’s no Gravity Forms filter or feature to gray out the page, that’s something you would need to handle it with our own custom JavaScript code.

To run custom JavaScript code in your form you can add an HTML field, just wrap the code between script tags HTML script tag You’ll want to use gform_post_render gform_post_render - Gravity Forms Documentation to ensure the code can still run if the form fails validation etc.

Or you can try also the following third-party free plugin that adds a nice Custom JavaScript editor to the form settings where you can put your JS script: Gravity Forms Custom Javascript - Free Plugin by Gravity Wiz

1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.