A loading animation briefly shows your visitors "Calculating your result…" before the form goes on. This builds suspense, for example before the contact step or before a result. The step has no next button and moves on to the next step by itself after the set duration.
Requirements
- Funnelforms Free or Funnelforms Pro 5.0.7 or newer. The loading animation is the same in both.
- You may edit forms.
Where to find it
Funnelforms → Forms → open a form → Structure. In the side panel on the left, on the Add tab, the group Content and more holds the block Loading animation. On the canvas the step is then called, for example, "Loading animation · 4 s".
Features at a glance
| Setting | What it does |
|---|---|
| Animation | Progress bar, Ring with percent, Checklist, Spinner, Dots or Magnifying glass. |
| Duration (seconds) | How long the animation runs, 0.5 to 60 seconds. |
| Texts while waiting | One line per text, ten at most. |
| Show percent | For the progress bar and the ring. |
| Size | Small, Medium or Large. |
| Texts | Below the animation or Above the animation. |
| Own colour | Colour of the animation; otherwise the accent colour of the design. |
| Text, image or video above the animation | Folded away below, as in Text and media. |
| Preview of the loading animation | Runs in a loop in the editor. |
Step by step
- Open the form in the Structure workspace.
- Drag the block Loading animation from Content and more to the place where visitors should wait, for example before the contact step.
- Pick the Animation on the right under Properties.
- Set the Duration (seconds). For most forms, 3 to 5 seconds fit.
- Adjust the Texts while waiting, one line per text.
- If you like, set Show percent, Size, the position of the Texts and an Own colour.
- Check the loading animation in the preview and save.
How it works
What does it start with?
A new block has the heading "One moment, please", a progress bar with percent, a duration of 4 seconds and the texts "Checking your answers…", "Calculating your result…" and "Almost done…". The texts are in the language of the form.
How do the texts behave?
With most animations, the texts change evenly over the duration. With the Checklist, all texts stand as a list and are ticked off one by one over the duration. Without texts, the checklist shows a spinner.
What do visitors see?
The animation starts as soon as the step appears, and the form then moves on by itself. If visitors go back with Back, the form skips the loading animation. Screen readers read the texts out. If visitors have set less motion in their system, Dots and Magnifying glass do not move.
What about "Text and media"?
Up to 5.0.6, the loading animation was hidden in the block Text and media under How the form goes on. Such steps keep working. A step from Funnelforms 3 with a waiting time arrives as Text and media with By itself after a wait; if you pick Loading animation there under How the form goes on, it gets the same settings.
What happens when importing from Funnelforms 4?
The loading screen from Funnelforms 4 becomes a loading animation with animation, duration, texts, percent, size and colour. The speed is dropped, because the duration counts. Texts to the left or right of the animation end up below it. More in Moving from Funnelforms 4: import forms and leads.
Best practices
- Use one loading animation per form, ideally right before the contact step or the result.
- Keep it short. More than 5 seconds quickly looks like an error.
- Write texts that fit the form, such as "Looking for matching offers…".
- Take the Checklist if you want to show what is being "checked".
Troubleshooting
| Problem | Cause | Solution |
|---|---|---|
| The block Loading animation is missing | A version before 5.0.7 is running. | Update Funnelforms. |
| The texts change too fast | Many texts with a short duration. | Make the Duration longer or the list shorter. |
| The checklist only shows a spinner | No texts are entered. | Enter at least one text under Texts while waiting. |
| Dots or magnifying glass do not move | The device is set to less motion. | This is intended; pick the progress bar if needed. |
| The colour does not fit the design | The accent colour of the design is used. | Switch on Own colour and pick the Colour of the animation. |
Tips
- Above the animation you can show a short text, an image or a video.
- Percent appears only with the progress bar and the ring.
FAQ
Is anything really calculated during the animation? No. The animation runs for the set duration; calculations happen instantly anyway.
Is the loading animation saved in the entry? No. It asks nothing and does not appear in entries and exports.
Is this in Funnelforms Free? Yes, with all settings.