Follow up my previous post All You Need On Making Forms – Part 1 lets see how to make the forms look better.

To make your forms look different from the default you can choose to hard code it with CSS yourself or take some shortcuts like JavaScript. There are many form transformation scripts built on both jQuery and Mootools frameworks.

Fancy form for mootools

Sexy form for mootools

jqtransform for jQuery

Note: the jqtransforms web site is down at the moment.

You can see a demo here from CSS tricks

what do those scripts do? and how to choose the right one?

The theory of those scripts are similar. They add a bunch of code between each form elements and insert the ID or CLASS of their own. Then they replace the default form image with nicer ones. Once you use any of the form image replacement scripts of course you stuck with whatever image they provide.  So choose wisely. The good thing is there is much less work to do than hard coding it yourself.

Here is an example when I used jqtransform. As you can see, it replaced the text area with a three column table in order to hold the images.

use jqtransform

Step 3 Form validation and Tool tips

To Be Continued…Please tune in by subscribing to our feed

ADD TO

If this helps, why not tell your friends?

• 
• 
• 
• 
• 
• 
• 
• 
• 
•