create a unique contact form with css3 transitions

30/07/11

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.

62 Responses to “create a unique contact form with css3 transitions”

  1. Aleksandar

    Feb 1st, 2014

    Hey i want to ask, is it possible the envelope to be static, and just the letter slide from bottom to top.
    Many thanks!

  2. Cerebro Vasconcelos

    Feb 14th, 2014

    very createve

  3. Clotilde

    Feb 17th, 2014

    Hello,
    thank you for this nice css ! :)

    It works really well on laptops and android systems, but not on iphone or ipad.
    Can you suggest me how to deal with this problem?

    Thank you in advance !
    Clotilde

  4. tim

    Feb 24th, 2014

    hello,
    the downloadable zip doesnt work . . .
    doesnt include jquery files etc,

    please help
    thanks

  5. Val

    Mar 19th, 2014

    This is so cool! I was so wanting to use it until you put the images in .ai file. I have no way to open it. Which left me frustrated. I would like to suggest putting them in a .zip file. The majority of Internet users can open a .zip file. Very few can open a .ai file. One needs an expensive software to do that. Just saying. Well onto looking for another contact form.

  6. Nicky

    Mar 22nd, 2014

    Thank you for this wonderful form,

    I just have one question: Where do I put my “mailto” action?

    Please, help me!

    • Michel

      Apr 2nd, 2014

      Hi do you know Where do you put your “mailto” action?
      Thanks

  7. Raghavendra.Padasalgi

    Mar 24th, 2014

    I tried to send message it is not working.otherwise it is very nice. can u pl advise me how this be made to work.
    thanks

Leave a Reply