Simple jQuery Plugin For Slide Out Tab Feedback Widget - Feedback_Me

Feedback_Me is a plugin for jQuery and jQuery UI that creates a customizable feedback widget on your web page that slides out from the left side of your web page when clicking the tab. 

Features:

• jQuery UI thems and Twitter Bootstrap supported
• RTL support
• Uses ajax post to send data to server
• Lightweight and easy to use

See also:

• Slide Out Contact Form Plugin with jQuery - Contactable
• jQuery Plugin For Slide Out Tab Contact - tabSlideOut

Basic Usage:

1. Include jQuery library and jQuery UI on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery Feedback_Me plugin on the page, after jQuery library.

<link href="css/jquery.feedback_me.css" rel="stylesheet" type="text/css">
<script src="js/jquery.feedback_me.js"></script>

3. Initialize the plugin with options.

$(document).ready(function(){
  //set up some basic options for the feedback_me plugin
  fm_options = {
    position: "left-bottom",
    name_required: true,
    message_placeholder: "Go ahead, type your feedback here...",
    message_required: true,
    show_asterisk_for_required: true,
    feedback_url: "send_feedback_clean",
    custom_params: {
      csrf: "my_secret_token",
      user_id: "john_doe",
      feedback_type: "clean"
    }
  };
  //init feedback_me plugin
  fm.init(fm_options);
});

4. All the options.

// URL of your servlet/php etc
feedback_url : "",

// Set the position where the feedback widget will be located
// left-top / left-bottom / right-top / right-bottom 
position : "left-top",

// Use jQuery UI theme
jQueryUI : false,

// Use twitter bootstrap
bootstrap : false,

// Display email input field
show_email : false,

// Set of 5 radio buttons
show_radio_button_list : false,
close_on_click_outside: true,

// Label for name input
name_label : "Name",

// Label for email input
email_label : "Email",

// Label for message input
message_label : "Message",

// Labels for radio button list
radio_button_list_labels : ["1", "2", "3", "4", "5"],

// Label that will appear above the list of radio button
radio_button_list_title : "How would you rate my site?",

// Watermark for name input
name_placeholder : "",

// Watermark for email input
email_placeholder : "",

// Watermark for message input
message_placeholder : "",

// Set name input pattern, you must escape your '\' chars (\ ---> \\)
name_pattern : "",

// Makes name input required
name_required : false,

// Makes email input required
email_required : false,

// Makes message input required
message_required : false,

// Makes radio inputs required
radio_button_list_required : false,

// Add an asterisk to the label of the required inputs
show_asterisk_for_required : false,

// Label for submit input
submit_label : "Send",

// Label for title text
title_label : "Feedback",

// Label for open/close (trigger) button
trigger_label : "Feedback",

// Use it if you want to send additional data to the server 
// can be used for sending: csrf token / logged in user_name / etc`
custom_params : {},

// Allows you to use any html file that you want, 
// it will be placed inside feedback_me widget, 
// note that in order to close the feedback_me widget just call the following command: 
// parent.fm.triggerAction(event, "left-top"); 
// don't forget to pass the "event" from you onclick call to the triggerAction function 
// and also the position of your feedback widget left-top / left-bottom / right-top / right-bottom)
iframe_url : undefined,

// Allows you to hide the form in the widget (and only show HTML code or iframe)
show_form: true,

// Allows you to use any inline html code that you want, 
// it will be placed inside feedback_me widget
custom_html : "",

// Enable feedback dialog upon feedback sending, 
// a small dialog will be displayed with appropriate message in the middle of the screen 
// and then fade out (read more about the delayed_options property)
delayed_close : true,

// Allow to customize the feedback dialog upon feedback sending
delayed_options : {
  delay_success_milliseconds : 2000,
  delay_fail_milliseconds : 2000,
  sending : "Sending...",
  send_fail : "Sending failed.",
  send_success : "Feedack sent.",
  fail_color : undefined,
  success_color : undefined,
  custom_html_success: undefined,
  custom_html_fail: undefined
}

More examples:

• Basic Example
• With jQuery UI Themes Example
• With twitter bootstrap Example

Change logs:

2018-05-13

• Ensure that all ajax beforeSend parameters are passed around correctly

v0.5.9 (2016-01-13)

• Fixed closing on click outside for newer jQuery versions

v0.5.8 (2015-02-09)

• Added custom template for the delayed_options, custom_html_success and custom_html_fail are part of the delayed_options
• Added extend for the global ajax beforeSend

v0.5.7 (2014-11-22)

• IE8 Support

v0.5.6 (2014-06-14)

• Customizable pattern attribute: "name_pattern" for name input
• Allow jQuery.noConflict 
• Minor fix

v0.5.5 (2014-05-02)

• Added highly customizable notification response for success/fail feedback sending 
• Bug fix

v0.5.2 (2014-04-06)

• Works in the old andAdded support for multiple feedbacks on page
• As part of the multiple feedback feature implementation ALL ids were replaced with classes (e.g #feedback_content is now .feedback_content)
• Bug fix

v0.4.8 (2014-03-09)

• Added "custom_html" / "show_form" / UI improvements

v0.4.6 (2013-11-17)

• Remove jQuery UI dependencies + bug fix

v0.4.3 (2013-11-17)

• Added "iframe_url" option to allow the use of any html file that you want, html file will be embeded inside feedback_me widget.

v0.4.0 (2013-11-08)

• Added "iframe_url" option to allow the use of any html file that you want, html file will be embeded inside feedback_me widget.

v0.3.8 (2013-11-03)

• no required inputs submit bug fix

v0.3.4 (2013-09-23)

• Added option to set the position of the feedback widget (4 possible locations) : left-top / left-bottom / right-top / right-bottom

v0.3.2 (2013-09-18)

• Email input is now using HTML5 type + added simple email validation

v0.2.5 (2013-07-29)

•  customizable placeholder (HTML5) for all input fields + more

---

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