"feedbackForm"
Bootstrap 4.0.0 Snippet by landrik

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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="container"> <div class="feedback-widget"> <button class="btn btn-primary">Feedback</button> <div class="survey"> <div class="title"> <p> We'd love to hear your thoughts! </p> <a href="#" id="minimize">+ </a> </div> <div class="desc"> Please rate your experience & provide description of what you like or/and have issue with, so that we can continously improve our service. </div> <div class="rating"> <a class="rate-1" data-rate="1" href="#"></a> <a class="rate-2" data-rate="2" href="#"></a> <a class="rate-3" data-rate="3" href="#"></a> <a class="rate-4" data-rate="4" href="#"></a> <a class="rate-5 selected" data-rate="5" href="#"></a> </div> <textarea placeholder="Tell us more..."></textarea> <button class="cta-btn">Send via Email</button> </div> </div> </div>
.container { text-align:center; } .feedback-widget{ position: fixed; display: block; height: auto; width: 150px; bottom: 10px; right: 20px; padding: 0; border-radius: 50px; z-index: 100; box-shadow: none; transition: width .3s ease-in-out; } .feedback-widget.active { width: 300px; background: #f7f7f7; border-radius: 3px; box-shadow: 0px 3px 30px 2px rgba(0, 0, 0, 0.15); transition: box-shadow 4s .3s ease-in-out; border-radius: 3px; } button { background-color:#333; border-radius:50px; } .btn-primary{ position: absolute; bottom: 15px; right: 15px; padding: 20px 35px 20px 56px; letter-spacing: 1px; color: #fff; background: linear-gradient(left, #00A8B0, #1E94FF); background: -webkit-linear-gradient(left, #00A8B0, #1E94FF); transform: scale(1); opacity: 1; display: block; visibility: visible; transition: transform .4s .3s ease-in, opacity .5s .3s ease-in, box-shadow .8s .4s ease-in; } .btn:after { content: ''; background: url(https://allstateleadmarketplace.com/images/alm_white_icons/feedback-icon-white.png); width: 28px; height: 28px; display: block; position: absolute; margin-top: -23px; margin-left: -38px; background-size: cover; } .btn:hover { transition: box-shadow .2s ease-in-out,transform .2s ease-in-out; box-shadow: 0px 6px 20px 2px rgba(0, 0, 0, 0.25), inset #00A8B0 0px 20px 50px 29px; transform: translateY(-3px); } .feedback-widget.active .btn-primary{ visibility: hidden; opacity: 0; transform: scale(0); overflow: hidden; max-height: 0px; max-width: 0px; } .feedback-widget .survey{ overflow:hidden; max-height: 0px; max-width: 0px; opacity: 0; border-radius: 50px; z-index:4; } .feedback-widget.active .survey{ max-height: 600px; max-width: 300px; background: white; padding: 0px; text-align: center; opacity: 1; border-radius: 2px; transition: max-width .4s ease-in-out, max-height .9s .4s ease-in-out, border-radius .9s .2s ease-in, opacity .2s .3s ease-in; } [class^="rate"]{ float: right; padding: 5px 3px; font-size: 18px; color: #ddd; background-color: grey; -webkit-mask-image: url(https://image.flaticon.com/icons/svg/155/155276.svg); mask-image: url(https://image.flaticon.com/icons/svg/155/155276.svg); display: inline-block; height: 40px; width: 40px; margin: 0 5px 0 5px; opacity: .6; } [class^="rate"]:after{ content: '\f006'; font-family: FontAwesome; } .feedback-widget.active .survey .desc, .feedback-widget.active .survey .rating, .feedback-widget.active .survey textarea, .feedback-widget.active .survey button { margin: 20px; } .feedback-widget.active .survey textarea { width: 260px; height: 100px; border: none; border-radius: 11px; padding: 10px; } .feedback-widget.active .survey .cta-btn { position: relative; min-width: 70px; font-size: 13px; color: white; text-transform: uppercase; letter-spacing: 1px; padding: 8px 15px; background: #ff5d3c; background: linear-gradient(left, #ff5d3c, #fe2a66); background: -webkit-linear-gradient(left, #ff5d3c, #fe2a66); } .cta-btn:after { position: absolute; content: ''; top: 50%; left: 50%; }
$(document).ready(function(){ $(".btn").click(function(){ $(".feedback-widget").toggleClass("active"); }); });

Related: See More


Questions / Comments: