In this tutorial we will create a simple animated form switch with
three very common forms. The 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.
We will ensure that the form switch works as well when JavaScript is
disabled in which case we will simply jump to the other’s form page.
So, let’s begin by creating and styling the three forms.
We will ensure that the form switch works as well when JavaScript is
disabled in which case we will simply jump to the other’s form page.
So, let’s begin by creating and styling the three forms.
The Markup
We will create three different forms, a login form, a registration
form and a password reminder form with just one input field. They will
all have different sizes and numbers of inputs.
First, we will create a wrapper for all three forms.
<div id="form_wrapper" class="form_wrapper">
</div>
Then we will add each form element to the wrapper and insert the
necessary input fields. Each form is going to have a heading and a
bottom box with the submit button. The registration form, which will be
our first form, will have two columns that will float next to each
other:
<form class="register">
<h3>Register</h3>
<div class="column">
<div>
<label>First Name:</label>
<input type="text" />
</div>
<div>
<label>Last Name:</label>
<input type="text" />
</div>
<div>
<label>Website:</label>
<input type="text" value="http://"/>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text"/>
</div>
<div>
<label>Email:</label>
<input type="text" />
</div>
<div>
<label>Password:</label>
<input type="password" />
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
</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>
Now we will add the login form. This form is going to be the one
shown when the user visits the site. That’s why we will give it another
special class “active”:
<form class="login active">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" />
</div>
<div>
<label>Password:
<a href="forgot_password.html" rel="forgot_password" class="forgot linkform">
Forgot your password?
</a>
</label>
<input type="password" />
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" />
<span>Keep me logged in</span>
</div>
<input type="submit" value="Login"></input>
<a href="register.html" rel="register" class="linkform">
You don't have an account yet? Register here
</a>
<div class="clear"></div>
</div>
</form>
And finally, we will add the password reminder form:
<form class="forgot_password">
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" />
</div>
<div class="bottom">
<input type="submit" value="Send reminder"></input>
<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 link elements that point to another form will all share the class
“linkform” and in order for us to know which form to show when a user
clicks the link, we will add the reference into the “rel” attribute. For
example, the link “You don’t have an account? Register here” will have a
rel attribute value of “register” since we want to show the
registration form when we click on the link.
As you might have noticed, the “href” attribute will point to the
static HTML page with the respective form. The link from the previous
example will point to the index.html which contains our login form. This
link will come into use, when JavaScript is disabled.
Now, let’s spice these forms up using some neat CSS3 properties.
The CSS
Let’s start with the form wrapper. We will give it a white background
color, which will be the color we see, when the form is switching:
.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;
}
The heading of each form will have the following style:
.form_wrapper h3{
padding:20px 30px 20px 30px;
background-color:#444;
color:#fff;
font-size:25px;
border-bottom:1px solid #ddd;
}
We want the forms not be displayed initially, but we will add a class
that tells us that the form is active and should be visible:
.form_wrapper form{
display:none;
background:#fff;
}
form.active{
display:block;
}
We will define now the width for each form. In our JavaScript
function we will animate the form wrapper to the respective dimension:
form.login{
width:350px;
}
form.register{
width:550px;
}
form.forgot_password{
width:300px;
}
The columns in the registration form will be floating next to each other:
.form_wrapper .column{
width:47%;
float:left;
}
The links in all our forms will have the following style:
.form_wrapper a{
text-decoration:none;
color:#777;
font-size:12px;
}
.form_wrapper a:hover{
color:#000;
}
Label elements have an inline style by default. We want our labels to be block elements:
.form_wrapper label{
display:block;
padding:10px 30px 0px 30px;
margin:10px 0px 0px 0px;
}
We will style the inputs with some nice CSS3 properties, giving them a gradient as background and some neat box shadow:
.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
border: solid 1px #E5E5E5;
margin: 5px 30px 0px 30px;
padding: 9px;
display:block;
font-size:16px;
width:76%;
background: #FFFFFF;
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;
}
The bottom part of each form will be similar to the heading background:
.form_wrapper .bottom{
background-color:#444;
border-top:1px solid #ddd;
margin-top:20px;
clear:both;
color:#fff;
text-shadow:1px 1px 1px #000;
}
The link elements will have the following style:
.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;
}
We will make the wrapper for the remember me checkbox float:
.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;
}
The submit button will have a very subtle inset shadow, nothing special:
.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: 0 1px 0px #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-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;
}
And that’s all the style! Let’s add some Rock’n Roll with jQuery!
The JavaScript
The idea is to animate to the size of the new form and to switch to it, i.e. show it. So, first we will cache some elements:
var $form_wrapper = $('#form_wrapper'),
$currentForm = $form_wrapper.children('form.active'),
$linkform = $form_wrapper.find('.linkform');
We’ll get the width and height of each form to store it for later when we want to animate to it:
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
Now, we will call the function that sets the dimension of the wrapper to the one of the current form:
setWrapperWidth();
When we click a “switch link”, we want to hide the current form,
since we know that we’ll switch to another one. We’ll animate the form
wrapper’s width and height to the width and height of the new form.
After the animation is done, we show the new form:
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
$currentForm.removeClass('active');
$currentForm= $form_wrapper.children('form.'+target);
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
$currentForm.addClass('active');
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
The function that sets the width to the wrapper simply sets its css
properties. We want to ensure that the wrapper has the right width and
height set when we load the page.
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
For the demo we disabled the submit buttons. If you use them, you
will need to check which form is being submitted and give the class
“active” to the form you want to switch to, i.e. show:
$form_wrapper.find('input[type="submit"]')
.click(function(e){
e.preventDefault();
});
And that’s it! We really hope you enjoyed the tutorial and find it useful!
Download Source
