jQueryを使ったスライドインするコンタクトフォームの作り方

以下ソースです。

XHTMLには、label要素にCSSでブロック要素にしているところにアクセシビリティを考慮したマークアップとなっています。

javascriptでは、slideDownの値を変えることで、スライドインするアニメーションの変化を加えれると思います。

XHTML

<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>

CSS

#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;
}

JavaScript

$(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);
}

上記のソースのダウンロードはコチラから