Design your way

Have you tried creating the forms from scratch on your website? Why not use jQuery form plugins?

Having forms on your website just doesn’t really cut it. You need those forms to be validated to receive the appropriate data from the sender.

This way you don’t only stave off unwanted submissions, but you also guide your senders to fill out the forms.

Validating the date is just as important as having the forms themselves.

There are a few ways to create flawless forms, and the good news is that if you use some of the jQuery Form Plugins available, things get much easier.

jQuery form plugins to check out

Fileuploader

Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.

File preview with image thumbnail or icon
File image thumbnail can be generated in canvas to resize it perfectly for given with and height
Render synchron the file preview
File icon background is generated from file extension
Customize your own input and thumbnail elements
Responsive and fancy animations
Choose multiple files from different folders
Drag&Drop feature
Upload each file with Ajax
Upload synchron the files
Upload progressbar with many data available
Start, retry and cancel upload actions
Paste images from clipboard (only in Chrome)
Validate the file’s limit, size and extension. You can also use your own function
Edit mode for already uploaded files
All files are in one list in a hidden input
Use input HTML attributes to configurate it
HTML template renderer using Text variables
CSS file icon
PHP upload helper
PHP generates an array with many file informations
PHP can create a custom file name
API and more than 24 Callbacks to manipulate freely the appearance and functionality of your file input

A small jQuery plugin for handling showing and hiding things conditionally based on input – typically groups of form fields. It works using data attributes to keep all of the name/values for inputs directly in the markup and saves you the trouble of having to manually show/hide a bunch of stuff through JS, as well as improving maintenance if you need to change the name or value of an input you were listening to.

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

Credit card number formatting
Phone number formatting (i18n js lib separated for each country to reduce size)
Date formatting
Numeral formatting
Custom delimiter, prefix and blocks pattern
CommonJS / AMD mode

AttrValidate

A lightweight jQuery plugin for basic form validation using HTML5 form attributes. Recommended as a polyfill for older browsers which do not provide built-in validation.

Mobiscroll Forms

Mobiscroll Forms supports multiple themes for different platforms and the web – iOS, Android, Windows Phone.

Shipping with 13 elements for:

Single line and multiline text
Select styling
Buttons
Segmented control
Checkbox and checklist
Radio buttons
Switch
Stepper
Page styling & Typography
Slider
Progress
Alert, confirm and prompt
Toast and snackbar

Multipicker

Multipicker is jQuery plugin for selecting days, numbers or other elements, it supports multi selecting (like checkboxes) or single element selection (like radio buttons).

SmartWizard

Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. Based on the feedback from our users over the past years we have come up with the best ever built jQuery wizard plugin of all time.

Features:

Bootstrap support
Responsive themes
Heavily customizable toolbar, option to add extra buttons
Theme support with various themes included
Customizable css styles
Url navigation and step selection
Public methods for external function call
Enhanced event support
In-built wizard reset method
Ajax content loading with option to specify individual url for steps
Keyboard navigation

Contact Form to Google Spreadsheet

Create Contact Form in HTML and submit the data to Google Spreadsheet. Google re-captcha has been integrated to protect forms to be submitted by robots. Check the demo and documentation for more details.

Features:

Google Spreadsheet as database: Uses Google Spreadsheet to capture form responses. New responses can be appended at the top.
Simple Form: Designed with simple HTML5, CSS3 and bootstrap.
Protection: Google re-captcha to prevent spamming.
Customization: You can customize the form according to your own requirement.
Look and feel: Bootstrap two column layout, responsive. Shows status loader when the form is being submitted.
Notification: Can send notification email to the admin with submitted form data.

Hierarchy Select

A jQuery hierarchy select plugin used for selecting hierarchy structures in a selectbox format with autocomplete search.

SmartMenu

SmartMenu is a user-friendly, highly customizable and responsive jQuery mega menu plugin. It allows you to use multiple menus with different submenus.

Features:

Responsive design
Supports multiple instances
Horizontal (top, bottom) or Vertical (left, right) menu layouts
Mega / Flyout submenus
Pure CSS3 animations (fade, slide)
3 ways of dropdown (hover, click, toggle)
7 color skins which can be changed easily
Custom mega dropdowns, forms, search bar, social icons or HTML
12 columns fluid grid
You can add images, maps or videos

BunnyJS

BunnyJS is a modern Vanilla JS and ES6 library and next-generation front-end framework, package of small stand-alone components without dependencies.

No dependencies – can be used in any project anywhere anytime
0 learning curve – you can start right now, just plain JavaScript with simple architecture easy to maintain and extend
Designed in mind to build modern, complicated, real world business apps
Faster, simpler, enjoyable than any frontend framework
Large set of ready components, custom UI elements and utils

Dirrty

Dirrty lightweight jquery plugin to detect if the fields of a form had been modified.

If a field has been modified then the form is dirrty

Detect the moment when the form gets dirty, and trigger a custom event, for example enable a “save changes” button
Detect the moment when the form gets clean again, and trigger a custom event, for example disable the “save changes” button, cause is not necesary
Prompt the user to save changes before leaving if the form is dirty

Inputmask

jQuery inputmask is a jquery plugin which create an input mask.

An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers, …

Features:

easy to use
optional parts anywere in the mask
possibility to define aliases which hide complexity
date / datetime masks
numeric masks
lots of callbacks
non-greedy masks
many features can be enabled/disabled/configured by options
supports readonly/disabled/dir=”rtl” attributes
support data-inputmask attribute
multi-mask support

Formbase

Formbase is a better default styles for common input elements.Formbase eliminates cross browser bugs, inconsistencies across systems and applies a beautiful default styling to several input elements.

Works in all modern browsers (and IE11)
No JavaScript, just CSS
Works with inputs, textareas, checkboxes and radio buttons
Zero dependencies

File Input

File input fields look differently in all browsers. It’s a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in Twitter Bootstrap. This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons.

Form Designer

FORM-DESIGNER is a jQuery form builder tool which will help you to build an interactive form to use in your website template. This is mainly a HTML developer’s tool, but anyone who have a little knowledge about CSS and HTML structure and use of them, can use this tool.

I try to keep this jquery application very simple and user-friendly so that anyone can understand it within one or two tries.In this tool you will get total 7 option to create form from 7 different template and one option to create a custom form. As a final output, you will get the HTML,CSS and jQuery code here.

Choices.js

A vanilla, lightweight (~15kb gzipped), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

Lightweight
No jQuery dependency
Configurable sorting
Flexible styling
Fast search/filtering
Clean API
Right-to-left support

JSON Manager

JSON manager: jQuery plug-in that converts JS & JSON objects to HTML forms and back again.

Medea loves JSON. Give Medea a JSON object, even one with nested objects, and it will be converted into an HTML form. The form allows fields in the object to be edited, or deleted, or for new ones to be created. The modified object is returned via the submit event.

Spider

Mailgun API for mail validation online
50+ Form templates
Ajax form
Remote/server validation
Php ready form
Dynamic field
Credit card validator
Zip/Pin code validator
Semantic ui integrated
Custom error container
custom error handler
Multiple input validator As one
button style included
60+ button style included in package

TextArea

One of the most used, but under featured HTML controls, is the humble TEXTAREA control. This control is designed to accept large blocks of text from the user. A wide variety of plugins exist for the TEXTAREA that layer it with toolbars, auto-resizing, rich-text editing and the works.

More jQuery form plugins?

Keep scrolling.

There are more.

Character and Word Counter

This jQuery Word and character counter plug-in allows you to count characters or words, up or down. You can set a minimum or maximum goal for the counter to reach.

Create a custom message for your counter’s message
Force character/word limit on user to prevent typing
Works against copy/paster’s!

