Jquery Animated Form Switching

In this tutorial, We will create a very simple jquery animated form. This idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.

So, Lets begin

The Markup

First, we will create a wrapper for all three forms

<div id=”form_wrapper”>
< !– We will add our forms here –>
</div>

Register Form

<form class="register">
<h3>Register</h3>
<div class="column">
<div>
    <label>First Name:</label>
    <input type="text" />
    <span class="error">This is an error</span>
</div>
<div>
    <label>Last Name:</label>
    <input type="text" />
    <span class="error">This is an error</span>
</div>
<div>
    <label>Website:</label>
    <input type="text" value="http://"/>
    <span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
    <label>Username:</label>
    <input type="text"/>
    <span class="error">This is an error</span>
</div>
<div>
    <label>Email:</label>
    <input type="text" />
    <span class="error">This is an error</span>
</div>
<div>
    <label>Password:</label>
    <input type="password" />
    <span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
    <input type="checkbox" />
    <span>Send me updates</span>
</div>
<input type="submit" value="Register" />
<a href="index.html" rel="login" class="linkform">You have an account already? Log in here</a>
<div class="clear"></div>
</div>
</form>

Login Form

<form class="login active">
<h3>Login</h3>
<div>
  <label>Username:</label>
  <input type="text" />
  <span class="error">This is an error</span>
</div>
<div>
  <label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
  <input type="password" />
  <span class="error">This is an error</span>
</div>
<div class="bottom">
  <div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
  <input type="submit" value="Login"/>
  <a href="register.html" rel="register" class="linkform">You don't have an account yet? Register here</a>
  <div class="clear"></div>
</div>
</form>

Password Reminder Form

<form class="forgot_password">
<h3>Forgot Password</h3>
<div>
    <label>Username or Email:</label>
    <input type="text" />
    <span class="error">This is an error</span>
</div>
<div class="bottom">
    <input type="submit" value="Send reminder"/>
    <a href="index.html" rel="login" class="linkform">Suddenly remebered? Log in here</a>
    <a href="register.html" rel="register" class="linkform">You don't have an account? Register here</a>
    <div class="clear"></div>
</div>
</form>

The CSS

/* Form Style */
.form_wrapper{
	background:#fff;
	border:1px solid #ddd;
	margin:0 auto;
	width:350px;
	font-size:16px;
	-moz-box-shadow:1px 1px 7px #ccc;
	-webkit-box-shadow:1px 1px 7px #ccc;
	box-shadow:1px 1px 7px #ccc;
}
.form_wrapper h3{
	padding:20px 30px 20px 30px;
	background-color:#0d4c6d;
	color:#fff;
	font-size:25px;
	border-bottom:1px solid #0b3f5a;
}
.form_wrapper form{ display:none; background:#fff;}
.form_wrapper .column{ width:47%; float:left;}
form.active{ display:block;}
form.login{ width:350px;}
form.register{ width:550px;}
form.forgot_password{ width:300px;}
.form_wrapper a{ text-decoration:none; color:#777; font-size:12px;}
.form_wrapper a:hover{ color:#000;}
.form_wrapper label{ display:block; padding:10px 30px 0px 30px;	margin:10px 0px 0px 0px;}
.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
	border: solid 1px #E5E5E5;
	background: #FFFFFF;
	margin: 5px 30px 0px 30px;
	padding: 9px;
	display:block;
	font-size:16px;
	width:76%;
	background: 
		-webkit-gradient(
			linear,
			left top,
			left 25,
			from(#FFFFFF),
			color-stop(4%, #EEEEEE),
			to(#FFFFFF)
		);
	background: 
		-moz-linear-gradient(
			top,
			#FFFFFF,
			#EEEEEE 1px,
			#FFFFFF 25px
			);
	-moz-box-shadow: 0px 0px 8px #f0f0f0;
	-webkit-box-shadow: 0px 0px 8px #f0f0f0;
	box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
	background:#feffef;
}
.form_wrapper .bottom{
	background-color:#0d4c6d;
	border-top:1px solid #0b3f5a;
	margin-top:20px;
	clear:both;
	color:#fff;
}
.form_wrapper .bottom a{
	display:block;
	clear:both;
	padding:10px 30px;
	text-align:right;
	color:#ffa800;
	text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
	float:right;
	font-style:italic;
	line-height:24px;
	color:#ffa800;
	text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{ color:#000;}
.form_wrapper div.remember{
	float:left;
	width:140px;
	margin:20px 0px 20px 30px;
	font-size:11px;
}
.form_wrapper div.remember input{ float:left; margin:2px 5px 0px 0px;}
.form_wrapper span.error{
	visibility:hidden;
	color:red;
	font-size:11px;
	font-style:italic;
	display:block;
	margin:4px 30px;
}
.form_wrapper input[type="submit"] {
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	padding: 8px 0 9px;
	text-align: center;
	width: 150px;
	cursor:pointer;
	float:right;
	margin:15px 20px 10px 10px;
	text-shadow: 0px 1px 0px #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
	background: #d9d9d9;
	-moz-box-shadow: 0px 0px 2px #eaeaea inset;
	-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
	box-shadow: 0px 0px 2px #eaeaea inset;
	color: #222;
}

The Javascript

The idea is to animate to the size of the new form and to switch to it.

//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');

Get the width and height of each form.

//get width and height of each form and store them for later						
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
    $theForm.hide();
$theForm.data({
    width : $theForm.width(),
    height : $theForm.height()
});
});

Now, call the function that sets the dimension of the wrapper to the one of the current form:

//set width and height of wrapper (same of current form)
setWrapperWidth();

Now, when we click a “switch link”, we want to hide the current form, we’ll switch to another form.

$linkform.bind('click',function(e){
var $link	= $(this);
var target	= $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
   .animate({
      width	: $currentForm.data('width') + 'px',
      height	: $currentForm.data('height') + 'px'
   },500,function(){
      //new form gets class active
      $currentForm.addClass('active');
      //show the new form
      $currentForm.fadeIn(400);
   });
});
e.preventDefault();
});

This function that sets the width and height to the wrapper simply sets its css properties.

function setWrapperWidth(){
  $form_wrapper.css({
      width	: $currentForm.data('width') + 'px',
      height	: $currentForm.data('height') + 'px'
  });
}

For demo we disabled the submit buttons.

$form_wrapper.find('input[type="submit"]')
.click(function(e){
  e.preventDefault();
});

Full code and working example – all in the Demo / Download

And that’s it. We hope this tutorial you really find useful.

3 replys to Jquery Animated Form Switching

Leave a Reply

Your email address will not be published. Required fields are marked *