create a unique contact form with css3 transitions

Inspired by the contact form on Clear Span Media website I decided to recreate an effect of a letter sliding out from an envelope on mouse hover. You may see the demo here.
contact form preview

Download the source files

Contact form
.zip 330 kB

It works in browsers supporting css3 transitions. In IE the envelope is not visible, I certainly could have played a bit more with jQuery to reproduce a similar effect, but it’s not a part of this tutorial.
Let’s start with the html structure:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact Form</title>
</head>
<body>
	<div id="wrap">
		<h1>Send a message</h1>
		<div id='form_wrap'>
			<form>
				<p>Hello Joe,</p>
				<label for="email">Your Message : </label>
				<textarea  name="message" value="Your Message" id="message" ></textarea>
				<p>Best,</p>	
				<label for="name">Name: </label>
				<input type="text" name="name" value="" id="name" />
				<label for="email">Email: </label>
				<input type="text" name="email" value="" id="email" />
				<input type="submit" name ="submit" value="Now, I send, thanks!" />
			</form>
		</div>
	</div>
</body>
</html>

The idea is as follows (I tried to illustrate it in the scheme below): the #form_wrap is positioned relatively (top:0), with the envelope fixed to its bottom. The form is positioned relatively, with top:200px. The overlay is set to hidden for both form and #form_wrap. When mouse enters the #form_wrap its height and the height of form increase both of 350px, at the same time the top property of the #form_wrap changes to top:-200px.
contact scheme
We will need an envelope cut into two parts, the top part, visible over the letter (after.png) and the bottom part (before.png) partially covered by the letter. You’re welcome to use the .ai file available here.
envelopes Let’s start to complete the stylesheet:
contact schemeNext, we’ll add some styling to the form elements:

label {
			margin: 11px 20px 0 0; 
 			font-size: 16px; color: #b3aba1;
			text-transform: uppercase; 
			text-shadow: 0px 1px 0px #fff;
		}
	
input[type=text], textarea {
		font: 14px normal normal uppercase helvetica, arial, sans-serif;
		color: #7c7873;background:none;
		width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
		border:1px solid #f8f5f1;
		-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 1px #726959;
                -webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
                box-shadow:  inset 0px 0px 1px #b3a895;
		}	
	
textarea { height: 80px; padding-top:14px;}
		
textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);}
		
#form_wrap input[type=submit] {
		position:relative;font-family: 'YanoneKaffeesatzRegular'; 
		font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;
		width:100%; text-align:center; opacity:0;
		background:none;
		cursor: pointer;
		-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 
		}
		
#form_wrap:hover input[type=submit] {z-index:1;opacity:1;}
		
#form_wrap:hover input:hover[type=submit] {color:#435c70;}

So far we haven’t used the transition, click here to see where we are.

We will add the same transition to form and #form_wrap. The four parameters correspond to the transition property, duration, timing function and its delay.

  -webkit-transition: all 1s ease-in-out .3s;
  -moz-transition: all 1s ease-in-out .3s;
  -o-transition: all 1s ease-in-out .3s;
  transition: all 1s ease-in-out .3s;

Then we’ll add another transition to the input[type=submit] element. The first set of settings corresponds to the behavior when mouse leaves the #form_wrap, the second when it hovers the #form_wrap. I wanted to make sure that the submit element does not appear until the form and #form_wrap transition is finished. On the other hand it starts to disappear immediately when mouse leaves #form_wrap.


	#form_wrap input[type=submit] {
		-webkit-transition: opacity 0.6s ease-in-out 0s;
		-moz-transition: opacity .6s ease-in-out 0s;
		-o-transition: opacity .6s ease-in-out 0s;
		transition: opacity .6s ease-in-out 0s; 
		}
		
	#form_wrap:hover input[type=submit] {
		-webkit-transition: opacity .5s ease-in-out 1.3s;
		-moz-transition: opacity .5s ease-in-out 1.3s;
		-o-transition: opacity .5s ease-in-out 1.3s;
                transition: opacity .5s ease-in-out 1.3s;
		}
		

It’s almost ready, I will just add some jQuery so as it works in IE. The transition is similar, but not exactly the same:

<!--[if IE]><script>
	$(document).ready(function() { 
            $("#form_wrap").addClass('hide');
            $("#form_wrap").prepend( '<div id="before"></div>').append( '<div id="after"</div>');
            $("#form_wrap").hover(function(){
	         $(this).stop(true, false).animate({
	              height : '836px',
	              top : '-200px'
	         }, 2000); 	
            $('form').stop(true, false).animate({
		height : '580px'
		}, 2000, function(){
                         $('#form_wrap input[type=submit]').css({'z-index' : '1', 'opacity' : '1'})} ) }, function() {
		$('#form_wrap input[type=submit]').stop(true, true).css({ 'opacity' : '0'})
	        $(this).stop(true, false).animate({
			height : '446px',
			top : '0px'

		}, 2000); 	
		$('form').stop(true, false).animate({
				height : '200px'}, 2000)	
		})
})
</script><![endif]-->

You just need to add in the stylesheet #form_wrap.hide:after, #form_wrap.hide:before {display:none;} and

#before {position:absolute;
		  bottom:128px;left:0px;
		  background:url('images/before.png');
		  width:530px;height: 316px;}
	
#after {position:absolute;
		bottom:0px;left:0;
		background:url('images/after.png');
		width:530px;height: 260px; }

Looking forward to your comments, if you find this tutorial useful, please share and bookmark.