Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.
Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.
Today we wanted to share with you some great steps to get the perfect form: we will go through designing and usability you need to keep in mind, styling your form, spicing it up with some nice javascript effects, validating user’s input and finally getting it to work using PHP and Ajax.
1. Designing & Planning out your Form
Fancy Form Design Using CSS
A very useful CSS tutorial for making fancy forms with good usability.
Web Application Form Design
Read these guidelines to help you better position a form for your specific purpose, the combination of layout, visual elements, and content that’s right for you should still be verified through user testing or data analysis (completion rates, errors, etc.).
Web Form Design Patterns: Sign-Up Forms
A very interesting analysis of 100 popular web-sites where web-forms (should) matter. The second part of this analysis can be found here.
Sensible Forms: A Form Usability Checklist
Follow these guidelines, and you’ll be off to a good start for creating sensible forms by using a form usability checklist.
2. Styling Beautiful Forms
How to create perfect form markup and style it with CSS
This post will explain different choices when marking up the forms, and the CSS styling involved in making them cross-browser compatible.
Check out the vertical layout
the horizontal layout
Justify elements using jQuery and CSS
Justify elements using jQuery and CSS by calculating the width of a largest label and apply it to all labels. The jQuery function below does exactly this:
view plaincopy to clipboardprint?
- $(document).ready(function() {
- var max = 0;
- $("label").each(function(){
- if ($(this).width() > max)
- max = $(this).width();
- });
- $("label").width(max);
- });
$(document).ready(function() {
var max = 0;
$("label").each(function(){
if ($(this).width() > max)
max = $(this).width();
});
$("label").width(max);
});
CSSG Forms Collection
5 uniquely designed and coded web form styles.
FORM elements design using CSS and list (ul and dl)
Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. This post will explain another way to design FORM using list elements <ul> and <li>.
XHTML/CSS web forms: 5 simple techniques
This post explains 5 simple techniques for creating web forms.
Niceforms
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
2. Spicing up your Form
Changing Form Input Styles on Focus with jQuery
This tutorial will show you how to spice your form up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.
Form field hints with CSS and JavaScript
This tutorial will show you how to get a nice effect, as you tab through each input field, some helper text appears in box out to the right.
Context highlighting using jQuery
Learn how you can easily improve the user experience by highlighting the current context to enable users to focus only on a current action.
Improve form usability with auto messages
This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.
STYLING FILE INPUTS WITH CSS AND THE DOM
File inputs (<input type="file" />) are the bane of beautiful form design. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.
Show/hide a nice Login Panel using Mootools 1.2
In this tutorial, we will see how to create a sliding login/signup panel for your website using Mootools 1.2.
FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.
Validating Forms
Validation Hints for your form
As someone is typing an in an input field, it would be nice give feedback to the user as they are typing if they have satisfied that field’s validation criteria. This article will explain one way of achieving this effect using JavaScript and CSS.
Form.Check
A mootools script that allows you to validate different form fields before submission, Validation include: On leave a field & On submit the form. The message is displayed over the field, only one tip at once, tips don’t flash on submit if errors remain with the ability to close tips.
fValidator
fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. Here’s a brief list of the most important features: Works perfect with iMask as it’s complement, Multiple forms per page supported, Number of verified fields is not limited, Number of filters per field is not limited.
Validate
Validate is a mootools form validator script, having the following features: optional onFail function, optional onSuccess function which will overide the form submition, this can be used to validate an ajax form, onBlur validating, shows errors next to item or in a list.
PHP & Ajaxifing Forms
ProtoForm
ProtoFormClass is a Prototype class that allows you to very easily validate the forms fields and send data in ajax. Features include: 1) Check required fields (input, textarea, radio, select, checkbox) and validate Email, Date, Telephone number and Url. 2) Send data and show response with Ajax, highlight the form field on focus and on error. 3) Lightweight (only 4KB), unobtrusive and cross-browser (tested on Firefox, Opera, Safari, Internet Explorer 6/7)
4) allows you to validate more form on the same page.
Submit A Form Without Page Refresh using jQuery
In this tutorial you will learn how to submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background).
LightForm ::: Free Ajax/PHP Contact Form
LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.
Autosuggest / Autocomplete with Ajax
The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar).
About mooTools: “MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”. 
Description : SmoothScroll allows you to smoothly take a user to a specific portion of a page. By default, the browser “jerks” you up or down in the page when you click on an anchor — SmoothScroll lets you define the duration that it should take for a link to be scrolled down to.
Description : MultipleSelect allows you to add a custom style to html multiple select boxes. And you don’t even have to hold down the CTRL-key anymore when choosing multiple items.
Description : This is a sleek Typrewriter Effect built on MooTools.
Description : MooColumns is a MooTools 1.2 class that allows you to divide content into multiple columns quickly and easily.
Description : News Ticker is very simple and quick to implement within your web projects. It is inspired by the Newsvine Live panel, a lovely and smooth effect to display content.
Description : MooScroll is a MooTools 1.2 class that allows you to customize how the scrollbar looks on scrollable divs.
Description : This is a nice Login Pane that drops from the top of the page, very smoothly.
Description : Kroppr is an unobtrusive script that will enhance any site that wants to offer an image cropping tool for its visitors. Unlike other scripts, Kroppr is able to ROTATE, zoom and move the image in the real time without using plugins – such as flash or java. The cropping is done after the user is satisfied with the settings. This way, the load put on the server is minimised and also the visitor’s experience.
Description : There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your download. Using MooTools, the CountDown plugin allows you to easily implement a similar system.
Description : People all over the world love Twitter because of how easy it is to use. All you need to do is type in your current status, click “Update”, and you are done. What most people probably do not know is how simple it is to emulate Twitters functionality. Using PHP, MySQL, and MooTools javascript, you can implement a Twitter-like status system in no time.
Description : Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where’s the originality? The author has created a fancy navigation menu that highlights navigation items and creates a chain effect.
Description : The factory has produced a multiple-select box, with "sifting" tool attached. Try searching for one of the items in the list, or typing a letter in there. Next to it is the exact same list rendered as a dropdown (takes about 5 seconds to make this transition).
Description : This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.
Description : By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it is easy to see and find the one of your liking. 
Description : SlideItMoo is a MooTools 1.2 slider for images, browser friendly and nicely degradable. All CSS styling is external. It can slide either by clicking the back – forward buttons or by mouse wheel. 
Description : This is an improved version of the reflection.js script rewritten for the mootools javascript framework. It allows you to add instantaneous reflection effects to your images in modern browsers, in less than 2kb.
Description : This is the official release of the unofficial MooTools Events Calendar. It is an embeddable web calendar that was built using the MooTools JavaScript framework. Currently, it is still under development, but may be sufficient for your needs.
Description : Why make the user submit their form if you can just use Ajax to let them know if it’s available right away? Here’s how you can implement a username available checker using MooTools 1.2.
Description : Moving your mouse over a tab in the main menu, the submenu display several links related to the "topic" of the tab. On the right of the navigation bar, clicking on Hide submenu link, the submenu disappears/appears with a nice toggle animation.
Description : This is Twitter-likechars counter example using MooTools. It is counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field.
Description : If you wish to display your flickr stats in your blog, on your page etc, you will need this nifty little widget. It is capable of retrieving your posted images, information about you on flickr, your most used tags and the user groups you are attending.
Description : CSS vertical menu with show/hide effects uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.
Description : With mooSlide you can call several sliders on one page, just define a new class instance and tell the script which div to use, which handler to use to toggle, and you are all set. This is a complete revamp of the origianl mooSlide, with added features.
Description : In a nut shell it is an image gallery, but this only scrathches the surface. Here are some of its features: autosetup graps all images inside a element ; autoresize on changes of window dimensions ; fullscreen option ; scrolling with mouse wheel ; scrolling with key input (left and right cursor) ; autoplay presentation loop ; reflections via javascript ; load images via json (with event or on startup) ; load images from a html-source with selector-filter ; creates the UI automatically ; UI skinable via CSS ; fullsize viewer option ; can run multiple instances.
Description : A smooth sliding effect.
Description: A marvellous interactive Photo Gallery. 
URL: 
Description: A (not so) basic 3D Carousel.
Description: Horizontal or Vertical bar and slider. 
Description: Dynamic color selector- colors swatch animate to pick and change the background.
Description: It show only part of your fullsize image, the image can then be scrolled by moving the mouse over it.
Description: A stylish tool tip demo.
Description: A simple but very useable Image gallery.
Description: A stylish and easy to use nav bar.
Description: A tree-like sliding navigation system.
Description: A lightbox that supports images, flash, video, mp3s, html.
Description: A horizontal menu, reveals more of the image as you rollover it.
Description: Tooltips with a difference.
Description: Simpliar and easier than SqueezeBox. Click on an image and the image will enlarge. Simple, the way I like it.
Description: A stylish and smooth accordian style navigation.
Description: This is by far and away the Photo Gallery with the most features. Very well done.
Description: The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox”. I really love this.
Description: You can load a div from one page into a div on this page.
Description: Just make a form, and this script will add the ability to resize each textarea.
Description: The first ever Time Picker that utilize a very easy drag and drop interface.
Description: Smooth and yes, SEXY sidebar menu.
Description: A smooth transition between images.
Description: An easy to use login form.
Description: Swf meets Ajax for beautiful uploads.
Description: A simple form validation.
Description: Sort and filter tables.
Description: MooTabs is tiny(3kb), as the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.
Description: A drag and Drop sortable list. Could be handy.
Description: Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements.
Description: This creates rounded corners on divs.
Description: Mediabox lets you open flash, video, and html content in a floating “lightbox” style window.
Description: A color picker, built on the mooTools Framework.
Description: An inline image popup, overlays and fades out the current page.
Description: This javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.
Description: A background image pops up, adding some livelyness to an otherwise dull menu.
Description: The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the canvas object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise.
Description: This is a collection of demos which explains how moo.rd works and how to work with moo.rd. 
Description: Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with canvas tag graphics.
