DIY Preloader for Your Forms

The great thing about Cognito Forms is you can cram a lot of complexity into your website’s forms. But all that complexity has to be downloaded, and if the person wanting to fill out your form is on a slow internet connection, they might have to wait a second to see your form come up. This is where having a preloader, a graphic indicating something is loading, might come in handy.

You get two benefits for the price of one with preloaders. To those of your users who are overly jittery, those spinning animations say in a calm soothing voice, “Don’t worry, friend, this spot is intentionally left blank while the form loads. Nothing is wrong. We’re working on it. Relax.” The other benefit is that they look cool. Sure, it might not be as captivating as Citizen Kane (debatable), but when you consider that it only needs to keep your user’s attention for a couple of seconds (and probably way less), you’ll realize a well-done preloader can be Oscar-worthy entertainment.

How To Add a Preloader to Your Form

High-level Concepts

So how does one add a preloader to a Cognito Form? It’s easy with just a little CSS. If you don’t know what CSS is, check out this post I wrote explaining it. CSS has some nifty syntax that lets you style the last element of a container in a special way. We’ll take advantage of this by adding a preloader as the last element of the form embed code. We’ll set this preloader element to be visible as long as it is the last element of the embed code container. The trick is, your form gets added after the preloader when it loads. Thus, the preloader is no longer last and becomes invisible.

Blah, Blah, Just Tell Me How to Actually Do It

Here’s the code. Note how we’re adding an html element to the end of the embed code, the <div> with the class name set to “preloader.” It just has one image in it. The rest of the work is done by CSS. Take a look at the CSS; I explain how it works in comments in the code.

What’s Next

How to Test It

You, being a fancy person with impeccable taste in Internet Service Providers, are probably feeling like someone who was handed Citizen Kane on a VHS tape. You want to watch it, but it’s been years since you’ve owned a VHS player. You’re saying to yourself right now, “How do I know what this guy says will even work because my smoking-fast fancy internet connection loads the form before I can even see what’s going on?” This is, quite literally, a first-world problem. Before you book a flight to a developing country, let me show you an easy way to solve this problem.

Many browsers have a handy feature that lets you throttle your fancy connection. I’ll show you how to do it in Chrome but you can follow these directions for Firefox. In Chrome, open up the page with your form that has the preloader, and use ctrl+shift+I (cmd+opt+I on Mac) to open Chrome DevTools. Now, you can open the Network tab and then emulate different connection speeds such as “Slow 3G.” See my image that has the Network tab and the connection speed menu highlighted. You can click to enlarge it.

Resources

If you want to take the preloader animation to the next level, check out these sweet animations that you should be able to easily integrate with your forms based on what you learned here today. Just note that the class name in these examples is “loader” and not “preloader.”