Without a personal backend, most coders think it;'s impossible to do any kind of data collection. Luckily, a few free major webservices allow this capability from any page, even a blogger, dreamweaver, or word-press site...
the concept is relatively simple.
to customize, simply create the forms, publish them, and change the urls and html building section of the code below:
The page uses completely free tools to let anyone share information with others from your website. Using Google forms to collect info, the data is fetched to the webpage using YQL to translate a CSV export of the data into a javascript function call. By putting together Forms, Spreadsheets, and YQL, we create a simple and powerful way to collect and distribute all kinds of data, all without cost.
ref:
YQL console
Google Spreadsheet (from Google Forms)
live demo
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>comments without your own server: a free webservice demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h3>About this page </h3>
<p>This page uses completely free tools to let anyone share information with others from your website. Using Google forms to collect info, the data is fetched to the webpage using YQL to translate a CSV export of the data into a javascript function call. By putting together Forms, Spreadsheets, and YQL, we create a simple and powerful way to collect and distribute all kinds of data, all without cost.</p>
<b>See also:</b>
<a href='href=http://developer.yahoo.com/yql/console/#h=select%20*%20from%20csv%20where%20url%3D%27https%3A//docs.google.com/spreadsheet/pub%3Fkey%3D0Aptc98y5K95RdGdOaGdubFk2YWh5ZEkxVGNpeFF4clE%26output%3Dcsv%27'>YQL console</a>
<a href='https://spreadsheets.google.com/spreadsheet/ccc?key=0Aptc98y5K95RdGdOaGdubFk2YWh5ZEkxVGNpeFF4clE&hl=en_US'>Google Spreadsheet (from Google Forms)</a> .
<hr />
<!-- pasted from ("More Actions">embed ) controls in the google form editor: -->
<iframe src="https://spreadsheets.google.com/spreadsheet/embeddedform?formkey=dGdOaGdubFk2YWh5ZEkxVGNpeFF4clE6MQ" width="760" height="922" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
<h3>Responses</h3>
<div id='comments'></div>
<script type='text/javascript'>
//IE7+8 compat code (feel free to remove if not needed) ##########
if(![].map){Array.prototype.map= function map(fun){var i=0,len=this.length,res=[],thisp=arguments[1];for(i;i<len;i++){
if(i in this){res[i]=fun.call(thisp,this[i],i,this);}}return res;}
}if (![].filter) {Array.prototype.filter = function (fun) {var len = this.length, res = new Array, thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {var val = this[i];if (fun.call(thisp, val, i, this)) {res.push(val);}}}return res;};}
Object.keys=Object.keys||function keys(ob){var r=[];var i=0;for(var z in ob){if(ob.hasOwnProperty(z)){r[i++]=z;}}return r;};
//end IE7+8 compat code ############
function getCSV(url, cb){//uses YQL to grab CSV data from a url and pass it to the callback as an array of objects
function addScript(u){
var sc2=document.createElement('script');
sc2.src=u;
document.getElementsByTagName('head')[0].appendChild(sc2);
} //end addScript()
function yqlCsvToArrayOfObjects(data){
var head=data[0];
data=data.slice(1).map(function(a){
var ob={};
Object.keys(a).map(function(aa){
ob[head[aa]]=a[aa];
}); return ob;
});
return data
}//end yqlCsvToArrayOfObjects()
var key=url.replace(/\W/g,"");
getCSV[key]=function generatedCallback(data){ cb(yqlCsvToArrayOfObjects(data.query.results.row));};
return addScript(
"http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'"+
encodeURIComponent(url)+
"'&format=json&callback=getCSV."+key
);//end addScript call
}//end getCSV()
// to publish survey results: Make a google form, 'see the responses as a spreadsheet', and share and publish from the spreadsheet editor (top-right corner)
// now use some custom html generating code from a custom form identified by a custom url:
//url of csv data from a shared and published Google Form:
var myCsvUrl = "https://docs.google.com/spreadsheet/pub?key=0Aptc98y5K95RdGdOaGdubFk2YWh5ZEkxVGNpeFF4clE&output=csv";
function demoCB(data){ //callback function for incoming csv data. turns the data into HTML
//build and show html version of submitted data:
document.getElementById("comments").innerHTML=data.map(function(item){
return item.Timestamp.italics() +": "+ item["What do you think?"];
}).join("<br />");
}//end demoCB()
//apply the callback to the data at myCsvUrl:
getCSV(myCsvUrl, demoCB);
</script>
</body>
</html>