聊天框Like Contact Us表格

Question

我看到很多網站，通常公司使用聯繫我們窗體，登錄或在右下角像聊天框註冊表單。

每當我們懸停和點擊。一個完整的表單打開並且用戶可以提交數據。

我也想將它應用到我的項目中。有沒有jQuery插件或其他東西。

請指導如何做到這一點。

Answer 1

好了，在這裏你走，DEMO http://jsfiddle.net/yeyene/fpPJz/1/

HTML

<div id="contact"> 
    <div id="button"><a>Contact Us</a></div> 
    <form> 
     <div> 
      <label for="name">Name<i class="icon-star"></i></label> 
      <input id="name" name="name" type="text" /> 
     </div> 
     <div> 
      <label for="email">E-mail<i class="icon-star"></i></label> 
      <input id="email" name="email" type="text" /> 
     </div> 
     <div> 
      <label>Telephone</label> 
      <input id="phone" name="phone" type="text" /> 
     </div>        
     <div> 
      <label for="message">Message<i class="icon-star"></i></label> 
      <textarea id="message" name="message" cols="" rows=""></textarea> 
     </div>        
     <div> 
      <input id="send" name="send" type="submit" value="Send" /> 
     </div> 
    </form>  
</div> 

CSS

body{margin:0;padding:0;} 
#contact { 
    position:absolute; 
    right:2px; 
    bottom:2px; 
    width:270px; 
    font-size:12px; 
} 
#contact #button{ 
    position:relative; 
    right:0; 
    bottom:0; 
    padding:0 0 0 200px; 
} 
#contact #button a{ 
    padding:0 5px; 
    text-align:right; 
    background:green; 
    cursor:pointer; 
} 
#contact form{ 
    border:1px solid #666; 
    background:#dfdfdf; 
    padding:10px; 
    display:none; 
} 
form label {float:left;width:40%;} 
form input[type=text] {float:left;width:50%;} 
form input[type=text] {float:left;width:50%;} 

JQUERY

$(document).ready(function(){ 
    $('#contact a').on('click',function(){ 
     $('#contact form').slideToggle('slow'); 
    }); 
});