PolymerForm -jQuery plugin to create google polymer-like form easily

Demo

This is all made with PolymerForm.

You can change bar color to any color.

You can change bar height.

You can change the origin of the bar animation, add color to the label.

Get started

You can use PolymerForm with simple steps.

1. Import jQuery and PolymerForm.

                        <!-- CSS -->
<link rel="stylesheet" href="css/jquery.polymer-form.min.css"/>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.polymer-form.min.js"></script>

2. Create some input elements.

                        <input type="text" label="Name" name="name" class="demo-form">
<input type="password" label="Password" name="password" class="demo-form">

3. Kick polymerForm function.

                        $(document).ready(function(){
    $(".demo-form").polymerForm();
});

Result

API

You can use API to control appearance, as follows.

Change bar color

Use active-color property.

                        <input type="text" label="BarColor" active-color='#3F51B5' class="demo-form">

Change bar height

Use bar-height property.

                        <input type="text" label="BarHeight" bar-height='12px' class="demo-form">

Change position of the animation origin

Use origin property. It accepts 'center', 'left' and 'right'.

                        <input type="text" label="Origin" origin='left' bar-height='12px' active-color='#FF9800' class="demo-form">

Add color to label

Use origin property.

                        <input type="text" label="LabelColor" label-color="#F44336" bar-height='12px' active-color='#FF9800' class="demo-form">

Default value setting

Set value attribute as you usually do.

                        <input type="text" label="LabelColor" label-color="#F44336" bar-height='12px' active-color='#FF9800' class="demo-form" value="Default Value">

You can specify below property.

Property name	Meaning
label	Name of label (Default: "Name").
base-color	Base color of bar (Default: "#AAAAAA" ).
active-color	Active color of bar (Default: "#C4141A" ).
bar-height	Height of bar (Default: 2px).
label-color	Color of label (Default: "#999999" ).
origin	Origin of bar animation (Default: "center"). This property can accept "center", "left" and "right".
margin-top	Margin top of input (Default: 20px).
margin-bottom	Margin bottom of input (Default: 50px).

These properties are also passed as argument of polymerForm function.

                    $(document).ready(function(){
    $(".demo-form-by-arg").polymerForm({
        base_color: "#4CAF50",
        active_color: "#8BC34A",
        bar_height: "12px"
    });
});

Result