Jquery Feedback Tab
Every one must have visited, one of the many interactive websites, with a feedback tab on the side or on the top, this tab keeps following as you scroll. Ever wondered, gee, how do I get that ? No? Yes? Well I did and I found out there are companies out there charging a bomb for this service/product.
So I set out on a quest to get me one of my own feedback tab. Since I love Jquery, I started to hunt for a jquery feedback tab, and I built one, with the help of a nifty plugin. Want to know how to do it?
Here’s how..
jQuery Feedback Tab Requirements
To get started we need the latest Jquery release from here and a nifty jQuery based plugin, known as boxy.js from here. These two would give us the feedback effect you see on this site. Other than these two we require an image, or alternatively you can just have a div if you did like, for the side “Feedback” tab. You can download all of my jquery feedback tab files from here.
jQuery Feedback Tab Code
Here’s the code required in your page (File) which would be where you would require the jquery feedback tab. Alternatively, if you have a content management system, like wordpress or joomla, you could use the header or the index files, accordingly, if you need help, just drop us a comment or two 
1: <script type=”text/javascript” src=”jquery.js”></script>
2: <script type=”text/javascript” src=”boxy.js”></script>
3: <link rel=”stylesheet” href=”boxy.css” type=”text/css” />
The above three lines import the .css file required, that you can play around with and import/include the jquery.js file and the boxy.js plugin file. Make sure the “src” path is set up right, with the proper relative path for these scripts.
4: $(function() {
5: /* set global variable for boxy window */
6: var contactBoxy = null;
7: /* what to do when click on contact us link */
8: $(’.contact_us’).click(function(){
9: var boxy_content;
10: boxy_content += “<div style=\”width:300px; height:300px \”><form id=\”feedbacked\”>”;
11: boxy_content += “<p>Subject<br /><input type=\”text\” name=\”subject\” id=\”subject\” size=\”41\” /></p><p>Your name and/or email:<br /><input type=\”text\” name=\”your_email\” size=\”41\” /></p><p>Comment:<br /><textarea name=\”comment\” id=\”comment\” cols=\”37\” rows=\”5\”></textarea></p><br /><input type=\”submit\” name=\”submit\” value=\”Send >>\” />”;
12: boxy_content += “</form></div>”;
13: contactBoxy = new Boxy(boxy_content, {
14: title: “Send feedback”,
15: draggable: false,
16: modal:true,
17: behaviours: function(c) {
18: c.find(’#feedbacked’).submit(function() {
19: Boxy.get(this).setContent(”<div style=\”width: 300px; height: 300px\”>Sending…</div>”);
20: // submit form by ajax using post and send 3 values: subject, your_email, comment
21: $.post(”http://tweetfeat.com/wp-content/themes/default/suggest.php”, { subject: c.find(”input[name='subject']“).val(), your_email: c.find(”input[name='your_email']“).val(), comment: c.find(”#comment”).val()},
22: function(data){
23: /*set boxy content to data from ajax call back*/
24: contactBoxy.setContent(”<div style=\”width: 300px; height: 300px\”>”+data+”</div>”);
25: });
26: return false;
27: });
28: }
29: });
30: return false;
31: });
32: });
The above code is responsible for creating the modal box, just like the ones we see with facebook.com. The code is very self explanatory, again if you have any questions feel free to ask in the comments. There are comments above that would be of help to some.
33: #feedback{
34: position:fixed;
35: width:50px;
36: height:150px;
37: top: 150px;
38: z-index:1;
39: }
The above is the CSS code for the tab, now the tab can be an image or div or both, like in our case we have both, a div with the background as a gradient and the foreground being the text “Feedback”.
40: <div id=”feedback”><a href=”#” class=”contact_us”><img src=”feedback.gif” border=”0″/></a></div>
Place the above code just after the <body> tag. Since the position of the div is fixed, it would be appearing outside the normal frame of the browser.
Conclusion:
I hope this post would save you the cost for the feedback being implemented, as a give away, our first five followers would get a “Free Jquery Feedback Tab” installation from us. All you have to do is subscribe and leave a comment!
Download Entire jQuery Feedback Tab Source Code, With Example. Click Here.
Resources
For more on boxy, I suggest visiting @ http://onehackoranother.com/projects/jquery/boxy/
11 Responses to “Jquery Feedback Tab”
Leave a Reply
Subscribe TO US
You can subscribe by email to receive newsletter updates:
Subscribe through a RSS feed reader
Heres another cool Tool Tip script…
http://ajaxden.net/tag/tooltip/
There’s a line in the php code that reads:
if(mail(’info@domainfunk.com’, ‘Feedback DomainFunk.com: ‘.$name, ‘My Email: ‘.$email.’\r\n Commnents: ‘.$comments))
instead of that info@domainfunk.com and Feedback DomainFunk.com would I put my email and other stuff of mine? Thanks
how can i edit the actual form like add a star 1 -5 for thwem to rate it?
@Mac,
You can edit the .html form and add jquery callbacks for the ratings.
@Leo,
Yes most certainly you can use your own email address, sorry for the late reply. Have a great day!
@Sean,
Thanks for the link to the tool tip script.
thnx for the reply but im having difficulty i never really used jquery before is there a way i can request an external php/ajax form into the box
@mac
What we can do for you is set up a local html page as you require it with jquery and feedback and give it to you for free, will that be of help?
Sounds great thanx!!
how can i get it?
Why don’t you mail us the .html file and the requirements and we will set it up for you