Wednesday, 10 December 2008

Useful resources to improve the look and features of HTML Forms

Are you looking for some useful tips to improve the look and features of your standard HTML FORM elements? In this post I suggest you some interesting resources about this topics.

Take a look around and add a comment to suggest new links. Thanks!

1. Niceforms 2.0
Niceforms is a script developed from Lucian Slatineanu 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. The script will basically transform standard form into this:



Using this script is very simple. You have to add a link to niceforms.js script in the <head> tag of the page:

<script language="javascript" type="text/javascript" src="niceforms.js"></script>

...so adding the following link for the default CSS theme:

<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" />

...and add the attribute class="niceform" in your form:

<form action="index.php" method="post" class="niceform">
...
</form>

The script is fully compatible and has been tested with most major browsers, with the exception of IE6.

Take a look at the Emblematic/Niceforms website


2. Spry Validation Form Widget
This widget provided from Adobe Labs uses Spry to implement easily validation features in your custom Forms. If you use Dreamweaver CS3 and Spry framework it's a quick choice to implement this kind of feature in your forms.

Spry Validation Widget


3. JavaScriptKit form articles
In this section of JavaScriptKit website you can find a lot of interest JavaScript example ready to use in your projects to enrich features of your forms such as Check required elements, Drop down date select, Limit number of checked checkboxes, Strip HTML tags...

Javascriptkit HTML Form articles


4. Zend_Form (Zend Framework)
If you are a PHP programmer I suggest you to take a look at Zend_Form, a component of the Zend Framework which gives you all the tools necessary to create forms and form elements via PHP code. Zend_Form helps you by simplifying the creation of these form elements as well as adding programmatic controls for validation, ordering, filtering, and grouping.

Take a look at Zend_Form


5. Customselect with icons
Paul from Adelaide Web Design released this jQuery plug-in (beta version) in order to design custom SELECT form which contains a specific icon for each element contained in the menu.

Take a look at this Cusomselect jQuery plug-in


6. JotForm
JotForm is an interestig web based WYSIWYG form builder. Its intuitive drag and drop user interface makes form building a breeze. Using JotForm, you can create forms, integrate them to your site and collect submissions from your visitors. JotForm now integrates with PayPal, Google Checkout, WorldPay, 2CheckOut, ClickBank and OneBip payment gateways, so you can collect payments from your users. Basic feauture is for free for basic usage.

JotForm


7. Secure AJAX / mootools contact form
This contact form uses the mootools 1.1 framework to check the form fields and give immediate feedback if the entered values are correct. The name only allows normal chars, the email is checked with regex for a correct syntax and the message field doesn't allow to enter web addresses as many spam emails would be send off that way. Furthermore any potentially dangerous characters will be removed from the input as < > and others.

MooTools Secure AJAX

Related Post
FORM elements design using CSS and list (ul and dl)
Beautiful CSS Form
Clean and pure CSS FORM design
Useful tips to enrich your HTML Forms

No comments:

Post a Comment