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

form0810181.jpg
Design Shackより、jQueryを使ったスライドインするコンタクトフォームの作り方の紹介です。

デモページはコチラから、ページ右側上部の「Contact Us」をクリックするとスライドインします。

以下ソースです。

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

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