Tuesday, June 4, 2013

Create your own form and display all response real time using Google Drive

Here is free and very simple way to make a form that records all responses and has the ability to display every response in real time. The best part is, there is no need to sign up and you will not have to worry about any databases.

It is not from a third party but it is part of Google known as Google Drive.

With Google Drive you have the ability to create your custom form then tie it to a spreadsheet (also in Google Drive) this way, all responses are saved to it which you can display the latest data down to the last second.

Here is how.

  • Log-in to Google and go to Google Drive
  • Create the form - In Google Drive, click on CREATE located at the upper-left corner then select  Form at the drop down menu.
    1. Enter a title for the form and select your desired theme. Your theme should be suitable for the purpose of your form.
    2. Enter a description for your form. Something that tells users about this form and maybe add some reminders as well.
    3. Type in the question title. This serves as the label for each input field in your form. Ex. First Name, Address, Contact no., What computer do normally use?, Do you like dogs or cats?
    4. Fill-in the help text. This helps guide users to enter the correct response by giving them an example or a brief narrative of the kind of information needed.
    5. Select the question type from the list available.
    6. Click on the Required question radio button if this particular question is indeed required and response to the form is not accepted if it is left blank. The question will have a red star on the created form.
    7. Click Done.
    8. If more questions are needed, click on Add item. This will add another set. Just follow steps 3 to 7.
    9. When satisfied with your questions, you can personalize the confirmation message or just leave it as is.
    10. Click on Send form. Since we wanted to put this form on our blog or site, click the embed button found on the pop-up window after clicking Send form. You may change the height and width of the form then copy the embed code that is provided. Click Done. The form is already saved on Google Drive so don't be looking for a save menu.
    11. Not quite done yet. To save all response to this form, click Responses on the menu bar then click Choose response destination.
    12. Choose New spreadsheet and supply the name of the spreadsheet. It will be created once you click on create.
  • Paste the embed code on your site. Go back to your site and create a new document or decide where you wish to put the embed code then paste it.
  • Make responses visible within your site - In cases where you wish to publish every responses of  users then go back to Google Drive and open the spreadsheet corresponding to the form. If you don't wish to display the response, then this step is no longer applicable.
    1. Once the spreadsheet is opened, go to File - Share...
    2. Under Who has access, you will see Private. Click change then select which you prefer. If it is for everybody in the world wide web, then click Public on the web.
    3. Make sure that on the Access, the Can View is selected that way no one can edit the content of your spreadsheet except for you. But still anyone that enters data on the form will have the information stored on the spreadsheet once they clicked on Submit. Click Save.
    4. Copy the address on the link share box and paste it on a page within your site using the iframe tag. Like this: "<iframe src="https://docs.google.com/spreadsheet/ccc?key=YOUR_SPREADSHEET_KEY_HERE&usp=sharing"></iframe>"
    5. You may customize the iframe further to make it look better by adding FRAMEBORDER, HEIGHT, WIDTH, MARGINHEIGHT and MARGINWIDTH options like this: "<iframe frameborder="0" height="1100" marginheight="0" marginwidth="0" width="1000" src="https://docs.google.com/spreadsheet/ccc?key=YOUR_SPREADSHEET_KEY_HERE&usp=sharing"></iframe>"
    6. You may play the values in red to suit your intentions.

Back to CyberLiving home page

Other Posts
Computer slows down even with only Chrome running
Replace that mouse with Camera Mouse 2013


Post a Comment