"Contact Us2"
Bootstrap 3.3.0 Snippet by ashutosh123

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form id="contact" action="" method="post"> <h3>Quick Contact</h3> <h4>Contact us today, and get reply with in 24 hours!</h4> <fieldset> <input placeholder="Your name" type="text" tabindex="1" required autofocus> </fieldset> <fieldset> <input placeholder="Your Email Address" type="email" tabindex="2" required> </fieldset> <fieldset> <input placeholder="Your Phone Number" type="tel" tabindex="3" required> </fieldset> <fieldset> <textarea placeholder="Type your Message Here...." tabindex="4" required></textarea> </fieldset> <fieldset> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> </form> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600); * { margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; } body { font-family:"Open Sans", Helvetica, Arial, sans-serif; font-weight:300; font-size: 12px; line-height:30px; color:#777; background:#fff; } .container { max-width:400px; width:100%; margin:0 auto; position:relative; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; } #contact { background:#F9F9F9; padding:25px; margin:50px 0; } #contact h3 { color: #F96; display: block; font-size: 30px; font-weight: 400; } #contact h4 { margin:5px 0 15px; display:block; font-size:13px; } fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea { width:100%; border:1px solid #CCC; background:#FFF; margin:0 0 5px; padding:10px; } #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact textarea:hover { -webkit-transition:border-color 0.3s ease-in-out; -moz-transition:border-color 0.3s ease-in-out; transition:border-color 0.3s ease-in-out; border:1px solid #AAA; } #contact textarea { height:100px; max-width:100%; resize:none; } #contact button[type="submit"] { cursor:pointer; width:100%; border:none; background:#0CF; color:#FFF; margin:0 0 5px; padding:10px; font-size:15px; } #contact button[type="submit"]:hover { background:#09C; -webkit-transition:background 0.3s ease-in-out; -moz-transition:background 0.3s ease-in-out; transition:background-color 0.3s ease-in-out; } #contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); } #contact input:focus, #contact textarea:focus { outline:0; border:1px solid #999; } ::-webkit-input-placeholder { color:#888; } :-moz-placeholder { color:#888; } ::-moz-placeholder { color:#888; } :-ms-input-placeholder { color:#888; }

Related: See More


Questions / Comments: