Creating a simple feedback button

by Jonathan | Jul 29, 2009 at 9:00 am | Featured, tutorial, web design

FeedBackButtonTitle

A trend that has becoming more popular is having a floating feedback button on your home page so you can take advantage of your visitors opinion. The button can link to a form where the user can express their thoughts about the site or a page that allows them to vote on what features they would like to see on the site. You can mimic the feedback button for your own site with a some basic html and css.

Sneak a peek at the final product. (I hope you like the red, white and blue.)

After completing the example page I was surprise how easy this is to do. I will start out with a simple page that has a container which is centered on the page. Inside that I have a header, navigation area, content area and a footer.

<div id="container">
 <div id="header"><h2>Header Here</h2></div>
 <div id="nav">Simple Nav</div>
 <div id="content">
    <h3>Content</h3>
    <p>Words and paragraphs go here</p>
 </div>
 <div id="footer"><h4>Footer</h4></div>
</div>

Nothing crazy here just some simple divs and the following CSS. I have added some lorem ispum to the content area in my example. I do not show it in the code to save space.

 body{font:.8em/1.6 Arial, Helvetica, sans-serif ; background:#CCC;}
 img{border:none;}
 #container{width:800px; margin:0 auto; border:1px solid #666666;}
 #header,#content,#footer{margin:0; padding:20px;}
 #header{background:red;}
 #nav{background:#333333; color:white; padding:10px;}
 #content{background:white;}
 #footer{background:blue;}

Again some simple background colors so we can tell where each section is being displayed. The above makes something that looks like this.

FeedBackButtonPage

The feedback button has text that runs vertically and I thought it would be easy to do with CSS or Javascript. However after some looking around I found a few complicated Javascript solutions that only work with specific fonts and a CSS solution that only works in IE. For ease of implementation  I find that you get a much better result if you create an image file for the text. I choose to create a simple PNG file with white letters and a slight drop shadow.

FeedBackButtonPNG

Here I show the feedback letters on different backgrounds for illustration purposes. I will use a png file where the background is transparent. This will allow for the maximum flexability. Now with the image made we can create the html and CSS needed. First lets create a div for the feedback image to be displayed in.

<div id="feedback"><a href"#"><img src="images/feedback.png" /></a></div>

I have made a div with an id of “feedback” and inside of that a hyperlink anchor tag and finally inside of that the feedback text image. This div can be placed any where on your page however I suggest that it goes toward the bottom. This will allow the more important things on your page to load first. Now for the CSS that will position this div in the correct spot.

#feedback a{ display:block; position:fixed; top:200px; right:-1px; background:green; padding:7px 5px;
 border:1px solid #030;
 border-left-color:#060;
 border-top-color:#090;
 }
 #feedback a:hover{background:#030;border:1px solid #030;}

I started off with selecting the hyperlink anchor tag with in the div “feedback”.

FeedBackButton

display:block
Because the anchor tag is not a block level item we need to tell it to display as one. This will allow the positioning to work.
position:fixed
A fixed position will plant the feedback button in one location relative to the browser window.
top:200px; right:-1px;
Top places the feedback button exactly 200 pixels from the top of the window and right places button one pixel to the right off the window. This is done so that when a one pixel border is applied it doesn’t show on the right side.
background:green;
This creates a green background for the feedback button. You can choose any color you like.
padding:7px 5px;
This creates a little padding around the image. This may or may not be necessary depending on your image.
border:1px solid #030;
Finally I created a dark green border around the feedback image. I have added other border colors to create a more three dimensional look.

The next selector uses the CSS pseudo hover class to create a rollover effect. The class changes the background to a darker green and applies the same color for the border.

I want to add that I probably didn’t need to have hyperlink anchor tag inside of a div tag. I could have selected the anchor by placing a class on it. I feel like the code is easier to read and skim when you have divs that outline what is going on. It is a matter of personal choice. It will work either way with a little CSS tweaking.

That is all there is to it. Let me know if you have any other web elements you would like to see explained or if you have any questions.

Feedback button example

  • Pingback: DotNetShoutout()

  • madan

    this feedback button doesnt work on IE 6!

  • Pingback: 8 Popular Website Design Trends From 2009 | Webtolerant()

  • Hi,

    This doesnt work on IE8 is there a another way of doing t

    Thanks

    but looks great on firefox great article

  • Jonathan

    On my system the button does work in IE8 if it is running in IE8 browser mode and document mode. If you have copied the code and it does not work for you in IE8 you might want to make sure that your page is being rendered in IE8 and not quirks mode. You can do this by pressing F12 or “Tools” -> “Developer Tools”.

  • Java is different than JavaScript. You are talking about JavaScript in this case. Might want to update that 🙂

  • iCrusader

    Thanks for the tutorial, will try it out today.
    And Philip is right, you mentioned “Java” however we are talking about he Javascript here.

  • Jonathan

    I appreciate the feedback and comments. You both are correct and I have changed the mentions of Java to Javascript. Thank you.

  • tom

    Awesome

  • Pingback: Web tab? - RaGEZONE - MMORPG server development forums()

  • Great, thanks a lot. I was looking for that a long time. Now our technics can integrate it in our website

  • Drew

    Anyone now how to get this fixed in IE so it works in “Quirks Mode”? I believe this is the default most people have, so it would be good if it worked in that.

    Looks beautiful in Firefox..

  • Ashish

    Hello,

    that was good work. but i got problem in IE6. can you please provide me any solutions for IE6

  • I thought PNG transparency does not work in IE? Right? I love PNG but PNG no love IE 🙂

  • Jonathan

    This is true, PNG files with transparency are not supported in older versions of IE. However you could use GIF files with transparency or you can load a simple fix that tricks IE into using the transparency in PNG files. You can find more about it here: http://www.twinhelix.com/css/iepngfix/

  • Thanks for taking the time to write this up. I found it very useful.

  • Pingback: Betarabbit – Benchmarking | Beta Rabbit()

  • FYI in your sample code for the feedback div/link/image, you are missing the = in href=”#”.

  • Pingback: Coding Conversations - Create a Feedback Button for your Website()

  • Thanks for sharing!

  • Leonard Reidy

    Brilliant! Clean, concise effective solution. You should see the junk I had to sit through before I found your page. Many thanks!!!

  • George Handorf

    Great! Now if I could just get it to work in conjuction with my fixed position header and footer I would be sailin’! If anyone has an easy solution to putting this togethor with a fixed position header/footer layout that is both Chrome AND IE friendly it would be great!

    And dude, you need a DONATE sticky on your page so I can buy you a beer!

  • Krishna dlb

    This is perfect solution for me.. i liked it 

    Check – http://tamil.dailylib.com

  • can u tell me how to put that in a joomla 2.5 based website?

  • Sujan Gokhale

    Hey friend, its working…..Thanks for the code provided!!

  • ewewr

    zvdvdsvsvdsvds

  • Thanks for sharing! If you are interested in good user feedback tool you should definitely check bugrem.

  • Mark Zalman

    I tried BugRem.com tool, works great!