Stretchy makes form element autosizing the way it should be, meaning that every text element box in your design expands to fit text inputs beautifully. (Everybody likes when things just happen automatically, right?)

This plugin can handle multiple form controls from text areas to inputs to selection menus. It has a tiny footprint at only 1.5 kb minified and is a standalone tool with no jQuery or other dependencies. It works with existing HTML and CSS — a real bonus if you want to add it to a site you already have. Stretchy also automatically accounts for newly added controls, requires to javascript knowledge to use and works in all modern web browsers, including Internet Explorer 9+.

Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX), but if you do need API methods, they are available in the documentation.

To use, just include the script anywhere in the website and you are ready to go!

This small plugin to style forms uniformly across all devices is easy to use and customize.

Formplate is available as a downloadable zip file, on Github and is also included automatically with Webplate downloads.

The plugin is best installed using Bowser and integrating Formplate requires jQuery and Modernizr, as well as dropping a copy of the css/icon-font-formplate folder into the CSS folder where the plugin will reside. Then to activate, you need to wrap form elements in a containing element with the class formplate and call the formplate plugin.

Then you are ready to use. The final step is to customize the plugin with a color scheme that matches your site aesthetic. You can also choose the desired color of your form hover and active states by adding a data attribute to the body tag. The color selections are grey, black, white, aqua, blue, green, orange, pink, purple, red, yellow, asbestos, asphalt, bondi-blue, grey-blue and silver.

Waves is a click effect tool inspired by Google’s Material Design. The plugin adds a simple wave (or ripple) to buttons and other user interface elements to show users that they have clicked the item.

The action event tool works with jQuery and Javascript event handlers such as Snarl.

You can get Waves pretty easily. Just download the file and install with Bower or NPM. Include the CSS and Javascript and its ready to use. For more advanced developers, the file is also available via LESS, SCSS, and SASS source.

Once Waves is installed, you can adjust a couple of simple parameters if you like and initialize the plugin. Waves works with all modern browsers including Internet Explorer 10+, Chrome 14+, Firefox 9+, Safari 5.1+, Opera 11.6+, iOS 6+, Windows Phone 8.1 and Android Browser 4+.

Labelmask is a tool to help you create accessible input hinting without using input masks. The simple plugin is ready to go after installation without a lot of fuss.

This plugin is based on the politespace tool, which adds spaces to numeric form values to increase readability in elements such as credit card numbers, phone numbers, etc.

Flexible floating form labels can make boring placeholders super fly. This plugin is based on the FloatLabel pattern by Matt Smith. With flyLabel.js, it’s easy to trigger custom behaviors on form labels.

Common uses of flyLabel include a classic style, a drop style, fly from right or left styles, jiggle and easy select styles.

The goal of flyLabels is not aesthetic, it’s more functional. The style, transitions and animations are all determined by CSS.

Getting started with the plugin is easy, download the snippet and add it to your site. You can call flyLabels() on a container element, and all the elements with class .fly-group will be automatically made awesome. (If you need more, there are some examples in the flyLabel documentation.)

Hate when users submit a form with an email address that just does not work? This little tool — addClassWhenEmail — solves that problem.

The plugin hides the submit button for email forms by default and shows it only when the user enters a valid email address. It works in that the Javascript sets a “trap” on the input field to check with a little help from RegExp if the typed text has “symptoms” of an actual email address. The check is performed with each symbol typed. In case of success, a custom class name is added; if not, it’s removed. The rest is be handled using CSS.

The tool works in a loop so that you can have multiple newsletter subscription forms on the page and each one will be served using this tool. If you need different configurations for each form, you can do that as well.

This tool can be installed in the form of a plugin or with the code. Both options are available in the documentation. The tool is also super-small and lightweight, so you won’t have to worry about it bogging down your website.

You can improve the credit card form on your website with just one line of code thanks to Card.

What can one line of code do? It will make your form more interactive and engaging.

• It includes animations for four different card types — Mastercard, Visa, Discover and American Express.
• It is designed using pure CSS, HTML and Javascript so you don’t have to worry about uploading images.
• It is free and open source.

Card works as a drop in addition to your current credit card form. There is no need edit input names or HTML — you can leave everything as is.

There are plenty of options when it comes to installation and usage for this tool. It can be used with or without jQuery.

And if you want to use the coded credit card icons without animation, that’s an option too. All of the instructions are easy to follow in the documentation. (And if you want to see this tool in action, the demo includes links to shops already using it.)

Add an icon picker to your website forms with fontIconPicker.

This is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside administration forms. The list of icons can be loaded manually using a select field, an array or object of icons or directly from a Fontello config.json or IcoMoon selection.json file.

The plugin comes with plenty of configuration options:

• Theme
• Source
• Empty Icon
• Icons Per Page
• Search
• Attributes
• Category Text

The added bonus with this plugin is that you can add your own theme with a few steps:

Using the theme parameter of the plugin settings, you can give custom classes to the icon picker and thereby change the appearance of individual pickers on the same page. For example if you pass theme: 'mytheme' then a class mytheme will be added to .icons-selector container. Then you can add custom styling using CSS selectors like .mytheme.icons-selector. For the sake of convention and to avoid CSS conflict, prefix your theme name with fip-. So the settings becomes theme: 'fip-mytheme' and CSS selector becomes .fip-mytheme.icons-selector.

This plugin is ready to go and compatible with the Firefox, Chrome, Internet Explorer and Opera browsers.

Fort is a modern progress bar for form completion. Just add the form and the Fort.js algorithm will take care of the rest. What makes this tool even better is that it’s super small and won’t bog down your website.

the progress bar design is simple, subtle and nifty. The default settings are for a fairly small bar, but you can increase the size to your liking for a more pronounced progress bar.

Using this tool couldn’t be easier. Insert fort.min.js and fort.min.css into the <head> then pop in an <input> into <div class="form">. Anything outside of the <div> won’t count. Then call the effect. That’s it!

The types of effects included in Fort include a solid default, gradient, sections, slash and merge. You can change the colors and and each of the color settings work together.

Fort works will all modern browsers including Safari 7+, Opera 21+, Firefox 29+, Chrome 34+ and Internet Explorer 8+.

Limits the amount of text that is permitted in a textarea

Animates placeholder carets on inputs and textareas.

For number, money and currency formatting

Progressively enhances credit card inputs to provide a skeuomorphic interface.

Create a sleek, intuitive credit card form.