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.
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.
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.
Let’s start to complete the stylesheet:
Next, 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.
Saad
Aug 1st, 2011
Amazing blog! Keep it up
Rg Enzon
Aug 1st, 2011
Wow! Great stuff!
Joyoge Design Bookmarks
Aug 1st, 2011
Nice contact form, thanks for the tut and share.
Gent
Aug 2nd, 2011
How to change email in conttact form ??
zy
Aug 2nd, 2011
very nice effect. maybe with some canvas you can animate the envelop more.
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.
PeHaa
Aug 2nd, 2011
Thanks a lot for your comments !
Andrea
Aug 3rd, 2011
Nice one! I think that with some jquery we could make it work for all older browser (IE7/8…)
Ruan Aragão
Aug 3rd, 2011
Excelente, muito bom mesmo!
edis
Aug 3rd, 2011
Great example, wish there was a jquery version :)
Adrian Gonzales
Aug 3rd, 2011
Great work! I really like the letter coming up motion as well as the envelope dropping down. Very smooth.
MARYAM
Aug 3rd, 2011
ŢҢáŋқś :|
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 ?
Richard
Aug 5th, 2011
Great tutorial & thanks
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.
Joe Vains
Aug 8th, 2011
Tu déchires grave… Sérieux. Joe content. :)
Joeyj01
Aug 10th, 2011
very niice maaan.
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’) });
Luke
Aug 15th, 2011
Great. Looks very good.
Paul
Aug 16th, 2011
Thanks, works great.
Weekly Design News – Resources, Tutorials and Freebies (N.99) | Typography Blog
Aug 17th, 2011
[...] Unique Contact Form with CSS3 Transitions (Tutorial) [...]
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/
Pixelbox Design
Sep 25th, 2011
Good stuff, excellent, many thanks.
Limo
Nov 13th, 2011
It’s awesome! Thanks for sharing such magic and making the beautiful tutorial!
Limo
Nov 28th, 2011
Fyi, I’ve built it into my wordpress theme and it works great!
You can find the final effect here:
http://avivastudio.com/contact
Many thanks a again!
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.
Corporate website contact page by politicus - Pearltrees
Jan 7th, 2012
[...] 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 [...]
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 [...]