When it comes to designing web forms, browsers can never agree on a de facto standard. plum.Form was built to work around browser limitations and give you complete control over the appearance of your forms.

Plum has 20 configuration options, including AJAX controls, in-field labels and error handling for file uploads. Along with complete design freedom, you also have the ability to validate form fields, adding an extra layer of usability to your site.

It’s fast, it’s powerful, and it’s exquisitly packaged into a file that's under 22 Kb. And if you use gzip, it’s under 7 Kb.

The limits of customization with plum.Form are only what you can imagine. Each element can be styled by utilizing simple CSS classes. Plum comes with two skins: the default skin and a dark skin with 5 colors.

If the packaged skins don't appeal to you, that's no problem! You can create your own from scratch, or try out some of our favorite web form elements on GraphicRiver.

Switch theme:   Default   •   Dark (Blue / Green / Orange / Red / Pink)

Keyboard navigation

Just as with a regular form, you can navigate through different elements with the keyboard. Try using the space bar to select checkboxes and radio buttons, arrow keys in select menus, and even typing an option in a select menu. The escape key will also close an open menu.

AJAX-ready

Usually, jQuery plugins are less than optimal when it comes to running an AJAX website. You need to use callback functions, wait for the content to finish loading, then call the plugin again.

Plum was built with AJAX in mind. That means you call the plugin one time and any forms you create on the fly will be given the power of Plum. Try it to see for yourself!

Checkboxes & checkbox groups

Checkbox groups can be created simply by adding a "check-all" class to each box you'd like to act as a handler.








Group handlers can be placed anywhere.

Radio buttons





Select menus

A basic select-one menu with a list of countries

Cascading: the second menu is enabled when an option in the first is chosen.

Running an action on open & close. For example, resizing the width.

A select-multiple menu. Multiple options can be chosen by holding down the CTRL (Command on a Mac) or SHIFT keys.

File uploads

In modern browsers, you can limit the size and type of each file. In this demo, you can upload a PNG or JPEG file, up to a limit of 2 Mb. In those same modern browsers, you will also have an upload progress bar as each file is uploaded.

Basic text fields





Field validation

Plum has multiple validation methods. It includes three pre-defined matching methods (email, telephone and URL) and two size methods: min and max. You can also match exact strings or create a completely custom method.

When a form is submitted, any invalid fields prevent data from being sent. By default, invalid fields have a quick "shake" animation applied to them to alert the user. This is a configurable option, so if you don't like the animation, you can turn it off.



Custom validation example: The two password fields must match and must contain 3 letters followed by 3 numbers.


Basic buttons