Surveyable – A jQuery Survey plugin
Surveys can be a useful way to obtain knowledge about your users. However if you are a user, or potential client, they can often be a hindrance, if you are not interested in leaving feedback. Surveyable is a simple plugin which enables you to create a more user friendly experience by remembering your users wishes, using cookies in jQuery. Surveys can be triggered on key pages and expirey dates can also be applied.
Usage
To use this plugin you will need to call in the jQuery framework. This plugin also depends on the jquery cookie plugin. Call the files like so:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.survey.js"></script>
To initiate the plugin simply call like so on the page you wish to display the survey on:
$(function(){
$('#survey').surveyable();
});
This will call in the surveyable plugin to act on the id of Survey. The div with the ID ‘survey’ will then contain all the information about your survey. This will follow the standard format as shown below. This method means you can extend the plugin to add the survey within the dialoge box, or alternately you could link to your survey on a different page.
<div id="survey"> <a href="#"></a> <h2>Please take my survey</h2> <p>I am currently conducting a survey, your help would be greatly appreciated.</p> <p> <a href="#">Take survey</a> </p> </div>
Parameters
You can also add extra parameters to the plugin. name sets the name of the plugin and duration sets how long the cookie is enabled for. This can also be set as an integer for the number of days from now . For example 7 would set a cookie for 1 week.
$('#survey').surveyable({
name: 'surveyTaken',
duration: 'today'
});
This is a first release and I feel there is a lot of scope to add more functionality and features to the plugin. If you have any thoughts or encounter any bugs, please feel free to feedback. I am always looking to improve.
January 15th, 2010
The demo isn’t working for me in FF 3.5 or Safari. The “Take Survey” link doesn’t do anything, and, once I’ve closed the object, successive reloads of the page don’t even show the link to take the survey.
« Reply
February 2nd, 2010
A disgrace, really. It doesnt work in 4 browsers I tried with, IE8, Opera 10, 2 versions of Firefox. Not sure how one could progress to a 3 page post with a custom ‘demo’ page for something that doesnt work… no one proof reads or tests anymore?
Good thing I use ADBLOCK so I can rest assured I didnt burn my eyes on any ads!
Dont reinvent the wheel, just use a Wizard plug in and any of the light box plugins to do the trick..1hr, tops!
« Reply
philipbeel Reply:
February 2nd, 2010 at 9:11 am
@steve, I have checked the plugin on the browsers you mentioned and I cant see any issues. I am going to assume you actually read the post before clicking the demo and making your own assumptions on what this plugin actually does. I offer this solution to less technical people who would like to implement a free feature on their site. It’s great to know you could do this better in 1 hour, but it does beg the question why you found this page. Happy coding
« Reply
February 13th, 2010
Hello Philip,
Thank you for the script. I’ve been attempting to implement it, however I’ve ran into a few issues. One being, after I hit the “X” (close) and refresh the page, it goes to a blank page. To me, it should popup again. I understand when you hit the “take survey” button it goes to a blank page because you’ve set it to # in the code. Any suggestions? Thnx, H
« Reply
philipbeel Reply:
February 13th, 2010 at 3:21 pm
@Heath, The demo will show you the page that you are on, The reason that you won’t see the survey popup again if you refresh the page is because when you initially closed the popup the plugin stores a cookie so it knows the user has already interacted with the survey, this is done as not to annoy your users. It should be quite easy to change the link, you can do this in the HTML of the download. Many Thanks
« Reply