<div class=”box”>
<div id=”contactFormContainer”>
<div id=”contactForm”>
<fieldset>
<label for=”Name”>Name *</label>
<input id=”name” type=”text” />
<label for=”Email”>Email address *</label>
<input id=”Email” type=”text” />
<label for=”Message”>Your message *</label>
<textarea id=”Message” rows=”3″ cols=”20″></textarea>
<input id=”sendMail” type=”submit” name=”submit” onclick=”closeForm()” />
<span id=”messageSent”>Your message has been sent successfully!</span>
</fieldset>
</div>
<div id=”contactLink”></div>
</div>
<div class=”header”>
<h1>
Company logo</h1>
</div>
…
</div>
</div>
The CSS Code
#contactFormContainer
{
position:absolute;
left:600px;
float:right;
}
#contactForm
{
height:277px;
width:351px;
background-image:url(’bkg.jpg’);
display:none;
}
#contactForm fieldset
{
padding:30px;
border:none;
}
#contactForm label
{
display:block;
color:#ffc400;
}
#contactForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#contactForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#contactForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#contactLink
{
height:40px;
width:351px;
background-image:url(’slidein_button.png’);
display:block;
cursor:pointer;
}
#messageSent
{
color:#ff9933;
display:none;
}
$(document).ready(function(){
$(”#contactLink”).click(function(){
if ($(”#contactForm”).is(”:hidden”)){
$(”#contactForm”).slideDown(”slow”);
}
else{
$(”#contactForm”).slideUp(”slow”);
}
});
});
function closeForm(){
$(”#messageSent”).show(”slow”);
setTimeout(’$(”#messageSent”).hide();$(”#contactForm”).slideUp(”slow”)’, 2000);
}