Roll your Own Simple AJAX Survey for Blogger

Update: With the recent addition of Forms to google spreadsheets, I think this tip is rendered obsolete


There are lots of companies out there that let you embed free and fancy survey widgets for your blog. However, I didn't want to sign up for anything and just wanted a simple way to get user feedback for my plugins site. I hacked together a YUI powered survey with a simple php backend to keep track of user responses. For me, the key to neat hacks is leveraging existing "stuff". In my case I have a blogger-powered site, gmail accounts and my own web server.


How it works:
Once the user selects an option from the survey and hits "Vote", the php script tied to the form's post action sends an email to my gmail account. Because I normalize the subject line with the survey name and the option selected, I can create quick gmail filters. Another freebie is that Gmail groups these similar messages and therefore getting a total-count is just a glance away...

The Javascript half of this is really quite simple. I embedded it all into a single html page so that I could get around the fact that you cannot easily include javascript in blogger posts. By embedding the Javascript in an html page, you can use this clever workaround, and embed the widget using an iframe.

I am using a standard YUI Dialog object, however, to have this work exactly the way I wanted, I needed to override a few of the "interesting moments", as Yahoo likes to call them. Specifically the hide() and validate() methods:

...
//prevent multiple votes, while adding some flair
myDialog.hide = function() {
   var attributes = {
      height: { to: 25}
   };
   var anim = new YAHOO.util.Anim('myDialog', attributes, 1.0,
                                  YAHOO.util.Easing.backOut);
   anim.animate();
   this.setHeader('Thanks for your Feedback!');
};
//prevent en empty vote:
myDialog.validate = function () {
   var data = myDialog.getData();
   if(data.choice == null) {return false;}
   else return true;
};

Right Click and choose Save As here to download the whole html/javascript file.

For those wondering, I chose YUI because we use it at work and it rocks the house. The developers are wizards, and YAHOO! even lets you choose to have the JS and CSS files hosted on their fast servers.
--
The only remaining tricky thing is that you'll need access to your own WWW server. For security purposes, AJAX and POSTS cannot be made to different domains (edit: unless you set up a proxy), so the .html and the .php files (or whatever your favorite server side scripting language is) must reside on the same server.

In PHP, I just grab the survey name and the option the user chose and use sendmail.

...
$surveyname = $_POST['surveyname'];
$surveychoice = $_POST['choice'];
$subject = 'iPhoto2Gmail Survey: '.$surveyname. ' '.$surveychoice ;
...
//set up your message and headers
mail('my-email-address@gmail.com', $subject, $message, $headers);

After that all you have to do is create some filters in your email client and you'll have a super simple way of quantifiying user response -- and by using some YUI animation, it looks pretty slick too!