Thursday, 15 March 2012

jquery - Chat Box Like Contact Us form -


I have seen many websites, where usually the companies contact us, log in or sign in lower right corners such as chat box Up form

Every time we move and click opens a full form and the user can submit data.

I also want to apply it to my project, there is a jquery plug-in or something else.

Please guide how to do this.

OK, go here, demo

html
  & lt; Div id = "contact" & gt; & Lt; Div id = "button" & gt; & Lt; A & gt; Contact us & lt; / A & gt; & Lt; / Div & gt; & Lt; Form & gt; & Lt; Div & gt; & Lt; Label = "name" & gt; Name & lt; I class = "icon-star" & gt; & Lt; / I & gt; & Lt; / Label & gt; & Lt; Input id = "name" name = "name" type = "text" / & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Label for = "email" & gt; E-mail & lt; I class = "icon-star" & gt; & Lt; / I & gt; & Lt; / Label & gt; & Lt; Input id = "email" name = "email" type = "text" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Label & gt; Telephone & lt; / Labels & gt; & Lt; Input id = "phone" name = "phone" type = "text" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; Label = "message" & gt; Message & lt; I class = "icon-star" & gt; & Lt; / I & gt; & Lt; / Label & gt; & Lt; Textarea id = "message" name = "message" cols = "" rows = "" & gt; & Lt; / Textarea & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input id = "send" name = "send" type = "submit" value = "send" /> & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Div & gt;   

css
  body {margin: 0; Padding: 0;} # contact {status: absolute; Correct: 2px; Bottom: 2px; Width: 270px; Font-size: 12px; } # Contact # button {status: relative; Correct: 0; Bottom: 0; Padding: 0,0200 px; } # Contact #button a {padding: 0 5px; Text-align: OK, background: green; Cursor: indicator; } # Contact Form {Limit: 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'). 'Click', function () {$ ('# contact form'). Slide toggle ('slow');});});    

No comments:

Post a Comment