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.

65 thoughts on “create a unique contact form with css3 transitions”

    1. Thanks a lot,
      I don’t have a possibility to test it in IE9, I simply added display:none to the :after and :before elements in IE (the last part of the tutorial). Have you tried with or without that ?

  1. Thanks for all your comments, here is my jQuery version that was tested in IE7 and 8 :



    the divs #before and #after have the same styling as #form_wrap:before and #form_wrap:after, respectively.

  2. IE6 Correspondence


    $(document).ready(function() {
    $(“#form_wrap”).addClass(‘hide’);
    $(“#form_wrap”).prepend( ”).append( ”);
    $(“#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)
    })
    })

    $(document).ready(function(){ DD_belatedPNG.fix(‘.iepngfix’) });

  3. Hi, can i ask you how to make work at blogspot? i already try it but not working properly i hope you can help me because love it that cool contact form! thank you

  4. sry … iam new in this. I love this formular but i cant find where i can put my email in so the people who submit can send me the form :(. Maybe anyone can it explain it to me?

    Thank you

  5. Hi Peeha,

    I am testing ur demo with Chrome (the latest) on Windows 8. So it does its smooth slide but after filling out dummy comment, name and address and pressing “…send” it slides down, as intended, … and then slides back up. Just bc I did not moved my mouse away from the envelope.
    Which is pretty valid UX case.
    Any thoughts?
    I think someone needs to write an event Listener to wait until the user will deliberately choose to move cursor AWAY from the envelope completely after pressing “send” link. Then when cursor comes back into “area”, the script will execute its function and the form will slide-out.
    Nice job anyway.
    Thank you for sharing.

  6. DUDE DONT DELETE MAIN POST !!!! Lamao !!!

    but how to insert my email Address ???

    wery nice form does not work
    without recipient email its unusable !!! that tru

    i need insert main email adres as recipient email !!!

    1. These are just html and css files, to make it a working contact form you need to combine them with some php and javascript. This part was not discussed in this tutorial.
      You can use a working contact as a base and use the concept presented in this tutorial.

  7. Hi PeeHa, I find your blog amazing and look forward to using some of your tutorials. Do you have any recommendation for html5 editors? Free / open source that is….. Many thanks!
    Hanna

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">