<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="wrapper"> <div class="contact-form-page"> <div class="form-head"> <div class="header-btn"> <a class="top-btn" href="#"><i class="fa fa-times"></i></a> </div> </div> <h1>Support, we are online</h1> <form> <div class="form-group"> <label for="exampleInputText">Name</label> <input type="text" class="form-control" required="required"> </div> <div class="form-group"> <label for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" required="required"> </div> <div class="form-group"> <label for="exampleInputMessage">Message</label> <textarea class="form-control" rows="3" required="required"></textarea> </div> <button type="submit" class="btn btn-primary mt-2">Send</button> </form> </div> <a class="buttom-btn" href="#"><i class="fa-solid fa-xmark"></i></a> </div> </div> </div>

.contact-form-page{ height: 50px; width: 50px; display: block; border-radius: 50%; position: absolute; bottom: 42px; right: 42px; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: #000000; } .show-profile{ background: #000; height: 500px; display: block; width: 336px; bottom: 0; right: 0; position: absolute; overflow-y: scroll; border-radius: 0; padding-bottom: 30px; } .form-profile-img{ float: left; } .form-profile-img img{ border-radius: 50%; margin: 20px 0 0 14px; } .contact-form-page h1{ font-size: 18px; color: #fff; margin: 20px 26px; padding: 0px; line-height: 29px; padding-right: 30px; } .top-btn{ position: absolute; top: 15px; right: 15px; background: #000; color: #fff; padding: 15px 0; text-align: center; width: 60px; height: 60px; border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; } .top-btn:hover{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); background: #000; color: #fff } .header-btn, .footer-btn a{ font-size: 20px; color: #fff; background: #3aa8db; float: right; } .form-head{ display: block; } .cancel-btn-img{ position: relative; } .footer-btn{ position: relative; } .buttom-btn{ position: absolute; bottom: 30px; right: 30px; background: #000; color: #fff; padding: 21px; text-align: center; width: 75px; height: 75px; border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 1; } .buttom-btn i{ font-size: 30px; } .buttom-btn:hover{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); background:#000; color: #fff } input.form-control { height: 40px; border-radius: 0; outline: none; } textarea.form-control { height: 150px; border-radius: 0; } .contact-form-page form{ padding: 0 26px; } .form-group label{ font-size: 14px; color: #fff; } .top-btn-show{ opacity: 1 !important; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

$( document ).ready(function() { $(".buttom-btn").click(function(){ $(".top-btn").addClass('top-btn-show'); $(".contact-form-page").addClass('show-profile'); $(this).addClass('buttom-btn-hide') }); $(".top-btn").click(function(){ $(".buttom-btn").removeClass('buttom-btn-hide'); $(".contact-form-page").removeClass('show-profile'); }); })