Simple jQuery Plugin For Slide Out Tab Feedback Widget - Feedback_Me
File Size: | 17.8 KB |
---|---|
Views Total: | 21888 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.