13 Free jQuery Plugins To Extend Checkout Form Functionality
Every major ecommerce site has their own checkout process. This is always unique to the site but it follows the same flow: user enters information, pays, then receives their purchase.
You can speed up this process by adding extra features into your checkout forms. And in this guide I’ll share 13 of the best free jQuery plugins for adding this must-have functionality to your checkout & billing page.
01. jQuery Credit Card Validator
First up is the free jQuery Credit Card Validator plugin. This thing is absolutely incredible with such an easy setup and some valuable features.
You can browse the entire source code on GitHub and download the latest copy in a .zip archive. This plugin automatically detects and validates credit card numbers as they’re entered into a site. It uses the Luhn algorithm as a checksum to validate credit card numbers in real time.
Each CC type has different requirements and you can see these updated in real time. For example, a MasterCard and Visa card each have different numeric sequences. So when a certain CC number is entered this script can auto-detect the type. This gives visitors a sense of trust when entering their card.
You can download the source in pure jQuery but it’s also available in CoffeeScript for editing. The main function takes optional properties based on the card type and validity checks(valid length, card #, and checksum).
If you’re looking for automated CC validation this is the only plugin you need.
Validating a credit card number is one thing. But getting it properly formatted is a whole separate issue which can be handled using the Inputmask plugin.
But note this plugin is not just a CC number mask. It supports literally anything you’d like to mask including phone numbers or zip codes. You can even pass custom regex codes to mask whatever format you want.
Inputmask pairs nicely with the CC validator plugin since these two can turn a simple input field into a dynamite CC billing form.
03. jQuery AutoTab
You’ve probably experienced the auto tab feature at some point when buying online or signing up to a new website.
This sets a predefined character limit on a field so once the user reaches that number it tabs onto the next one. jQuery AutoTab is a great free plugin to handle this functionality with basically no setup.
With this plugin you can move focus onto inputs forward or backward, preformat the text, and push the user along wherever they need to go. And this does support regex patterns so you can target more complicated tab inputs beyond simple phone numbers.
It’s a smooth cross-browser input library for customizing all of your form’s inputs. Dropdown selects, radio buttons, ranges, number sliders, file uploads, everything.
You can see a full demo of all elements on the main site along with a download link. This whole library runs on jQuery because it also supports custom behaviors for select fields and toggle inputs(radios/checkboxes).
If you’re looking for a truly customized checkout form then you have to try JCF. It’s available for free on GitHub and supports all major browsers including IE 8+.
05. jQuery Mask Plugin
I think the implementation of this plugin is so much easier to follow, especially for beginners. You just pass the formatting you need into a mask() function and target the correct input field with jQuery. With that you can format dates, zips, prices, pretty much anything.
The demo page includes full documentation so you can even copy/paste the code right into your project. A really great plugin to get started in basic form customization without any heavy lifting.
06. Form Validator
Input field validation is one of the toughest subjects to breach. This requires a lot of custom code based on your requirements for passwords, email addresses, shipping addresses, or anything else on your checkout page.
For example, you might pass data-validation-length=”6″ onto your password input to force passwords of at least 6 characters or more.
Just note this plugin has a lot of features to work through. You can find full documentation on the homepage using the side navigation to browse through different settings.
07. jQuery Validation Engine
Inline form validation comes in many flavors. The jQuery Validation Engine is one of the most popular choices currently in version 2.6.
It’s been online for over 7 years and it’s updated mostly through developer contributions. But this is an extremely safe plugin with a pretty simple setup. You just create the fields, define input validation, then setup the tooltip messages.
There’s a somewhat gaudy-yet-usable demo here that you can test for yourself. It all runs through the validation engine with custom features like date ranges, time settings, or credit card numbers.
You’ll also find the full source code on the GitHub page for easy access.
Tooltips offer the perfect solution to keep visitors engaged with your form, explaining each field and how to fill it out properly.
The Tooltipster plugin is totally free and one of the best around. It comes with a bunch of custom styles, positions, and animations that you can set for each field. You’ll find a live demo right on the Tooltipster website along with documentation and browser support.
Out of all the tooltip plugins available this is by far my favorite. It’s currently in version 4.0 with support for all HTML5 input fields. You can show tooltips when the user’s hovering a field, or clicking/selecting, or entering text or whatever you want.
You control the trigger point and Tooltipster does everything else.
To see a full list of animations and options check out the GitHub repo and download a copy.
09. Poshy Tip
One other fantastic tooltip library is Poshy Tip. This one’s a bit older but it does support modern jQuery and most modern browsers.
You’ll find a full series of demos right on the website along with documentation for setting up the plugin. These tips do look beautiful but they’re somewhat limited with animations. That’s one reason why Tooltipster stands out beyond this plugin.
But if you just need something simple and efficient Poshy Tip will do the job well.
10. jQuery Payment
The jQuery Payment plugin is basically a general purpose library for all checkout related features. It can handle credit card validation, input formatting, and field styling.
Credit card information is sensitive and users want to know their data is secure. This plugin was developed by the team at Stripe so you know security is basically #1 on the list.
Take a peek at the live demo and see what you think. It’s a very simple plugin but it can handle all the features you need for credit card checkout fields.
You can add this onto any input field to style it for selecting a day, month, and year. It does have touch support so it should work on all mobile devices. Not to mention it’s fully responsive and comes with a few different inline styles.
It’s a very simple plugin to setup and it comes with a lot of features you can extend. Best of all this runs on jQuery so it’ll fit right in with any other plugins you use.
DataTextEntry.js is a clean jQuery plugin with some very basic features. It creates automatic validation and formatting for date fields.
It’s not a full datepicker plugin like the one above. Instead this is a basic formatting plugin that supports regular input fields. This was built with keyboard users in mind for the highest level of accessibility.
But this is a very simple plugin so if you don’t need date-based formatting then you won’t need to worry much about this.
Last but certainly not least is Selectize.js. This very unique plugin lets you transform select menus into text boxes for selecting multiple items at once.
You can see a few live demos on the plugin page using many different styles. This plugin supports option headers and even subtitles beneath select fields. With the “remote fetch” option you can even pull data from an external API and load those items into the select field.
This entire plugin is totally free and available to download from GitHub. I don’t think it’ll fit into every checkout form but it certainly offers a unique value for larger select fields.
With all these plugins it can be tough knowing what to use. My suggestion is to try a bunch and see what you like best.
But remember that each plugin adds size to your page, so try to stay slim and only use plugins that truly improve your form’s performance & the user experience.