Introduction

This jQuery Plugin allows you to skin standard form elements like select, input and textarea. Just edit the css file to customize your form. It works (I've tested) on IE 7+, Firefox 3+, Chrome 4+, Safari 3+, Opera 6+.

Requires jQuery v1.3.2 or later
Take a look at the demo page.

1. Integration

Include the following script and stylesheet in your head of your HTML-Document:

<head>
    <link type="text/css" rel="stylesheet" href="jquery.formdesigner.css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.formdesigner-1.0.0-min.js"></script>
</head>

2. Initialization

Add the classes "formDesigner" (or seperate) and "formDesignerSkip" to form element and initialize per jQuery(".formDesigner").formDesigner();.

<form class="formDesigner formDesignerSkip" action="" method="post">
    
    <select name="myTestBox_1" class="myCustomClass">
        <option value="">please choose</option>
        <option value="1">test 1</option>
        <option value="2">test 2</option>
        <option value="3">test 3</option>
    </select>
    <br /><br />
    
    
    <input id="inputRadio_1" class="myCustomClassForRadio" type="radio" name="myTestBox_3" value="1" /> 
    <label for="inputRadio_1">Radio Button 1</label>
    
    <input id="inputRadio_2" class="myCustomClassForRadio" type="radio" name="myTestBox_3" value="2" /> 
    <label for="inputRadio_2">Radio Button 2</label>
    
    <input id="inputRadio_3" class="myCustomClassForRadio" type="radio" name="myTestBox_3" value="3" /> 
    <label for="inputRadio_3">Radio Button 3</label>
    <br /><br />


    <input id="inputCheckbox_1" class="myCustomClassForCheckbox" type="checkbox" name="myTestBox_5" value="1" /> 
    <label for="inputCheckbox_1">Checkbox 1</label>
    
    <input id="inputCheckbox_2" class="myCustomClassForCheckbox" type="checkbox" name="myTestBox_5" value="2" /> 
    <label for="inputCheckbox_2">Checkbox 2</label>
    
    <input id="inputCheckbox_3" class="myCustomClassForCheckbox" type="checkbox" name="myTestBox_5" value="3" /> 
    <label for="inputCheckbox_3">Checkbox 3</label>
    <br /><br />
    
    
    <label for="inputText_1">Input Textfield 1</label>
    <input id="inputText_1" class="myCustomClassForInput" type="text" name="myTestBox_7" value="" maxlength="255" />
    <br /><br />
    
    
    <label for="textarea_1">Textarea</label>
    <textarea id="textarea_1" class="myCustomClassForTextarea" name="myTestBox_9" cols="50" rows="10"></textarea>
    <br /><br />
    
    <input type="submit" name="submitFormSubmit" value="Submit">
        
</form>
<script type="text/javascript">
/* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery(".formDesigner").formDesigner();
    });
/* ]]> */
</script>

3. Customize CSS

Just edit the default css file "jquery.formdesigner-skin-default.css" or copy/rename it to customize your form, that's it.

Call function after init

<script type="text/javascript">
/* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery(".formDesigner").formDesigner({
            callFunctionAfterInit : function(){
                alert("is initialized");
            }
        });
    });
/* ]]> */
</script>

Release Notes

2010-11-06 / 1.0.0

initial commit of jquery.formdesigner-1.0.0