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.

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

  1. Saad

    Aug 1st, 2011

    Amazing blog! Keep it up

  2. Rg Enzon

    Aug 1st, 2011

    Wow! Great stuff!

  3. Joyoge Design Bookmarks

    Aug 1st, 2011

    Nice contact form, thanks for the tut and share.

  4. Gent

    Aug 2nd, 2011

    How to change email in conttact form ??

  5. zy

    Aug 2nd, 2011

    very nice effect. maybe with some canvas you can animate the envelop more.

  6. Casino Area

    Aug 2nd, 2011

    Great job. The result will me better with an ajax transition, but the goal to reach was only with css.

  7. PeHaa

    Aug 2nd, 2011

    Thanks a lot for your comments !

  8. Andrea

    Aug 3rd, 2011

    Nice one! I think that with some jquery we could make it work for all older browser (IE7/8…)

  9. Ruan Aragão

    Aug 3rd, 2011

    Excelente, muito bom mesmo!

  10. edis

    Aug 3rd, 2011

    Great example, wish there was a jquery version :)

  11. Adrian Gonzales

    Aug 3rd, 2011

    Great work! I really like the letter coming up motion as well as the envelope dropping down. Very smooth.

  12. MARYAM

    Aug 3rd, 2011

    ŢҢáŋқś :|

  13. syndrael

    Aug 4th, 2011

    doesn’t work on IE9.. but the idea is great..

    • PeHaa

      Aug 4th, 2011

      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 ?

  14. Richard

    Aug 5th, 2011

    Great tutorial & thanks

  15. PeHaa

    Aug 6th, 2011

    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.

  16. Joe Vains

    Aug 8th, 2011

    Tu déchires grave… Sérieux. Joe content. :)

  17. Joeyj01

    Aug 10th, 2011

    very niice maaan.

  18. flypan

    Aug 15th, 2011

    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’) });

  19. Luke

    Aug 15th, 2011

    Great. Looks very good.

  20. Paul

    Aug 16th, 2011

    Thanks, works great.

  21. […] Unique Contact Form with CSS3 Transitions (Tutorial) […]

  22. Humming Bird

    Aug 18th, 2011

    Simply Wow! Nice Idea.

    Here is another example for nice css transitions – a gallery of content using CSS3

    http://www.hbirddesigns.com/~launch/mad-lab/from-the-mad-lab-building-a-gallery-of-content-using-pure-css/

  23. Pixelbox Design

    Sep 25th, 2011

    Good stuff, excellent, many thanks.

  24. Limo

    Nov 13th, 2011

    It’s awesome! Thanks for sharing such magic and making the beautiful tutorial!

  25. Fitted A&F Hats

    Dec 24th, 2011

    Great job. The result will me better with an ajax transition, but the goal to reach was only with css.

  26. […] 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. create a unique contact form with css3 transitions | PeHaa Blog […]

  27. Layout | Pearltrees

    Feb 7th, 2012

    […] 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. create a unique contact form with css3 transitions | PeHaa Blog […]

  28. […] Create a Unique Contact Form with CSS3 Transitions […]

  29. John

    Aug 28th, 2012

    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

  30. Yoko

    Sep 11th, 2012

    Great tutorial ! very inspirational :) have used it on my website

  31. Tutorials | Pearltrees

    Sep 28th, 2012

    […] create a unique contact form with css3 transitions | PeHaa Blog – pehaa.com (HTTP) How to do anything – http://www.wikihow.com (HTTP) Introduction […]

  32. nik

    Jan 4th, 2013

    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

  33. Mark

    Jan 8th, 2013

    Is there any way to get this to work on a touch screen such as an iPad?

  34. Andrey

    Jan 16th, 2013

    Thank you for nice tutorial of envelopes!

  35. Kolyan

    Jan 20th, 2013

    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.

  36. Vivek Moyal

    Jan 24th, 2013

    Attractive way of contact form

  37. raul

    Jan 28th, 2013

    How to change email in conttact form ??

  38. thilina

    Feb 16th, 2013

    hi
    excellent, many thanks.
    but how to insert my email Address?
    thanks

  39. parbhat jain

    Feb 23rd, 2013

    wow! great! i loved it! awesome
    Soon it will be on my website :p
    Thanks once again

  40. KreatywnaFabryka

    Mar 20th, 2013

    Thanks for this article. Nice !

  41. sanjay

    Mar 29th, 2013

    I took clues from teaxtarea and going to implement on my India Open Source related website going to launch on april 2013 at openplus.in/social

  42. Pali Madra

    Mar 30th, 2013

    Thank you for the great tutorial and another addition to my RSS feeds.

    IMHO in the image http://pehaa.com/wp-content/uploads/2011/07/css1.png which has CSS for the page there is a type. While styling the body tag the closing curly bracket is missing. To be sure I checked the demo page and found that to be the case.

    Look forward to more stuff from you in the future.

  43. heman78

    Apr 8th, 2013

    but how to insert my email Address where ??? the email hasnt recipient !!!!

  44. heman78

    Apr 8th, 2013

    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 !!!

    • PeHaa

      Apr 8th, 2013

      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.

  45. andel

    Apr 19th, 2013

    http://www.htmldrive.net/items/show/1255/Unique-css3-contact-form submit button is not working in IE9 browser please rectify it

  46. Hanna

    May 5th, 2013

    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

  47. FalySeeta

    Jun 4th, 2013

    awsome tutorial, thank you!!!

  48. Cotiga

    Jul 25th, 2013

    Là, je dit chapeau. Bravo !
    Et en 2011 en plus, un précurseur du HTML5, CSS3
    Merci

  49. Tomi

    Aug 26th, 2013

    That’s exactly what I was looking for, thanks. Your comments appended to the code are very useful.

  50. Dan Jones

    Sep 8th, 2013

    This is truly something else! Great work!

Leave a Reply