<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 mt-50"> <div class="row"> <div class="col-md-12"> <h1 class="text-center">Click on the feedback button</h1> </div> </div> </div> <!--feedback-form--> <div id="feedback-form" class="feedback-form"> <a href="#" class="feedback-form-btn btn btn-success btn-lg" id="OpenForm">Feedback</a> <div class="feedback_form_area"> <div class="feedback_form_area_inner"> <h3>Give Feedback</h3> <form> <div class="form-group"> <label>Name</label> <input type="text" id="" class="custom-inp" /> </div> <div class="form-group"> <label>Email</label> <input type="email" id="" class="custom-inp" /> </div> <div class="form-group"> <label>Mobile</label> <input type="text" id="" class="custom-inp" /> </div> <div class="form-group"> <label>Query</label> <textarea id="" class="custom-inp-txt"></textarea> </div> <div class=""> <input type="submit" id="" class="btn btn-success" /> </div> </form> </div> </div> </div> <!--feedback-form-->

/*feedback_form_area*/ .feedback-form { position:fixed; top:15%; right:0; z-index:100; min-height:450px; } .feedback-form-show { right:0 !important; } .feedback_form_area { position:relative; display:none; overflow: hidden; background:rgba(0,0,0,0.8); } .feedback_form_area_inner { width:300px; min-height:450px; color:#fff; padding:15px; } .feedback_form_area h3 { margin-top:0; } .custom-inp { width:100%; height:35px; padding-left:5px; color:#fff; border:1px #fff solid; background:transparent; } .custom-inp-txt { width:100%; height:100px; padding:5px; color:#fff; border:1px #fff solid; background:transparent; } .feedback-form-btn { position: absolute; left: -81px; color: #fff; transform: rotate(90deg); top: 40%; border-radius:0; } @media only screen and (max-width: 320px) { .feedback_form_area_inner { width:260px; min-height:450px; color:#fff; padding:15px; } } .mt-50 { margin-top:50px; } }

$(document).ready(function(){ $("#OpenForm").click(function(){ $(".feedback_form_area").animate({ width: "toggle" }); }); });