How to use google form as a simple survey system
July 20th, 2009
Preview
- A google form is a simple generally form system. You can use it to generate a form to ask your user some questions and collect the answers into a google spreadsheet automatically. And then you can do farther data analytics with that spreadsheet.
- Actually, the google form can be used directly. But in some cases, the user want to change the google form’s default behavior to meet their requirements, such as they don’t want it to be redirected to google’s response page which have google’s logo there, they want to customize the design of the google form, etc
- This scripts is used to focus on these special cases, also it can’t cover all of these cases, but it’s a beginning.
Design
- I used a iframe to handle the google form’s default response.
- I used javascript to replace all of the radio button with a image, when the user clicks the image, the value of the radio will be synced directly. The image can be changed with css.
- I used the javascript to check if the required field has a value. But now there’s nothing to do with the required field without a value.
- User can define the response text by themselves.
<form target="gsurvey_result"></form> <iframe name="gsurvey_result" height="1" style="display:none;"></iframe>
An example
- Generate a google form with your own google account.
- Create a new html file, load the script gsurvey.js, gsurvey.css in the html file.
- Insert the html code of the google form. You can also define a element holds response text. You can check the code in the attachments.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <link rel="stylesheet" media="screen" href="/static/css/gsurvey.css" /> <script type="text/javascript" src="/static/js/jquery.gsurvey.js"></script> </head> <body> </body> </html>
Powered by FireStats
Recent Comments