12 Free jQuery Plugins To Extend Checkout Form Functionality
If you’re looking for ways to improve your website’s checkout form to improve user experience with features like card validation and custom forms, these free jQuery plugins will come in handy.
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 12 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.
02. Inputmask
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.
This does include a jQuery plugin but it can run on vanilla JavaScript too. Definitely one of the better plugins in this list and it’s perfect for formatting input fields to match the 4-digit batches in CC numbers.
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.
04. JavaScript Custom Forms
The team at PSD2HTML released an amazing customized form pack called JCF, or JavaScript Custom Forms.
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
Another masking plugin you might like is the aptly named jQuery Mask Plugin. It was created by developer Igor Escobar and it’s got a live demo free on GitHub for testing.
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.
The jQuery Form Validator plugin is totally free and one of the best you can use. It’s hosted for free on npm, Bower, and of course GitHub.
One big upside is how this plugin keeps your HTML clean. You can pass custom data attributes into the field to create your validation settings without writing a single line of JavaScript. Each one of these data attributes must be met before the field is declared valid.
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.
You can also find the entire library on CDNJS if you wanna test this out locally or in a browser IDE like CodePen.
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.
08. Tooltipster
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. Datepicker
One of the newest plugins in this list is the custom datepicker UI created by developer Fengyuan Chen. It’s available for free on GitHub and it comes with a gorgeous calendar input design.
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.
11. DataTextEntry.js
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.
12. Selectize.js
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.
In Conclusion
Since these plugins are free to use, you can easily test each one until you find the best options for your website. Just remember to keep an eye out for website performance and page loading times.
If you’re thinking about starting an online store, check out our complete step by step guide for starting a shop with Shopify. If you prefer WordPress, our list of Top 4 WordPress eCommerce plugins comparison will also help you make the right decision.
Leave a Reply