13 Free jQuery Plugins For Custom Web Form UX Features

Looking to increase your default form functionality? Pretty much every feature under the sun has a plugin you can use to simplify the process.

But if you aren’t sure where to start I recommend these free jQuery plugins from all over the web.

Each plugin is super easy to install and they all support different form features like custom checkboxes, floating form labels, autocomplete, and many other nifty tools.

1. JavaScript Custom Forms

jcf jquery forms

I first stumbled onto this library a year ago and it’s still one of my favorites. JavaScript Custom Forms, or JCF for short, is a massive jQuery library of custom form elements and dynamic features.

It was built to give a consistent feeling across all browsers with the added benefit of running on the most popular JS library in the world.

This library is super easy to use and easy to install. Plus it’s built with usability in mind including support for RTL languages and keyboard shortcuts for accessibility.

Custom elements include select menus, sliders, checkboxes, and even custom file upload fields. Those are notoriously difficult to customize but JCF makes them look amazing.

If you need an entire library of custom form styles then JCF should be your first stop. It’s certainly a heavier resource than most but it’s also reliable and very well designed.

2. iCheck

icheck plugin

One more plugin I really like is the iCheck jQuery plugin for radios and checkboxes. This free plugin was released years ago and when I first saw this I knew it was a game changer.

You can dig through Google and find tons of custom checkbox/radio input styles. But iCheck is probably the best in show with the most styles, extra features, and the greatest support.

It works the same across all browsers including iOS/Android devices. Plus it supports screen readers and ARIA attributes for accessibility.

Not to mention you have a choice of 6 different themes and the choice to restyle your own theme from scratch. Pretty cool! Especially for a plugin built solely to change up two very plain input fields.

3. Chosen

chosen select menu

Select dropdown menus are super common and they serve a real purpose. If you need to offer a set of options where the user should only pick one, it’s easiest to use a select menu.

But with Harvest’s Chosen you can quickly get these features added into your layout without a hitch. This plugin supports a custom search filter where the user can type letters and automatically filter the results.

This is super handy for lengthy select forms like country pickers. With well over 100 countries in the world it’s pretty nice to have a searchable select menu.

And the Chosen plugin has options for multi-select along with a “no results” display for search. It’s quite possibly the most detailed select menu plugin out there.

4. Selectize.js

selectizejs plugin

The Selectize.js plugin also works on select menus but it combines the idea of a textbox with a dropdown select.

This way users can pick many different items and submit your form with many options selected. But the input UX performs just like a select so it should feel familiar to everyone.

All of the code is available for free so you can edit and re-skin the theme to your liking.

It’s also pretty simple to pass data over to the server since it all goes through one input field.

Think of this like an email “to” field where you can select multiple contacts from a list. It’s the perfect way to expand your select menus and turn them into multi-value data fields.

5. Multiple Select

multi select plugin

Another multi-value plugin you should check out is the aptly named Multiple Select. Again this runs on jQuery and it’s released for free on GitHub.

But instead of adding tags inside the field for chosen items, this plugin lets the user select items with checkboxes. So the behavior mimics a select dropdown but you can click more than one at a time.

Take a peek at the online docs for live examples and help getting started.

This is perhaps one of the most technical plugins you can use and it has a lot of features. Awesome for anyone who needs this type of field but may be a little detailed for smaller forms.

6. FloatLabel.js

floatlabel.js plugin

You know those cool input fields where the placeholder text moves above the form once you start typing? That’s basically what FloatLabel.js does.

Once your cursor enters a field this plugin hides the placeholder while animating a new floating label into view. Take a look at the official demo page to see what this looks like.

It’s not going to radically change your form’s behavior nor will this likely improve your conversion rates. But it will improve the user experience by keeping each form compact yet easy to skim.

7. LC Switch

lc switch on off

Another popular form trend that’s grown in recent years is the on/off switch. It started with the original iOS settings page and has since made its way into all mobile devices and even the web.

Using a plugin like LC Switch you can add your own on/off switches to any form. These work on radio or checkbox inputs so you can still submit data to the backend with ease. You just need to setup your form the right way so it’ll handle user clicks.

