The process of gathering user input has become an expected part of web design. But trends have advanced further with the expectation of snappy interface features. Examples are the little JavaScript hints added onto forms. These are used to increase readability and create a more straightforward interaction.
A web form that responds to user input is more valuable than a static one of similar design. These plugins can help you build forms with motion and life. Users will feel more comfortable interacting and ultimately be guided through the entire process. Just be sure to only install plugins that really add value because there is such a thing as going overboard. These are the absolute best JavaScript plugins for adding hints and tooltips to web forms.
Tooltipster
One of my favorites has to be Tooltipster, a free jQuery plugin for creating custom tooltips. The plugin runs on top of jQuery and works in all browsers back to IE8.
Check out the homepage for some live demos and how they work on individual elements. You can add static text, images, or other types of content into the tooltip. Plus you can change how the tip appears based on hover, click, or any other callback method.
Truthfully this is one of the easiest tooltip libraries for customization. The docs are easy to read and once you get the hang of this plugin it may become your favorite go-to solution.
Progression
On a slightly different subject let’s cover the use of progress indicators. These are fairly common with checkout fields but haven’t been used in traditional web forms. Progression.js is a free progress tooltip plugin made for any type of form.
When the user successfully fills in a field the progress indicator increases. It’ll automatically reach completion once every required field has been filled. This is very cool and often works best on larger forms to keep people pushing through to the end.
Floatlabels.js
The prevalence of HTML5 placeholder text has almost removed the need for labels. However they still serve a purpose in regards to compatibility and when fields have already been filled.
Enter Floatlabel.js with its sly animations and ridiculously simple config. A field’s label is seen as a placeholder when empty. After some text has been entered it’ll float above the field and remain present the whole time. This helps users remember what they’re filling out and gives the form a sense of life.
Nod.js
There’s no denying that validation is a tricky practice. On the web this is often done using JavaScript and some regular expressions for e-mails and password security. What I like about Nod.js is that it simplifies the whole thing.
Yes you still need to write JavaScript and yes there are many potentially confusing options. But nod is a much better choice than custom-coding your own validation library.
Nod.js comes with icons and custom styles for showing when a field is complete or incomplete. It plays nice with Bootstrap and even offers custom functions to check against more complicated valid/invalid text.
Tipped
For a more expansive tooltip library I’d have to recommend Tipped.js. It runs off jQuery and includes a JS/CSS file together. Once installed you can build tooltips with custom skins, unique placements, animations, and callbacks.
Tipped offers custom methods just like other plugins. You have access to an array of unique options and callbacks made for tooltips. It’s easy to pull data from Ajax/JSON or Ajax/MySQL, even API data can be loaded from a 3rd party server.
If you need a complete tooltip solution then look no further. Once jQuery is installed you’re good to go.
Smallipop
Not everyone requires a full-scale solution and many developers would rather stick to a simple plugin. Smallipop runs on jQuery and has the easiest setup you could imagine. Just target the element with .smallipop() and you’re all set.
Naturally there are optional parameters you can pass into the method if you choose. But this is one of the few plugins that doesn’t require a whole lot of setup. Right out of the box you can have tooltips attached to form fields using only a few lines of JavaScript.
DateTextEntry.js
Although this doesn’t exactly fit with form tooltips, it does fall under the umbrella of “form hints”. DateTextEntry is a free jQuery plugin made for enhancing date fields. Instead of a typical blank input users are given the more familiar DD/MM/YYYY alternative.
I will admit the plugin website is rather basic and documentation is not too pretty. But it’s also not a complicated plugin and you can learn a lot by downloading the live demo. I know most devs go with calendar pickers but text-based dates are a reasonable alternative.
jQuery Steps
Help wizards, completion steps, and breadcrumbs all make up the guided process of form submission. jQuery Steps is a compact library for guiding users through the signup process.
It’s actually quite comprehensive with a lot of interesting features. Take a look at the examples page to see how this works in action. Steps can be guided with field completion or key presses on the keyboard.
Everything is guided through tabs and works like a dynamic switching field. I don’t think this is appropriate for every project, but since it’s easy to customize it can work on forms that require large handfuls of data.
dependsOn
The simplest way to mark required fields is with an asterisk. Unfortunately this is rather static and forces users to recognize when a field is required. dependsOn is a jQuery plugin for managing required fields.
Based on the demo examples you can actually build a number of interesting features. In one example the submit button is hidden from view until enough fields are completed. I’m sure many developers are familiar with this type of functionality and have even written something like this from scratch.
But this plugin will save you a lot of time and stress debugging your own handwritten plugin.
Multi-Step Progress Bar
Lastly I want to include this multi-step progress bar even though it’s not exactly a plugin. The code is available for free with JavaScript comments explaining how it all works.
What drew me in was the animation style of this effect. It makes the whole form come to life in a very unique way. Anyone who likes breadcrumb steps in form design will fawn over the elegance of this code.
Keep in mind that this does require jQuery as a dependency so you’ll need to include the library in your project. But it’s also easy to customize and repackage into a new plugin.
Closing
With all of these free plugins at your disposal you should have no problem building custom forms. Study other examples online and take down notes when you see a cool effect. It’s not as hard as you think to create beautiful forms – all it takes is knowledge of user behavior and some nifty plugins on your side.