DesignShack is presenting a very nice tutorial on creating a virtual keyboard with jQuery (script can be downloaded).

Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).

It is very easy to add new characters to the keyboard if needed & the keyboard can be dragged to anywhere on the screen.

To check the demo, click here.

Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site.

Creating a better user experience in this bridge definitely helps improving the effect created in the eyes of the site visitors.

Depending on the features (or JS frameworks to be used) you may need, you can choose from these 16 very nice free Ajaxed contact forms & implement them easily to any website.

LightForm – Ajax / PHP Contact Form – Demo

It uses FormCheck2 for validation of fields and NiceForms to style form objects.

There is a simple captcha-like validation which ask the user a sum of 2 numbers. E-mails are sent via PHP & displays user IP, user agent and referrer in the message.

Proto Form – Contact Form With Protoype

A lightweight (only 4KB) & unobtrusive contact form that is built with Prototype.

The fields are validated & highlighted accordingly. The e-mail message is sent via Ajax and a success result is displayed.

It is a very handy form which can be installed easily.

jQuery – Ajax Contact Form (Tutorial & Files) – Demo

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP.

The form has an input validation. After the message is sent in th ebackgroung a "success" message is displayed to the user.

Very Chic Contact Form (English version) – Demo

This contact form uses Script.aculo.us & WForms.

An unique feature of it is, it tries to connect to the server of the sender to verify that it accepts mail to the address mentioned.

Message size can be limited and remaining characters are displayed in a box.

Read the rest of this entry »

Form Tools is a form processor, storage and data access script written in PHP and MySQL, designed to work with any existing web form.

By making small changes to a form, you can:

• store form submissions in a database
• provide an admin area to your clients for managing the forms
• mass data export via excel
• have printer-friendly pages
• sort data & edit submissions
• have e-mail notifications & more.

With one install of Form Tools, unlimited number of forms can be managed. The script is multi-lingual, it can be branded & easily customized.

Select Box Factory is a MooTools plugin that enables you to create better, smarter & advanced select boxes.

Using the plugin, you can

• style select boxes better
• enable multiple-selection
• add toggle effects
• use images
• ability to search within values
• & more.

Select Box Factory uses divs, rather than dropdowns & this is the factor that expands what can be done so much.

All the variations of the plugin can be enabled / disabled & implementing them are very easy.

ProtoForm is a "very easy to implement’, lightweight (4kb) & unobtrusive form validation & Ajaxed submit solution that depends on Prototype.

It can validate:

• e-mail
• date
• telephone number
• URL

Parameters are mentioned within the attributes like:

<input type="text" id="name_Req" name="name" title="Required! Try again" />

This makes it very easy to implement (a negative point can be requirement to define the ids in a specific way).

ProtoForm also sends data and shows response with Ajax, highlights the form field on focus and on error.

Custom Form Elements (CFE) is a JavaScript library for enhancing your form elements in means of design, usability & accessibility.

CFE aims to support all JavaScript frameworks (currently supports MooTools) & works in most A Grade browsers.

Some features of Custom Form Elements:

• unobstrusive
• completely styleable via CSS
• supports custom events like onHover-onClick
• can auto-generate tooltips from "title" attributes
• select all / deselect all functionality for checkboxes
• & more..

This is a JavaScript time picker with a drag’n drop enabled clock interface.

Usage is very simple, hour and minute hands can be dragged & dropped to the desired value. Clicking to the AM-PM also enables you to switch between them.

This time picker is highly configurable including the "starting hour", sizes & images used.

It requires Mootools and the document to be a XHTML doctype to run. Download package includes all the necessary resources including the PSD files.

CRIR is a combination of JavaScript & CSS that enables you to create custom checkbox and radio buttons.

Note: Seems like the website is currently down. Click here for the cached version from Yahoo.

Behind the scenes, CRIR does it with a visual trick by hiding the original form elements (but transferring any values to them) and replacing them with images.

This is a JavaScript solution which enables you to create custom HTML form elements (radio buttons, checkboxes, etc.)

The JavaScript simply:

• Hides form elements with class="styled"
• Sticks a span tag with a CSS class on it next to the element
• Adds mouse events to the span that handles the stages when it is clicked.

Formy is a simple-yet-functional CSS framework which enables you to create form layouts without tables, divs or lists.

Formy is created by Vladimir Carrer who had created the CSS print framework: Hartija (see WRD post). Thanks to him for the suggestion.

Formy uses Reset.css for maximum browser compatibility. 

Here is how a simple form works:

<label for="Name">Name:</label> <input type="text" name="Name" value="Lorem ipsum dolor" /><br />
<label for="City">City:</label> <input type="text" name="City" /><br />

With the download, there are already examples of vertical & horizontal forms.