Design your way

There are some features that we simply can’t add to forms without jQuery. At least yet, we can’t. Until some technological improvements will be made, this nifty little Javascript library helps us better customize our forms with its many form plugins that developers have created.

The jQuery form plugins that you will find in this article cover a variety of features that you’d want for your website’s forms and, most likely, you will find something that will make your site’s user experience better.

Form Validation

jQueryflexdatalist

After searching and not finding a standalone, lite (not dependent on jQueryUI), autocomplete that did everything the author needed for a project, he created Flexdatalist.

Popselect

A jQuery plugin to replace the traditional select box with a sleek Popover with options pre-populated. Better User interface than any other multiselects.

jQuery formBuilder

jQuery formBuilder is a 100% client-side plugin that gives users the power to create forms using an intuitive drag and drop interface. FormBuilder supports a number of form fields and some html tags.

Advanced Search Form

Getting the search experience right is never an easy task. The starting point is always the search form, which, in most cases, consists only of an input field plus a submit button. The search results page can be tricky to design, in particular if you have different content categories.

superplaceholder.js

superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.

Searchable Option List

Searchable Option List (SOL) is a jQuery plugin which enhances your select HTML elements and makes the options searchable. It works for regular option lists as well as those marked as multiple.

Filters

No Download Needed. jQuery filters rending out of the box for backoffice use.

Tagger Widget

jQuery plugin to turn a HTML select into an auto-suggesting, tagging widget.

There seemed to be other plugins that did auto-suggest, but not allowing for multiple tags to be selected. Or plugins to have a multi-select drop down, but no auto-suggest feature.

This plugin does both at the same time, hopefully giving the best of both worlds. It was written from the ground up and has support for hierachical data, searching for data that isn’t displayed, displaying arbitrary HTML in the suggestion list, running the original onChange actions, displaying tags for items previously selected but no longer in the list, keyboard accessibility and many other features.

Bootstrap Validator

The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form.

jQuery Nice Select

A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.

Select

Select.js is a Javascript and CSS library for creating styleable select elements. It aims to reproduce the behavior of native controls as much as is possible, while allowing for complete styling with CSS.

Submitter

pickList

Stretchy

jMinMaxSelect

A jQuery plugin to create intelligent min and max selects. Sometimes you can not use a range slider. So you maybe will mimic the function of a range slider with a lower and upper bound select.

Maximum Characters limit exceeded warning

Get a warning when the maximum char limit has been exceeded with a simple jQuery plugin.

Animated search filter plugin

Styling & Customizing File Inputs the Smart Way

A tutorial on how to style and customize input type=”file” in a semantic, accessible way using the element and some JavaScript.

jquery.auto-translate

jQuery plugin for translating form fields and text blocks via translation providers like Google and Yandex. This plugin is dependent on do-translate npm package.

jQuery toggle candlestick

This is a switch and stylish jquery plugin that converts checkbox to toggle switch button. This plugin allows to choose between three options.

Horsey

The goal is to produce a framework-agnostic autocomplete that is easily integrated into your favorite MVC framework, that doesn’t translate into a significant addition to your codebase, and that’s enjoyable to work with.

Horsey shares the modular design philosophy of Rome, the datetime picker. Furthermore, it plays well with Insignia, the tag editor component, and pretty much any other well-delimited component out there.

Login & SignUp form using Material Design and jQuery

jQuery MultiSelect

Turn a multiselect list into a nice and easy to use list with checkboxes.

Textbox Revision Tracker

A simple jQuery plugin to track text revisions to HTML inputs or text areas. Revisions can be saved, undone, redone, diffed and fetched. Revision data of text, time of revision and revision number are stored.

Card

Card works as a drop in addition to your current credit card form. No need edit input names or HTML — you can leave everything as is. There are no images used. The credit cards and logos are all hand-coded with HTML and CSS.

Guardian jQuery Plugin

Guardian is a all-purpose form validation jQuery plugin. It was designed to be flexible and easy to extend to meet any need.

fileUploader

Bootstrap 3 Contact Form with Google’s reCaptcha

A simple bootstrap 3 contact form using Google’s reCAPTCHA. Submitted messages are sent to a specified email address using SMTP with support for SSL or TLS transport.

jQuery FileStyle

The jQuery Filestyle this is a jQuery plugin for filestyle you forget to turn the input file’s default browser. Customize as you like, it’s yours now.

This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.

jQuery-form-serializer

Real-Time Search in JavaScript

smartselect

SmartSelect is a jQuery multiselect and tree / hierarchy select plugin with bootstrap style. It is 10x faster than similar plugins and supports complex data relations.

Multiselect

This is a small jQuery plugin that helps you improve the user experience regarding the use of multiple cross selects. It is very easy to install and can be easily customized because it has callbacks for many events.

Bootstrap Maxlength

Bootstrap-Maxlength uses a Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute “maxlength” to work.

Quick[select]

Select boxes are a two tap/click operation. They take the user out of the flow of the form, and usually there are certain answers that will be more commonly chosen than others. Take the example above, most would reply with “yes” or “no”. Or maybe you would prefer people to give a definite yes/no answer. This plugin provides the ability to bring those options outside of the select list.

Validatrix

Just include the script & css and add the class .required to your required fields and paste the init code and that’s all, just 2kb.

Source: http://ift.tt/1E69Nta