Star Rating Feedback Plugin For jQuery - feedbackBars.js

feedbackBars.js is a very small jQuery plugin that lets you create a star rating feedback system with review/comment support.

How to use it:

1. Load an iconic font of your choice (e.g. Font Awesome & Bootstrap Glyphicons) for the rating symbols.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">

2. Create the rating stars & feedback form as follows. The plugin requires a hidden input to store the rating value.

<div id="feedback">
  <input class="feedback_output" type="hidden">
  <ul class="feedback_bar">
    <li class="feedback_starrating" x-score="1"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="2"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="3"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="4"><span class="glyphicon glyphicon-star"></span></li>
    <li class="feedback_starrating" x-score="5"><span class="glyphicon glyphicon-star"></span></li>
  </ul>
  <div class="feedback_comment_container">
    <textarea id="feedback_comment_textarea" class="form-control longtext" rows="4"></textarea>
  </div>
    <a id="feedback_submit" class="btn btn-primary" href="#hurdur">Submit Feedback</a><br/>
</div>

3. Load jQuery library and the jQuery feedbackBars.js plugin at the end of the document.

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

4. Call the plugin to initialize the star rating feedback with customization options.

$("#feedback").feedback({

  // REQUIRED
  feedback_bar : "feedback_bar",

  // initial rating value
  deafault_score : 5,

  // CSS selector
  output : "feedback_output",

  // comment area
  comment_bar : {
    container : "feedback_comment_container",
    always_visible : false,
    open_on : 3 // 3 stars
  },

  // icon classes
  on_class : "glyphicon glyphicon-star",
  off_class : "glyphicon glyphicon-star-empty"
  
});

---

This awesome jQuery plugin is developed by samjudge. For more Advanced Usages, please check the demo page or visit the official website.