Feature

Form loading animations

A loading animation is a short animated screen between two steps, or at the end of the form, that moves the lead on automatically. It shows the lead that their answers were received before the next step appears.

Start free trial

A loading screen between the questions and the next step

The animation plays for the delay you set, and then the form advances without a click.

What is a form loading animation?

A form loading animation is a loading spinner or similar animation shown on a step of its own. In Growform it is a decorative element called “Loading Animation”. After a delay you set, the form moves to the next step automatically.

Changing steps in Growform is close to instant. On a form that ends with a result, the jump from the last question to the next screen can feel abrupt. A loading screen makes it clear that the answers have been received.

What can you customize?

You can change the type, the size, the color and the delay. There are four types, named Beat, Bounce, Circle and Dots. The color can match the rest of your form design. The “Redirect after” setting controls how long the animation shows, from 0.5 to 5 seconds.

The step can also hold other decorative elements. A header or paragraph can say what is happening, such as “Checking installers in your area”.

What happens to the form's navigation during the animation?

Growform hides it. While the loading animation is on screen, the continue button, the submit button and the progress bar are hidden, so the lead cannot skip ahead or go back by accident.

Where should a loading step go?

Put the loading step at the point where the form changes from asking to answering. A solar company can ask about the roof and the electricity bill, show “Checking your answers”, and then ask where to send the quote. The animation can also play at the end of the form, before the ending that tells the lead what happens next.

How to add a loading screen in Growform

Add a step for it

Create a new step where the loading screen should appear and give it a name such as “Loading step”. Delete any fields the step does not need.

Add the “Loading Animation” element

Choose “Loading Animation” from the decorative elements, then pick Beat, Bounce, Circle or Dots.

Set size, color and delay

Adjust the size and color while the element is selected. Set “Redirect after” to a delay between 0.5 and 5 seconds.

Say what is happening

Add a header or paragraph above the animation so the lead knows what the pause is for.

What a short pause does for the steps that follow

The lead can tell the answers were received.
The animation gives a visible response to the last question before the next screen appears.
The contact step arrives with some context.
A line of text on the loading step explains what the form is doing before it asks for a name and number.
Nobody leaves the step by accident.
The continue button, the submit button and the progress bar are hidden while the animation plays.
The delay is yours to set.
“Redirect after” goes as low as half a second, so the pause never has to be longer than it is useful.