Feedback Modal Plugin With jQuery And Bootstrap 4 - feedback_widget

File Size: 4.32 KB
Views Total: 3524
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Feedback Modal Plugin With jQuery And Bootstrap 4 - feedback_widget

The jQuery feedback widget plugin helps you create a side tab that toggles a Bootstrap 4 based feedback modal popup on click.

Great for easily creating a user-friendly feedback system on your website.

How to use it:

1. To use this plugin, you first need to load jQuery library and Bootstrap 4 framework in your html page.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" 
<!-- jQuery  -->
<script src="" 
<!-- Bootstrap JavaScript -->
<script src="" 
<script src="" 

2. Load the jQuery feedback_widget plugin's files.

<link rel="stylesheet" href="css/feedback.css">
<script src="js/feedback.js"></script>

3. Initialize the feedback widget and specify the text displayed on the feedback tab.

$(document).ready(function () {
  feedback_options = {
    title: "Feedback"


4. Add your own contact form to the feedback modal.

var model_html = '<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">';
    model_html += '<div class="modal-dialog modal-dialog-centered" role="document">';
    model_html += '<div class="modal-content">';
    model_html += '<div class="modal-header">';
    model_html += '<h5 class="modal-title" id="exampleModalLongTitle">' + feedback_options.title + '</h5>';
    model_html += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
    model_html += '<span aria-hidden="true">&times;</span>';
    model_html += '</button>';
    model_html += '</div>';
    model_html += '<div class="modal-body">';
    model_html += 'Your Contact Form Here';
    model_html += '</div>';
    model_html += '<div class="modal-footer">';
    model_html += '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
    model_html += '<button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>';
    model_html += '</div>';
    model_html += '</div>';
    model_html += '</div>';
    model_html += '</div>';

    model_html += '<div class="center">';
    model_html += '<a href="#" data-toggle="modal" data-target="#exampleModalCenter">Feedback</a>';
    model_html += '</div>';

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