<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"> <div class="col-m-12 text-center"> <h2>Google Style Contact Form with white panel</h2> </div> <div class="col-sm-12 custom-box"> <div class="col-md-6 col-md-offset-3"> <div class="well form-well"> <div class="well form-well"> <legend class="blue-txt text-center">Contact US</legend> <form> <div class="group"> <input required="" type="text"> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input required="" type="text"> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> <div class="group"> <input required="" type="text"> <span class="highlight"></span> <span class="bar"></span> <label>Phone No</label> </div> <div class="group"> <textarea type="text" rows="5" required=""></textarea> <span class="highlight"></span> <span class="bar"></span> <label>Description</label> </div> <div class="group"> <center> <button type="submit" class="btn btn-warning">Submit <span class="glyphicon glyphicon-send"></span></button></center> </div> </form> </div> </div> </div> </div> </div> <h3 style="text-align:center">Find more about me fiverr.com/sangrai</h3>

.form-well { background: #fff; border-radius: 0; margin-bottom: 0; border:solid 1px #ccc; box-shadow:0 0 8px #000; } .form-well .form-well{ border:none; box-shadow:none; } .blue-txt { color: #0069a3; } .form-well legend { font-size: 25px; margin: 10px 0 25px; } .group { position: relative; margin-bottom: 35px; } input { font-size: 18px; padding: 5px 10px 10px 5px; display: block; width: 100%; border: none; border-bottom: 1px solid #fff; background: transparent; } input:focus { outline: none; } /* LABEL ======================================= */ .form-well form label { color: #484848; font-size: 18px; font-weight: normal; position: absolute; pointer-events: none; left: 10px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } /* active state */ .form-well form input:focus ~ label, .form-well form input:valid ~ label { top: -20px; font-size: 14px; color: #025789; left: 0; border: none; } .form-well form textarea:focus ~ label, .form-well form textarea:valid ~ label { top: -20px; font-size: 14px; color: #025789; left: 0; } /* BOTTOM BARS ================================= */ .bar { position: relative; display: block; width: 100%; } .bar:before, .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #28739c; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .bar:before { left: 50%; } .bar:after { right: 50%; } /* active state */ input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } .highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; } input:focus ~ .highlight { -webkit-animation: inputHighlighter 0.3s ease; -moz-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease; } .form-well form input, .form-well form textarea { color: #000 !important; border-bottom: solid 2px #ccc; width: 100%; height: 45px; } .form-well form textarea { height: 135px; border:none; border-bottom: solid 2px #ccc; border-top: solid 2px #ccc; } .form-well form .group label { color: #484848; } .form-well input:focus, .form-well form textarea:focus { padding: 5px 10px; } .form-well form .btn { background: #e88f02; width: 150px; color: #fff !important; padding: 10px; position: relative; font-size: 18px; letter-spacing: 1px; } @-webkit-keyframes inputHighlighter { from { background: #fff; } to { width: 0; background: transparent; } } @-moz-keyframes inputHighlighter { from { background: #fff; } to { width: 0; background: transparent; } } @keyframes inputHighlighter { from { background: #fff; } to { width: 0; background: transparent; } }