Add Progress Steps to Forms With This jQuery Plugin

Most of us know about progress bars and how these work in UI design. They help to define pageload times, upload forms, and similar periods of delay between pages.

But progress steps are a little different. These work like breadcrumbs at the top of the page to guide users through a step-by-step process (usually signup and checkout forms).

With jQuery Steps you can quickly add custom progress steps onto any page of your site.

The entire plugin runs on jQuery and it’s released for free on GitHub.

You can run these progress steps as multi-page features that guide the visitor through different pages on your site. Or you can run this like an Ajax step that moves the user through the same page with dynamic form fields.

In the plugin options, you’ll find settings for changing the “start” position, footer buttons, forward/back buttons, and a whole lot more.

There are also quite a few events you can target with your own custom callback functions whenever the user advances the progress step, or whenever the user reaches the end.

All things considered, this is a fairly new plugin so it doesn’t have a ton of options to pick from. But it’s definitely one of the best plugins you’ll find for creating these custom progress step features.

Just note: browser support is mostly limited to modern browsers and for Microsoft browsers this has only been tested in IE 11. If you’re looking to support older browsers you’ll need to do some testing on your own, or try to build custom fallback methods to handle legacy users.

Certainly one of the easiest progress step plugins I’ve ever seen and it should play nice with other jQuery plugins too.

Take a quick look at the homepage for a live demo along with the custom JS options and a download button to pull a copy of the code for yourself.