<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="sidebar"> <div class="toggle" id="contact_close"></div> <h2>Contact Us</h2> <div class="scroll"> <form> <input type="text" name="" placeholder="Name"> <input type="email" name="" placeholder="Email"> <input type="rel" name="" placeholder="Phone Number"> <textarea placeholder="Message here.."></textarea> <input type="submit" name="" value="send"> </form> </div> </div> <button class="fs-btn" id="contact_us"><div class="icon"><i class="fa fa-paper-plane" aria-hidden="true"></i></div>Contact us</button>

.sidebar{ position:fixed; top:50%; right:-100%; transform:translateY(-50%); width:350px; height:100vh; min-height:100%; padding:40px; background:#fff; box-shadow: 0 20px 50px rgba(0,0,0,.5); box-sizing:border-box; transition:0.5s; z-index: 9999; } .sidebar.active{ right:0; } .sidebar input, .sidebar textarea{ width:100%; height:36px; padding:5px; margin-bottom:10px; box-sizing:border-box; border:1px solid rgba(0,0,0,.5); outline:none; } .sidebar h2{ margin:0 0 20px; padding:0; } .sidebar textarea{ height:60px; resize:none; } .sidebar input[type="submit"]{ background:#00bcd4; color:#fff; cursor:pointer; border:none; font-size:18px; } .toggle{ position:absolute; height:48px; width:48px; text-align:center; cursor:pointer; background:#ca4040; top:50%; left:-48px; line-height:48px; } .toggle:before{ content:'\f003'; font-family:fontAwesome; font-size:18px; color:#fff; } .toggle.active:before{ content:'\f00d'; }

$(document).ready(function(){ $('#contact_us').click(function(){ $('.sidebar').toggleClass('active') $('.toggle').toggleClass('active') }) $('#contact_close').click(function(){ $('.sidebar').toggleClass('active') $('.toggle').toggleClass('active') }) })