To all who have left comments asking questions these past couple months, and those who may ask questions in the future: If you need help, please email me from my profile page. I’ve been quite busy and am just getting back on track. Email is the fastest way for me to help you.
plum.form is the perfect tool for designers who need to step over the boundaries of boring web forms. It simplifies the process of creating perfect forms that look beautiful and add extra features to your web site.
How does it work?
<form action="" method="post" enctype="multipart/form-data"> <input name="box1" type="checkbox" value="1"> <input name="box2" type="checkbox" value="2"> <input name="box3" type="radio" value="1"> <input name="box3" type="radio" value="2"> <input name="files" type="file"> <select name="menu"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <input type="submit"> </form>
For every element that’s targeted, Plum creates a “wrapper” that you can style with CSS. That wrapper is given very basic, memorable class names, like “select”, “file”, or “input checkbox disabled”. Because Plum uses the type of element as a class name, you can add special styles to specific fields. For example, you might add a nice icon to fields that have a “search” class (using
The underlying aspect of plum.Form is simplicity. It’s nothing more than a styling tool, which means you retain all functionality of a regular web form. Keyboard navigation still works (including typing the value of an option while focused on a select field), as does sending data back to your server. Plum is just there to make everything look nice and add an extra touch of flair.
- new in 1.4 AJAX-ready: Plum needs to be called only once. Any elements added to the page afterward are automatically run through Plum
- No extra HTML markup is required
- Tiny file size! Minified, plum.Form is under 20 Kb
- Style all parts of a form, including file input fields, drop-down (select) menus, check boxes, radio buttons, buttons, and text and password fields
- Supports check box groups with multiple states: none, all and mixed (some checked, some not)
- In-field labels that fade on focus and hide while typing
- Form validation with pre-defined checks (phone #, email address and content length) as well as custom methods
- Supports multiple file uploads
- Files can be uploaded through AJAX
- HTML5 browsers can show a progress bar on AJAX file uploads
- Limit file uploads to certain types, sizes and quantities
- Retains standard form functionality: plum.Form supports focusing on elements with the tab key and navigating select menus by typing option names or using arrow keys
- Supports cascading select menus
- Easily customizable to create new form skins
- Extensive documentation
- Simple to use: include the files, target your forms, and you’re done!
- Mozilla Firefox 3 or newer
- Apple Safari 3 or newer
- Google Chrome
- Opera 10 or newer
- Microsoft Internet Explorer 7 or newer