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:

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:

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.

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.

.ai file is not a compress format is adobe illustrator format to edit projects. the file itself is compress in .zip inside the file there will be
a ai file, which you will be able to edit using adobe illustrator

Hi, it’s a very cool script, the result is so good! but i’m not a very experimented html user and i didn’t understand where i can configurate the mail address for reception, the mailto like Nikki and Michel said…
thx