jQuery plugin : jqTransform

To unpack it on window, please use 7-zip or other but do not use windows embeded unpacker.

This plugin is a jQuery styling plugin wich allows you to skin form elements.

Here is a default form. Your browser, depending on your OS, skins the form as it wants.

Then here is the same Form skinned with your own options whatever the browser you use.

Pay attention to details, see how the inputs change their color both on mouse rollover and mouse click event.

Usage

1- Add javascript inclusion in the header section of your web page

//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

2- Write your form

<form class="jqtransform">
<div class="rowElem">
<label for="name">Name: </label>
<input type="text" name="name"              />
</div>
<div class="rowElem"><input type="submit" value="send"              /><div>
</form>

3- Finally use the plugin

After it, select the forms and call the jqTransform plugin. See some examples:

<script type="text/javascript">
$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form.jqtransform").jqTransform();
});
</script>

Additional information

Options available

Just edit the css file to customize your form, that's it.

Compatibility

We did our best to make it work on ie 6+, safari 2+, firefox 2+