"star rating feedback form "
Bootstrap 3.0.0 Snippet by MohamedSamiKhiari

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script type="text/javascript" src="magicRating.js"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese" rel="stylesheet"> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade " id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content page1--> <div style="" class="modal-content" id="main_popup"> <div class="modal-body "> <div class="col-lg-12"> <button type="button" class="close close_model" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle "></span> </button> </div> <div class="img_main"> <img src="http://res.cloudinary.com/dxssokt4h/image/upload/v1509252236/img_1_hya4kw.jpg" /> </div> <div class="heading_msg"> <h3>Please help us serve you better by telling us about your product and service experience so far. We appreciate your business and want to make sure we meet your expectations.</h3> </div> <div class="row text-center give_feedback"> <button type="button" id="give_feedback" class="btn btn-default">Give Feedback</button> </div> </div> </div> <!--END Modal content page1--> <!-- Modal content page2--> <div id="page2" style="display:none;" class="modal-content" style="box-shadow:none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle "></span></button> <h4 class="modal-title">Section 2 | Customer Experience</h4> </div> <div class="modal-body second_tab"> <div class="row"> <div class="mobile_progress_bar"> <div class="text-left visible-xs" style="margin-bottom:40px;"> <div class="progress"> <div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> <strong>Your opinion Matters</strong> </div> </div> <div class="col-xs-12 col-lg-6 col-sm-12 col-md-6"> <div class="form-group"> <label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">a.</label> <div class="col-md-10 col-xs-12 col-sm-8"> <div class="mat-input"> <div class="mat-input-outer"> <input type="text" autocomplete="off" /> <label class="">Hello, What is your name</label> <div class="border"></div> </div> </div> </div> </div> </div> <div class="col-xs-12 col-lg-6 col-sm-12 col-md-6"> <div class="form-group"> <label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">b.</label> <div class="col-md-10 col-xs-12 col-sm-8"> <div class="mat-input"> <div class="mat-input-outer"> <input type="text" autocomplete="off" /> <label class="">Enter your email address</label> <div class="border"></div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-lg-6 col-sm-12 col-md-6"> <div class="form-group"> <label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">c.</label> <div class="col-md-10 col-sm-8 col-xs-12"> <div class="mat-input"> <div class="mat-input-outer"> <input type="text" autocomplete="off" /> <label class="">Which organization do you belong to?</label> <div class="border"></div> </div> </div> </div> </div> </div> <div class="col-xs-12 col-lg-6 col-sm-12 col-md-6"> <div class="form-group"> <label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">d.</label> <div class="col-md-10 col-xs-12 col-sm-8"> <div class="mat-input"> <div class="mat-input-outer"> <input type="text" autocomplete="off" /> <label class="">Give us your contact number (optional)</label> <div class="border"></div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-sm-12 col-md-12 hidden-xs"> <button type="button" id="ok" class="btn btn-default ok" data-dismiss="">Ok <span class="glyphicon glyphicon-ok"></span></button> </div> </div> <div class="row"> <div class="visible-xs text-center"> <button type="button" id="ok" class="btn btn-default ok" data-dismiss="">Ok <span class="glyphicon glyphicon-ok"></span></button></div> </div> </div> <div class="modal-footer"> <div class="row"> <div class="col-lg-6 col-sm-6 col-md-6 text-left hidden-xs"> <strong>Your opinion Matters</strong> <div class="progress"> <div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="col-lg-6 col-sm-6 col-md-6 hidden-xs"> <a href="#"><img src="images/1/up_arrow.png" id="arr1" style="margin-right:0px;"></a> <a href="#"><img src="images/1/down_arrow.png" id="arr2" /></a> </div> </div> </div> </div> <!-- END Modal content page2--> <!-- Modal content page3--> <div id="page3" style="display:none;" class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle "></span></button> <h4 class="modal-title">Section 2 | Customer Experience</h4> </div> <div class="mobile_progress_bar"> <div class="text-left visible-xs" style="margin-bottom:40px;"> <div class="progress"> <div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> <strong>Your opinion Matters</strong> </div> </div> <div class="modal-body row"> <div class="col-md-12"> <div class="col-md-6"> <div class="col-md-1 hidden-xs"> <h5>a.</h5> </div> <div class="col-md-11"> <h5> How would you rate the look and feel of the website? </h5> <span style="color:red" id="rating" class="rating" data-current-rating=0 data-icon-bad='fa fa-heart-o' data-icon-good='fa fa-heart'></span> </div> </div> <div class="col-md-6"> <div class="col-md-1 hidden-xs"> <h5>b.</h5> </div> <div class="col-md-11 hidden-xs"> <h5> How would you rate the look and feel of the website? </h5> <span style="color:#faa524;" id="rating" class="rating" data-current-rating=0 data-icon-bad='fa fa-thumbs-o-up' data-icon-good='fa fa-thumbs-up'></span> </div> </div> </div> <div class="col-md-12"> <div class="col-md-6"> <div class="col-md-1 hidden-xs"> <h5>c.</h5> </div> <div class="col-md-11"> <h5> How would you rate the look and feel of the website? </h5> <span style="color:#ff7429;" id="rating" class="rating" data-current-rating=3 data-icon-bad='fa fa-check-square-o' data-icon-good='fa fa-check'></span> </div> </div> <div class="col-md-6"> <div class="col-md-1 hidden-xs"> <h5>d.</h5> </div> <div class="col-md-11"> <h5> How would you rate the look and feel of the website? </h5> <span id="rating" style="color:#ff7429;" class="rating" data-current-rating=3 data-icon-bad='fa fa-star-o' data-icon-good='fa fa-star'></span> </div> </div> </div> <div class="col-md-12"> <div class="col-xs-12 col-lg-6 col-sm-12 col-md-6"> <div class="form-group"> <label for="input" class="control-label col-md-2 col-sm-2 hidden-xs">a.</label> <div class="col-md-10 col-xs-12 col-sm-8"> <div class="mat-input"> <div class="mat-input-outer" style="margin-bottom:35px;"> <input style="height:60px;" type="text" autocomplete="off" /> <label style="font-size: 15px; line-height: 20px;">Are there any comments or suggestions you'd like to share with us?</label> <div class="border"></div> </div> </div> </div> </div> </div> <div class="col-md-6"> <button type="button" id="ok2" class="btn btn-default ok" data-dismiss="">Ok <span class="glyphicon glyphicon-ok"></span></button></div> </div> </div> <div class="modal-footer col-md-12"> <div class="row"> <div class="col-lg-6 col-sm-6 col-md-6 text-left hidden-xs"> <strong>Your opinion Matters</strong> <div class="progress"> <div data-percentage="0%" style="width: 60%;" class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <div class="col-lg-6 col-sm-6 col-md-6 hidden-xs"> <a href="#"><img src="images/1/up_arrow.png" id="arr3" style="margin-right:0px;"></a> <a href="#"><img src="images/1/down_arrow.png" id="arr4" /></a> </div> </div> </div> </div> <!-- END Modal content page3--> <!-- Modal content page 4--> <div id="page4" style="display:none;" class="modal-content"> <div class="modal-body "> <div class="col-lg-12"> <button type="button" class="close close_model" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle "></span> </button> </div> <div class="thank_you_body"> <div class="heading_msg2"> <h3> <span>Thank you Umesh!</span><br> Your feedback was sent perfectly. We will work on it to improve our website. </h3> </div> <div class="row text-center give_feedback"> <button type="submit" class="btn btn-default " data-dismiss="modal">Close</button> </div> </div> </div> </div> <!--End Modal content page 4--> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#myModal").modal('show'); $("#give_feedback,#arr3").click(function() { $("#page2").show(); $("#page3").hide(); $("#page4").hide(); $("#main_popup").hide(); }); }); $("#ok,#arr2").click(function() { $("#page2").hide(); $("#page3").show(); $("#page4").hide(); $("#main_popup").hide(); }); $("#ok2,#arr4").click(function() { $("#page2").hide(); $("#page3").hide(); $("#page4").show(); $("#main_popup").hide(); }); $("#arr1").click(function() { $("#page2").hide(); $("#page3").hide(); $("#page4").hide(); $("#main_popup").show(); }); </script> <script> new WOW().init(); </script> <script> $(function() { $('.mat-input-outer label').click(function() { $(this).prev('input').focus(); }); $('.mat-input-outer input').focusin(function() { $(this).next('label').addClass('active'); }); $('.mat-input-outer input').focusout(function() { if (!$(this).val()) { $(this).next('label').removeClass('active'); } else { $(this).next('label').addClass('active'); } }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('.rating').magicRatingInit({ success: function(magicRatingWidget, rating) { alert(rating); }, iconGood: "fa-bicycle", iconBad: "fa-car", }); $(".rating2").magicRatingInit({ success: function(magicRatingWidget, rating) { alert(rating); } }) }); </script> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>
body { font-family: 'Montserrat', sans-serif; font-weight: 600; } .give_feedback .btn-default { color: #333; background: #ff7429; border-color: #ccc; border-radius: 0px; padding: 12px 60px; font-size: 20px; margin: 30px; color: #fff; font-weight: inherit; text-align: center; } .progress-bar-info { background-color: #ff7429 !important; } .ok { background-color: #ff7429 !important; padding: 9px 28px !important; border-radius: 0px !important; color: #fff; } .give_feedback .btn-default { color: #333; background: #ff7429; border-color: #ccc; border-radius: 0px; padding: 12px 60px; font-size: 20px; margin: 30px; color: #fff; font-weight: inherit; text-align: center; } .modal-dialog { width: 70% !important; height: auto; margin: 0px auto; padding: 0px; } .ok { background: orangered; padding: 9px 28px; border-radius: 0px; color: #fff; } .modal-content { border-radius: 5px; height: 520px; overflow: hidden; } .close_model { color: #000; } .close_model:hover { color: orangered; } .img_main img { width: 27%; } .img_main { text-align: center; } .heading_msg h3 { padding: 16px !important; font-size: 16px; margin: 10px 40px; font-weight: 400; text-align: center; line-height: 22px; } .heading_msg2 h3 { padding: 16px !important; font-size: 16px; margin: 10px 40px 10px 40px; font-weight: 400; text-align: center; line-height: 22px; } .heading_msg2 span { font-weight: 500; font-size: 22px; line-height: 50px; } .thank_you_body { margin: 90px 0px; } .modal-header h4 { margin: 10px 40px; font-size: 16px; line-height: 1.42857143; } .modal-content .fa { font-size: 2em; padding: 0px 5px 18px 0px; /* margin: 0px -8px; */ } .modal-content h5 { font-size: 15px; line-height: 17px; } /* .modal-body .btn-default { border-radius: 0px; background-color: #ff7429; color: #fff; width: 88px; height: 40px; border: none; } */ .modal-body { padding: 45px; padding-bottom: 15px; } /*MATERIAL INPUT*/ .mat-input { margin-left: -14%; width: 100%; } .mat-input-outer { display: table; width: 320px; position: relative; margin-bottom: 80px; } .mat-input-outer input { height: 32px; border-radius: 0; outline: none; border: none; width: 100%; padding: 0; font-family: Montserrat; font-size: 15px; font-weight: 500; } .mat-input-outer label { font-family: Montserrat; font-size: 15px; left: 0px; position: absolute; top: 1px; transition: .5s; color: #000; cursor: text; font-weight: normal; filter: alpha(opacity=40); } .mat-input-outer .border { height: 2px; background: #d2d2d2; transition: .3s; -webkit-transition: .3s; -ms-transition: .3s; } .mat-input-outer input+label.active { left: 0px; top: -20px; color: #ff5900; border: none; filter: alpha(opacity=100); } .modal-header .glyphicon-remove-circle { left: 2%; } .progress { height: 9px; margin-top: 10px; background-color: #ebeef1; background-image: none; margin-bottom: 4px; box-shadow: none; } .progress-bar-info { background-color: #ff7429; background-image: none; } .progress { width: 75%; } .second_tab { padding: 45px !important; font-weight: 500; } .modal-footer { padding: 20px 45px; } .data-icon-bad { color: red; } @media only screen and (max-width:768px) { .modal-dialog { width: 100% !important; height: auto !important; } .img_main img { width: 90%; } .heading_msg h3 { margin: 0px; font-size: 18px; /* margin: 10px 40px; */ font-weight: 400; text-align: center; line-height: 28px; } .modal-body { padding: 5px 25px !important; } .mat-input-outer label { font-family: Montserrat; font-size: 15px; left: 0px; position: absolute; top: 1px; transition: .5s; color: #000; cursor: text; font-weight: normal; filter: alpha(opacity=40); } .mat-input-outer input { height: 45px; border-radius: 0; outline: none; border: none; width: 100%; padding: 0; font-family: Montserrat; font-size: 15px; } .modal-content { border-radius: 5px; height: auto; padding: 20px 10px; margin-bottom: 10px; overflow: hidden; } .progress { width: 100%; } }
// Init function $.fn.magicRatingInit = function(config) { // Init each widget return by the selector for (widget of $(this)) { var magicRatingWidget = $(widget); //// Get datas //// // Icon + if (magicRatingWidget.data("iconGood") == null) { magicRatingWidget.data("iconGood", config.iconGood != null ? config.iconGood : "fa-star"); }; // Icon - if (magicRatingWidget.data("iconBad") == null) { magicRatingWidget.data("iconBad", config.iconBad != null ? config.iconBad : "fa-star-o"); }; // Max mark if (magicRatingWidget.data("maxMark") == null) { magicRatingWidget.data("maxMark", config.maxMark != null ? config.maxMark : 5); } /* console.log(magicRatingWidget.data("iconGood")); console.log(magicRatingWidget.data("iconBad")); */ // Clear the widget magicRatingWidget.html(""); // Init icons for (i = 1; i <= magicRatingWidget.data("maxMark"); i++) { if (i <= magicRatingWidget.data("currentRating")) { magicRatingWidget.append('<i class=" ' + magicRatingWidget.data("iconGood") + ' magic-rating-icon" aria-hidden="true" data-default=true data-rating=' + i + '></i>'); } else { magicRatingWidget.append('<i class=" ' + magicRatingWidget.data("iconBad") + ' magic-rating-icon" aria-hidden="true" data-default=false data-rating=' + i + '></i>'); } } // Init reset handler magicRatingWidget.on("mouseleave", function() { var widget = $(this); /* console.log("mouseleave"); console.log(widget.data("iconGood")); console.log(widget.data("iconBad")); */ widget.children().each(function() { var icon = $(this); if (icon.data("default") && !icon.hasClass("fa-star")) { icon.removeClass(widget.data("iconBad")); icon.addClass(widget.data("iconGood")); } else if (!icon.data("default") && !icon.hasClass("fa-star-o")) { icon.removeClass(widget.data("iconGood")); icon.addClass(widget.data("iconBad")); } }); }); // Init click handler magicRatingWidget.on("click", ".magic-rating-icon", function() { // Get rating var icon = $(this); var widget = icon.parent(); var rating = icon.data("rating"); /* console.log("click"); console.log(widget.data("iconGood")); console.log(widget.data("iconBad")); */ // Update rating widget.children().each(function() { if ($(this).data("rating") <= rating) { if (!$(this).hasClass(widget.data("iconGood"))) { $(this).removeClass(widget.data("iconBad")); $(this).addClass(widget.data("iconGood")); }; $(this).data("default", true); } else { if (!$(this).hasClass(widget.data("iconBad"))) { $(this).removeClass(widget.data("iconGood")); $(this).addClass(widget.data("iconBad")); } $(this).data("default", false); } }); var callbackSuccess = config.success.bind(null, widget, rating); callbackSuccess(); }); // Init hover icons magicRatingWidget.on("mouseenter", ".magic-rating-icon", function() { var icon = $(this); var rating = icon.data("rating"); var widget = icon.parent(); /* console.log("mouseenter"); console.log(widget.data("iconGood")); console.log(widget.data("iconBad")); */ widget.children().each(function() { if ($(this).data("rating") <= rating) { if (!$(this).hasClass(widget.data("iconGood"))) { $(this).removeClass(widget.data("iconBad")); $(this).addClass(widget.data("iconGood")); }; } else { if (!$(this).hasClass(widget.data("iconBad"))) { $(this).removeClass(widget.data("iconGood")); $(this).addClass(widget.data("iconBad")); } } }); }); } }; // Update for hover icons

Related: See More


Questions / Comments: