<style type="text/css">
div.d, #form, input.i, textarea.t, p.g {margin: 0; padding: 0; border: 0; outline: none;}
p.g {font-family:Comic Sans Ms; text-align:center; color: #FF9933; font-size:24px;}
#wrap {width:530px; margin:20px auto 0; height:700px;}
#form_wrap {overflow:hidden; height:446px; position:relative; top:0px;
-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;}
#form_wrap:before {content:"";
position:absolute;
bottom:128px;left:0px;
background:url('http://megascripts.ru/demo/kontakt_form/before.png');
width:530px;height: 316px;}
#form_wrap:after {content:"";position:absolute;
bottom:0px;left:0;
background:url('http://megascripts.ru/demo/kontakt_form/after.png');
width:530px;height: 260px; }
#form_wrap.hide:after, #form_wrap.hide:before {display:none; }
#form_wrap:hover {height:776px;top:-200px;}
#form {background:#ffddb6;
position:relative; top:200px;overflow:hidden;
height:200px;width:400px;margin:0px auto;padding:20px;
border: 1px solid #fff;
border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
-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;}
#form_wrap:hover #form {height:530px;}
label.l {
font-family:Comic Sans Ms; color: #B22222;
font-weight:bold;
margin: 11px 20px 0 0;
font-size: 15px;
text-transform: uppercase;
text-shadow: 0px 1px 0px #fff;}
input.i[type=text], textarea.t {
font: 14px normal normal uppercase helvetica, arial, 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.t { height: 80px; padding-top:14px;}
textarea.t:focus, input.i[type=text]:focus {background:rgba(255,255,255,.35);}
#form_wrap input.i [type=submit]{
position:relative;font-family: 'mikodacspcsregular';
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;
-webkit-transition: opacity .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.i [type=submit]{z-index:1;opacity:1;
-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;}
#form_wrap:hover input.i:hover [type=submit]{color:#435c70;}
</style>
<table id="table1">
<div class="d" id="wrap">
<div class="d" id="form_wrap">
<div id="form">
<p class="g">Здравствуйте, уважаемый !</p><br>
<label class="l">Имя: </label><input class="i" type="text" name="f4" value="" id="" /><br>
<label class="l">E-mail: </label><input class="i" type="text" name="f1" value="" id="" /><br>
<label class="l">Ваше сообщение : </label><br><textarea name="f3" class="t"></textarea><br>
<input class="i" type="submit" name ="submit" value="Готово. Отправить!"/>
</div>
</div>
</div>
</table>
