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 [...]
35 Useful CSS3 Tutorials To Boost Your Skills « Resource Sharing ::: . . . . .
Jun 21st, 2012
[...] Create a Unique Contact Form with CSS3 Transitions [...]
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
Yoko
Sep 11th, 2012
Great tutorial ! very inspirational :) have used it on my website
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 [...]
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
Mark
Jan 8th, 2013
Is there any way to get this to work on a touch screen such as an iPad?
Andrey
Jan 16th, 2013
Thank you for nice tutorial of envelopes!
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.
Vivek Moyal
Jan 24th, 2013
Attractive way of contact form
raul
Jan 28th, 2013
How to change email in conttact form ??
thilina
Feb 16th, 2013
hi
excellent, many thanks.
but how to insert my email Address?
thanks
parbhat jain
Feb 23rd, 2013
wow! great! i loved it! awesome
Soon it will be on my website :p
Thanks once again
KreatywnaFabryka
Mar 20th, 2013
Thanks for this article. Nice !
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
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.
heman78
Apr 8th, 2013
but how to insert my email Address where ??? the email hasnt recipient !!!!
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.