"Consultation Form Template"
Bootstrap 3.0.0 Snippet by Anita26

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div class="row"> <!-- consultation form --> <div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12"> <div class="consultantion-form"> <h3 class="mb30 text-center">Request A Consultation </h3> <form> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label sr-only" for="name"> First Name</label> <input type="text" placeholder="First Name" class="form-control" required> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label sr-only" for="name"> Last Name</label> <input type="text" placeholder="Last Name" class="form-control" required> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label sr-only" for="name">Phone</label> <input type="text" placeholder="Phone" class="form-control" required> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label sr-only" for="company">Company</label> <input type="text" placeholder="company" class="form-control" required> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="control-label sr-only" for="select"></label> <select name="select" class="form-control"> <option value="">I am interested in</option> <option value="">HR Audit & Assessment</option> <option value="">Legal & HR Compliance</option> <option value="">Employment Practices</option> </select> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb20"> <div class="form-group"> <label class="control-label sr-only" for="textarea"></label> <textarea class="form-control pdt20" id="textarea" name="textarea" rows="4" placeholder="Please describe your HR needs:"></textarea> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <button type="submit" name="singlebutton" class="btn btn-primary btn-lg ">submit</button> </div> </div> </form> </div> </div> </div> <!-- /.consultation form --> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> Created by <a href="https://easetemplate.com/downloads/hrms-human-resource-management-responsive-template/" target="_blank">easetemplate</a> </div> </div> </div>
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Lato', sans-serif; letter-spacing: 0px; font-size: 15px; color: #6b6c6d; font-weight: 400; line-height: 28px; } h1, h2, h3, h4, h5, h6 { color: #161718; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'Lato', sans-serif; } h1 { font-size: 30px; line-height: 42px; } h2 { font-size: 24px; line-height: 32px; font-weight: 400; } h3 { font-size: 21px; line-height: 30px; font-weight: 400; } h4 { font-size: 18px; line-height: 26px; font-weight: 400; } h5 { font-size: 13px; font-weight: 400; } h6 { font-size: 12px; font-weight: 400; } p { margin: 0 0 20px; line-height: 1.8; } p:last-child { margin: 0px; } ul, ol { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: #161718; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #0170a2; } label { } .control-label { font-size: 13px; text-transform: capitalize; color: #3c424b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } .form-control:focus { } .textarea.form-control { } .required { } .form-group { margin-bottom: 5px; } .form-control { border-radius: 0px; color: #656869; font-size: 16px; font-weight: 400; width: 100%; height: 52px; padding: 0px; line-height: 1.42857143; border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #a6a9ad; background-color: transparent; text-transform: capitalize; letter-spacing: 0px; margin-bottom: 10px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } .form-control:focus { color: #0084bf !important; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .input-group { position: relative; display: table; border-collapse: separate; } input[type=checkbox], input[type=radio] { margin: 8px 0 0; margin-top: 9px; line-height: normal; } input::-webkit-input-placeholder { color: #6b6c6d !important; } input:focus::-webkit-input-placeholder { color: #0084bf !important; bottom: 20px; position: relative; } textarea::-webkit-input-placeholder { color: #6b6c6d !important; } textarea:focus::-webkit-input-placeholder { color: #0084bf !important; bottom: 20px; position: relative; } .input-group-addon { background-color: transparent; border: 1px solid #e8ecf0; border-radius: 0px; } .focus { border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #a6a9ad; background-color: #fff; } .focus:focus { border-top: transparent; border-left: transparent; border-right: transparent; border-bottom: 1px solid #0084bf; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .has-success .form-control { border-color: #3c763d; background-color: #fff; box-shadow: none; } .has-success .form-control:focus { border-color: #3c763d; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .has-error .form-control { border-color: #a94442; background-color: #fff; box-shadow: none; } .has-error .form-control:focus { border-color: #a94442; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .consultantion-form { background-color: #f5f5f5; padding: 60px 50px; margin-top:50px } .btn { font-family: 'Lato', sans-serif; font-size: 16px; text-transform: capitalize; font-weight: 700; padding: 10px 20px; border-radius: 0px; line-height: 1.8; letter-spacing: 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; } .btn-primary { background-color: #0084bf; color: #fff; border: 2px solid #0084bf; } .btn-primary:hover { background-color: #0170a2; color: #fff; border: 2px solid #0170a2; } .pdt20{padding-top:20px;}

Related: See More


Questions / Comments: