Add Animated Feedback Form On Website Using jQuery CSS3

Add Animated Feedback Form On Website Using jQuery CSS3 :
Do you want to Add Feedback Form On Website to collect feedback from your users. Then in this post I am going to share simple jQuery and CSS3 based code snippet to create Animated Feedback Form. which you can integrate on your website so that your visitor or user an quickly send you their feedback.
Feedback Form On Website Using jQuery CSS3


Add Animated Feedback Form On Website Using jQuery CSS3

Libraries

Load jQuery latest library on page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>

HTML

Create feedback form which display on click of feeback button.

<div class="feedback-box">
  <div class="content"> <a class='close' href="#"><i class="fa fa-times"></i></a>
    <div class="confirm">
      <h1><i class="fa fa-thumbs-up"></i> <strong>BOOOM!</strong> <span>We'll get right on that for ya</span></h1>
    </div>
    <header><i class="fa fa-bullhorn"></i> What can we Improve here for you!</header>
    <section>
      <textarea name="feedback"></textarea>
      <button id='submit'>Send Feedback</button>
    </section>
  </div>
</div>
<button id="feedback"><i class="fa fa-bullhorn"></i> Feedback</button>

CSS

Now styling feedback form and display animation.

button {
  background-color: #F58F23;
  color: #fff;
  border: none;
  padding: 10px 30px;
  cursor: pointer;
  font-weight: 300;
  font-size: 16px;
  -moz-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
 
button:active, button:focus { outline: none; }
 
button#feedback {
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-block;
  -moz-border-radius: 4px 0 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 0;
}
 
button:hover { background-color: #f3830b; }
 
.feedback-box {
  z-index: 10;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-block;
  width: 500px;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
  pointer-events: none;
}
 
.feedback-box .content {
  height: 335px;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  background: white;
  border: 1px solid #ddd;
  border-right: none;
  border-bottom: none;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -moz-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -moz-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -o-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -webkit-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
}
 
.feedback-box .confirm {
  z-index: 2;
  color: #fff;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #41C289;
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -moz-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -o-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  -webkit-transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
  transition: all 0.4s cubic-bezier(0.685, -0.245, 0.19, 1.315);
}
 
.feedback-box .confirm h1 {
  text-align: center;
  font-weight: 600;
  Text-transform: uppercase;
  font-size: 70px;
  margin-top: 115px;
  letter-spacing: -.08em;
  line-height: 1.2;
}
 
.feedback-box .confirm h1 i { vertical-align: 3px; }
 
.feedback-box .confirm h1 span {
  display: block;
  font-size: 40%;
  font-weight: 300;
  text-transform: none;
  letter-spacing: .02em;
}
 
.feedback-box.show { pointer-events: auto; }
 
.feedback-box.show .content {
  -moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
 
.feedback-box.show-confirm .confirm {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
 
.feedback-box.error textarea { border-color: red; }
 
.feedback-box header {
  z-index: 10;
  background-color: #F7F7F7;
  color: #F58F23;
  font-weight: 400;
  font-size: 18px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
 
.feedback-box section {
  padding: 30px;
  overflow: hidden;
  -moz-transition: all ease;
  -o-transition: all ease;
  -webkit-transition: all ease;
  transition: all ease;
}
 
.feedback-box section textarea {
  z-index: 0;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  color: #333;
  border: 1px solid #ddd;
  height: 150px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
 
.feedback-box section textarea:focus {
  outline: none;
  border: 1px solid #999;
}
 
.feedback-box section button {
  display: block;
  padding: 15px;
  text-align: center;
  width: 100%;
}



JS

Add below JS script to active the feedback form toggle.

(function($){
  var words = ["Boom!" , "Whammy!", "Booya!" , "Holler!", "Broskee!" , "All Good!" , "Right on!"];
  var feedback = $(".feedback-box");
 
  //Feedback Toggle
	$("#feedback").on("click" , function(){
		feedback.addClass("show");
	});
 
  //Close Trigger
	$(".close").on("click" , function(){
    feedback.removeClass("show");
    setTimeout(function(){ 
      feedback.removeClass("show-confirm").find("textarea").val('');
      console.log("reset")
    }, 1000);
	});
 
//Submit
  $("#submit").on("click" , function(){
     if( !$("textarea").val() ) {
       feedback.addClass("error");
       setTimeout(function(){
         feedback.removeClass("error");
       }, 500)
    }else{
      feedback.addClass("show-confirm");
      var randomWord = words[Math.floor(Math.random() * words.length)];
      $(".feedback-box h1 strong").text(randomWord);
 
      setTimeout(function(){
         feedback.removeClass("show").find("textarea").val('').delay(1000);
      },2000);
 
       setTimeout(function(){
         feedback.removeClass("show-confirm");
      },2200);
    }
  })
})(jQuery);

See live demo and download source code.

DEMO | DOWNLOAD

Visit official repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.