Addel

Addel is a simple & lightweight jQuery form plugin for powering UIs that enable dynamic addition & deletion of HTML elements, conceived with form elements in mind.

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.

Timon

With Timon – Step Form Wizard you will have power combo of 21 different styles, 8 different transition effects, validation in your step form, titles and subtitles with multiple step. , also Timon – Step Form Wizard has predefined set of form sizes from tiny to large. You can easily create and customize any form to fit your needs.

Features:

Step navigation
Fully responsive
Many options for design and function
Can be used for tabs
Step navigation
21 Style
8 transition effect

Select.js

Another one of these jQuery form plugins is Select.js. It 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.

Tagger Widget

jQuery plugin to turn a HTML select into an auto-suggesting, tagging widget. 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.

formBuilder

A jQuery plugin for drag and drop form creation. To start building forms with this plugin call formBuilder() on the textarea you would like to make your editor. FormBuilder takes a number of options and is translatable.

OrderNow

PHP Order Form will helps to get project orders from the clients for the people like web developers, corporates and freelancers easily. This form is PayPal integrated and admin functionalities are integrated.

Features:

Responsive design layout
PHP order form with MySql database
Multitab features
Cross-browser platform
Contents are organized in a user-friendly format
Admin can manage all contents and order management
Mail Templates are available in admin side

Easy Forms

Easy Forms is one of the jQuery form plugins in this article that will help you design and develop web forms quickly and easily. Actually, you will not need programming skills to make your forms work in minutes.

Build any type of online forms: Contact forms, Order forms, Registration forms, Online surveys, Trivias and more.
Drag & Drop Fields. No coding skills required.
HTML5 Fields Support
Create Multi-Step Forms
Bootstrap CSS Support
Theme & Template Managers
Advanced CSS Editor with Form Live Preview

Parsley

Parsley.js is a lightweight and feature-rich library that instead of validating forms with Javascript, it uses data attributes embedded in the DOM to achieve the same function. The surprisingly easy to configure plugin also allows you to override almost every default behavior so that it will fit in with your form requirements.

jQuery Validation Engine

When it comes to the jQuery Validation Engine, you don’t need to worry about the structure of your form as the plugin will create an error DIV and position it in the top right corner of the specified input, keeping both the forms code and validations seperate. Phis is probably the easiest validation solution in this article.

Validatr

Validatr uses HTML5 input attributes to perform validation, with support for color, date, email, number and range. The input types text, checkbox, radio…. are supported, but do not require the same level of validation.

Where possible, Validatr will use native validation, using Modernizr to test for support. If an input type is not supported it will use it’s own ruleset to supplement native validation. In both cases case, the validation message is shown.

Smoke

Smoke is a collection of components for Bootstrap – including a form validator. In comparison to the other Bootstrap validator (#4), it doesn’t use native browser validation – therefore error messages aren’t automatically localized and validation rules have to be specified using HTML5 and data attributes, as well as JavaScript.

Validetta

This plugin offers validation using a data attribute, with quite limited options. It comes with just the basic validation rules, everything else can be added with custom regular expressions – but there is no example demonstrating it. Compared to the other plugins, the only unique feature is that error messages are displayed in a bubble (see demo below).

jQuery.validity

A plugin to control validation with JavaScript only – no HTML5 or data attributes. While this may be helpful for dynamic validation rules, the plugin doesn’t offer enough options to make writing efficient. It even doesn’t allow using new HTML5 type attributes like email, nor does it provide a function to check if a form is valid – necessary in order to show a success message.

h5Validate

This plugin has unfortunately been abandoned by its creator (Eric Elliott). Consequently, the demo/documentation website returns a 404 and there are two dozen open issues. The plugin doesn’t automatically validate inputs by type and the following example even doesn’t show error messages. We’ve included it in the list, as Eric is looking for a new maintainer for the project, so there’s a chance that at some point in the future, it might get some life breathed back into it.