Feedback is particularly useful for optimising a website because unlike numbers, customers’ words tell you their experience. I whacked this feedback form together as a simple Kampyle alternative that I can use for my own sites. It’s simple, gets feedback & links up with Google Analytics for more in-depth analysis.

Features

• Collects visitor feedback
• Aggregates quantitative data in GA
• Attention-grabbing pop out
• Collect limitless amounts of feedback for free
• Minimal impact on page load times

If you’re interested, feel free to download & install it. Enjoy!

Download

Simple Feedback Form with Google Analytics Integration v1.2

Requirements

• PHP
• JQuery 1.4+
• Google Analytics Asynchronous script
• A little knowledge of FTP, CSS and HTML

Installation

1. Open “gafeedback-min.js” and edit the top 3 lines to your liking. e.g.

var _gFQues1 = 'Did you like this article?'; // First Question asking whether or not page was liked (yes or no)
var _gFQues2 = 'Leave your feedback:'; // Second question asking for feedback
var _gFCustVar = 3; // This sets the slot for the Google Analytics integration

2. Upload the PHP and JS file to the root directory of your website
3. Upload the “feedback.tsv” file to the directory ABOVE your site’s root directory and make it writeable (CHMOD 666)
4. Paste the following code into the header of your site (changing the colours as you fancy

<style>
.gaFeedbackDiv
{
display:none;
position:fixed;
bottom:10px;
right:10px;
padding: 5px;
background-color:#b4edfe;
border-style:dashed;
border-width:3px;
border-colour:blue;
}

.gaFeedbackThanks
{
position:relative;
font-weight:bold;
}

.awesome{
background: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

.small.awesome {
font-size: 11px;
}

.colour.awesome {
background-color: #2167B1;
}
</style>

5. Add this code to the footer of the site (beneath the Google Analytics script)

<script src="/gafeedback-min.js"></script>

8. Voila! You’re done. Just sit back and collect limitless amounts of useful feedback at no charge!

Credits

Thanks goes out to…
Sam Chen from Tie World for reviewing my code and offering security suggestions and customisations.
Mark from Zurb for use of his awesome CSS buttons and all the people who have left some feedback through my feedback form to date.
Anyone else that helps me improve this.

Troubleshooting

While I think I covered everything in the installation instructions, I’m probably missing something. Leave a comment below if you need a hand setting this up and if necessary, contact me through the contact page on my site or through twitter.