Jquery 类似于“联系我们”表单的聊天框

我见过很多网站，公司通常在右下角使用联系我们表单、登录或注册表单，如聊天框

每当我们悬停并单击时。将打开完整表单，用户可以提交数据

我还想在我的项目中应用它。是否有jquery插件或其他东西

请指导如何操作。

好的，给你，演示

HTML JQUERY

---

只需学习基本的css和表单

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

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

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