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