Gravity Registration Form with Jquery

HTML JAVASCRIPT JQUERY WEBDESIGN

{ 56 comments }

inShare3

Sometimes registration form decides your web application success rate, I feel the first step(registration) should be less fields and eye catching it will surely impress the users. I had designed a new style registration form with gravitational effect. I hope you like this. Thank you!

Download Script     Live Demo

Javascript Code
Contains javascipt code. $("#email").keyup(function(){}- email is the ID name of input field. Using $(this).attr("id") calling input field value. Fields validating using regular expressions.

Tutorial : Submit form with out refreshing page

More details Regular expressions

HTML Code
Contains simple HTMl code.

post

" >

email

">
Email: 

 
text" name="email" id="email" />
error">

Username: 
 
text" name="username" id="username" />
error">

Password: 
 
password" name="password" id="password" />
error">

submit" value=" Register " id='submit'/>

How to add new field

If you want to add new field eg: City. It's very simple just follow the step 

City HTML Code
Just include following code after the Password field. 

city

">
City: 

 
text" name="city" id="city" />
error">

City javascript code
You have to do small modification at Password code. Just replace $("li").next("li.submit") to$("li").next("li.city") 

// Regular Expression 
var ck_city = /^[A-Za-z0-9 -]{3,20}$/;
// City validation
$('#city').keyup(function()
{
var email=$(this).val();
if (!ck_city.test(email)) 
{
$(this).next().show().html("Enter valid city");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});

Final CSS Code
Here li {display:none} while page loading jquery displaying first list li:first email field.

ul
{
padding:0px;
margin:0px;
list-style:none;
}
li
{
padding:5px;
display:none;
}
label
{
font-size:14px;
font-weight:bold;
}
input[type="text"], input[type="password"]
{
border:solid 2px #009900;
font-size:14px;
padding:4px;
width:180px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="submit"]
{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
.error
{
font-size:11px;
color:#cc0000;
padding:4px;
}
#form
{
width:350px;
margin:0 auto;
margin-top:30px;
}