Stretchy: Form Element Autosizing
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?)
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!
Formplate: Style Forms Uniformly Across all Devices
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.
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: Create Accessible Input Hinting
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.
flyLabel: Flexible Floating Form Labels
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.)
addClassWhenEmail: Hide the Submit Button for Email Forms
Hate when users submit a form with an email address that just does not work? This little tool — addClassWhenEmail — solves that problem.
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.
Card: Improve the Credit Card Form
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 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.)
fontIconPicker: Include an Elegant Icon Picker
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:
- Empty Icon
- Icons Per Page
- Category Text
The added bonus with this plugin is that you can add your own theme with a few steps:
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
This plugin is ready to go and compatible with the Firefox, Chrome, Internet Explorer and Opera browsers.
Fort: jQuery Progress Bar for Form Completion
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.css into the
<head> then pop in an
<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.