With checkboxes you can let visitors pick many settings at once. Or with radios you can limit choices to just one selection.

Both options are completed valid and it’s what makes this plugin so great. All you need is a copy of the plugin’s files and one simple jQuery function.

8. Pickadate.js

pickadate js plugin

I’ve lost count of how many datepicker plugins are out there. You could spend weeks digging through options just to get your calendar picker setup.

My recommendation is for Pickadate.js. It’s simple, lightweight, and fully responsive so it works on all mobile devices too.

Best of all this functions as a date and time picker so you can choose just one of those features, or include both in the same input field. Pickadate comes with its own stylesheet so you just add this plugin to your page and let it run.

It’s frequently updated with bug fixes and you can find tons of example codes on GitHub.

9. Formvalidation

formavalidation plugin

Another saturated feature with dozens of plugins is form validation. This is where JavaScript checks each field as the user types and lets them know whether the contents are valid or not.

This is super handy for password fields with requirements for certain characters/limits, and with email fields to make sure the email address looks real.

jQuery’s Formvalidation plugin is my go-to pick since it’s lightweight and super easy to customize. It works on all the major frameworks including Foundation and Bootstrap.

Plus the online docs are pretty straightforward so even non-coders should be able to figure them out.

But feel free to search through Google and see what else you can find. This is not the only form validation plugin and it’s not always the best choice for every website.

10. jQ Ideal Forms

jquery ideal forms

Looking for an entire framework to design custom web forms? Then jQ Ideal Forms might work for you.

This feels much like the JCF library I mentioned earlier. However jQ Ideal Forms isn’t really an aesthetics library, but more of a functionality & validation library. It does change the style of form inputs but the real benefit is custom validation.

You can use the Ideal Forms plugin to check email addresses, dates, passwords, and duplicate field entries to make sure they match.

It supports custom keyboard shortcuts and even uses the jQuery UI calendar picker for date-based inputs(good for mobile too!)

An excellent choice for anyone who wants strong form validation with custom styles packed into one plugin.

11. Autosize

autosize plugin

I’ll admit this is a pretty simple plugin but oftentimes it’s the little things that make the largest difference in user experience.

Autosize works as a vanilla JS plugin but it can function well on jQuery too. You just target whichever textarea element(s) you want and let this run.

By default your textareas will hold their normal height which you can set in CSS. But with this plugin the textarea should auto-resize whenever the user types enough characters to hit a scrollbar.

It’s a nifty feature to enhance readability and keep your textareas visible at all times.

12. Rangeslider.js

rangeslider js plugin

Not everyone needs range sliders and they’re definitely not a typical resource in web forms. But the HTML5 spec fully supports these numeric sliders and with Rangeslider.js you can build on top of this functionality.

This awesome plugin is a free jQuery polyfill for the default HTML5 element. This means you can add the range slider into older browsers that wouldn’t normally support the feature, plus you can give it a sleek new look.

The plugin is touchscreen friendly and passes data properly to the backend. It also supports legacy browsers dating back to IE 8+ so it’s a safe choice for running these range inputs everywhere.

13. jQuery Credit Card Validator

jquery credit card plugin

Last in my list is the amazing jQuery Credit Card Validator. This plugin was a true labor of love and it’s by far my favorite credit card automation plugin.

It does not validate the number based on CCV/expiration date because it doesn’t run a full credit card submission. Instead this checks the card numbers against typical patterns used by certain companies like Visa and MasterCard, then automates the detection process using these patterns.

This works through a special algorithm that was adopted & restyled to run in JavaScript. So if you have an ecommerce site and need frontend CC validation this should be your #1 pick.

Wrapping Up

With all these plugins at your disposal you should have more than enough to expand your webforms. You can add custom radios, checkboxes, select fields, upload forms, expanding textareas with floating labels and so much more.

But remember that plugins can bloat your layout and website speed is important too. Find a way to strike a balance between expanded form features and quick load times for the ultimate user experience.

Jake is a writer & designer covering the latest tech on the web. He frequently writes about user experience and resources for building usable websites. Check out more work on his portfolio site and find his latest updates on Twitter @jakerocheleau.



56


5

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.