ui.imFeedBack – A JQuery UI Feedback Widget

When the web20.digitalvilliage site was nearly complete, I wanted to add a contact form. I like the feedback tabs that I have been seeing on websites recently (displayed on the right or left of the page), so I decided to build one. I was already using a JQuery UI theme on the site, so I decided to create a JQuery UI widget so that the color scheme of the feedback form would match the color scheme on the site.

This ui.imFeedBack widget is extremely versatile. The feedback tab can be placed on the right or left and can even be displayed as a dialog.

Creating a JQuery UI Theme

Before setting up the widget, create a theme with the JQuery UI Themeroller. I discuss the themeroller in a previous post.

Setting up the ui.imFeedBack Widget

First add the necessary CSS and JS files to the head section of your web page:

<link rel="stylesheet" type="text/css" href="css/jquery-ui/custom-theme/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="css/imfeedback/imfeedback.css" />
 
<script type="text/javascript" src="js/jquery/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery/imfeedback/ui.imFeedBack-0.5.js"></script>

The only option that is needed in order to use the ui.imFeedBack widget is the submit_url. This is the location of your server-side script that sends the email.

$(document).ready(function(){
	$(document.body).imFeedBack({
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

This will create the FeedBack tab on the right of the page. When the user clicks on the tab, the feedback form will slide open. If I prefer to display the feedback tab on the left:

$(document).ready(function(){
	$(document.body).imFeedBack({
                location: 'left',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

Changing CSS Styles

The ui.imFeedBack widget is set up to automatically use a JQuery UI theme, but I set it up so that it can be styled independently. The following are the options that can be used to change the styling of the widget.

form_container_class: 'ui-widget ui-widget-content ui-corner-all'
// The form buttons are the send and close buttons
form_button_class: 'fg-button ui-state-default ui-corner-all'
form_button_class_hover: 'ui-state-hover'
// The header class is the caption container
header_class: 'ui-widget-header ui-corner-top'
// The feedback_button is the feedback tab that is displayed on the left or right
feedback_button_class: 'fg-button ui-state-default ui-corner-top' 
feedback_button_class_hover: 'ui-state-hover'

Sending the User’s Name

By default, the feedback form contains an email, subject, and message field. To display a name field, use the form_capture_name option. There are 4 possible values for this option:

false: Name fields are not displayed (the default)

firstName: A First Name field is displayed
fullName: A single input input field is displayed where the user can enter their full name
firstLast: First name and last name fields are displayed

$(document).ready(function(){
	$(document.body).imFeedBack({
                form_capture_name: 'firstName',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

The ui.imFeedBack widget will validate the form fields by default (value must not be blank and email must be correct format). You have the option of turning off the validation of the name field using the validate_name option.

$(document).ready(function(){
	$(document.body).imFeedBack({
                form_capture_name: 'firstName',
                validate_name: false,
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

Setting Text Options

A number of text options can be set or changed. The following are the options with their default values:

header_caption: 'Please Send Us an Email'
// The top_text is the area above the form field. Use this area to display any additional information or instructions
top_text: ''
// The feedback tab
feedback_button_text: 'FeedBack'

In addition, the subject field can be pre-filled. You can also set whether you want the subject field to be disabled.

feedback_subject: 'I love Stargate SG-1'
// The disable_subject option is empty by default
// To disable the field, set the option to true
disable_subject: ''

Displaying the FeedBack Form in a Dialog box

By default, when a user clicks on the feedback tab, the feedback form will slide into view. If you prefer to display a dialog box, set the show option to dialog (it is set to slide by default). You also have to give the dialog an id and set the width.

$(document).ready(function(){
	$(document.body).imFeedBack({
		show: 'dialog',
		dialog_container: 'imFeedBack-dialog',
		dialog_width: '550px',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

This dialog_container does not have to be styled, if you have not set the body’s font-size to 62.5%, you may want to set it here.

#imFeedBack-dialog {
        font-size: 62.5%
}

When using the dialog option, you also have the option of displaying your own form. Just set the dialog_widget_form option to false and then create your own form.

$(document).ready(function(){
	$(document.body).imFeedBack({
		show: 'dialog',
		dialog_container: 'my-dialog',
                dialog_widget_form: false, 
		dialog_width: '550px',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

When using this option, make sure you name your form imFeedBack-FormContainer, so that it will be submitted correctly.

<div id="my-dialog">
<form name="imFeedBack-FormContainer" id="imFeedBack-FormContainer">
 
</form>
</div>

External Control

I set up the ui.imFeedBack widget so that it can be opened by a separate element on the page. Use this option if you want to display a specific feedback_subject and top_text options that are different from your site-wide feedback form. I created the web20.digitalvilliage.com site for marketing purposes. At the top of the page, I created a button with the text: Need A Web Developer?. When the user clicks on the button, the feedback form appears with the subject field pre-filled.

$(document).ready(function(){
	$(document.body).imFeedBack({
		top_text: 'For expert web design, contact us today',
		feedback_subject: 'I need a web designer',
		external_control: { id: 'stargateBtn', top_text: 'If you love Stargate SG-1, send us an email to tell us why.', feedback_subject: 'I love Stargate-SG1', disable_subject: true},
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

The external_control option has 4 values that can be set:

id: The id of the controlling element (Mandatory)
top_text: The text to be displayed above the form fields (optional)
feedback_subject: The text to be displayed in the subject field (optional)
disable_subject: Whether to disable the subject field (optional)

Once the feedback form is closed, the relevant values will be set back to the global options.

Submitting the Form

The feedback form will submit the following fields:

• imFeedBack-Email
• imFeedBack-Subject
• imFeedBack-Message

When using the form_capture_name option, the form will also submit:

• imFeedBack-FirstName (when option = firstName)
• imFeedBack-Name (when option = fullName)
• imFeedBack-FirstName, imFeedBack-LastName (when option = firstLast)

In addition to these values, you can send hidden fields, using the hidden_fields option:

$(document).ready(function(){
	$(document.body).imFeedBack({
		hidden_fields: [ {name: "message_type", value: "P"}, {name: "action", value: "doWhatever"}],
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

The form is submitted ajaxally. The widget expects a Json record to be returned.

{"response": "Message Sent"}

If “Message Sent” is the response, then the widget will display:

Thank you for contacting us. We will get back to you as soon as we can.

If “Message Sent” is not in the response, the widget will display the message sent back.

if ($success) {
        echo '{"response": "Message Sent"}';
} else {
        echo '{"response": "'. $errorMsg . '"}';

The success message can be changed by setting the success_msg option:

$(document).ready(function(){
	$(document.body).imFeedBack({
		success_msg: 'Thank you contacting us',
		submit_url: 'http://www.mysite.com/send_mail.php'
	});
});

Well that’s it. As you can see the ui.imFeedBack widget is extremely versatile, but simple to use. You can download the widget from GitHub. You can view demos of the widget in the JQuery UI Widgets demo section of my site. Enjoy.