Click here to Skip to main content
11,630,646 members (81,157 online)
Click here to Skip to main content

Store your form data in Google Spreadsheet

, 23 Jun 2014 CPOL 37.5K 23
Rate this:
Please Sign up or sign in to vote.
This is probably the simplest solution for storing web form data into database. We will use Google Forms and Google Spreadsheets as our 'database'.

Introduction

HTML <form> tag is available as a part of HTML from the beginning of the Internet. It is used on web pages to collect data from the users. After clicking Submit button, form data is sent to server, which usually stores them in one of the databases. While use of <form> tag is easy, server side part can be sometimes challenging to set up and operate. In this tip, I will show how we can use Google Docs Forms and Google Docs Spreadsheets as our 'database' for saving user inputs.

Using the Code

To use Google Forms and Spreadsheets as your server 'database', you will need to complete some easy steps. Google account is required to complete this task.

  1. Go to docs.google.com and create a new form. In my sample, I have created form with the following fields: Email, Firstname, LastName and Company. To keep this simple, I've set all fields to type text and without any validation rules.

  2. Click 'View Live Form' button and check the source of the form that is shown. As the source might not be very easy to read and understand, you will have to find a lot of information. First one is the form post URL. Search for '<form action' and mind URL in action value:
    <form action="https://docs.google.com/forms/d/1PTIFxKDZBqKdrkGAgrsa28wus8FyP6XrMTWzabRuC18/formResponse" 
    method="POST" id="ss-form" target="_self" 
    onsubmit=""><ol style="padding-left: 0"> 
  3. Find the unique names of each field. In my case, we have four different form fields. Look for the field name and mind for <input> tags. Attribute name is the parameter that we will need. Name value start with the 'entry.' keyword. The name of the email field in my example is entry_1402836733.
    <input type="text" name="entry.1402836733" 
    value="" class="ss-q-short" id="entry_1402836733" 
    dir="auto" aria-label="Email  " title=""> 

    You will need to find names of all the form field.

  4. This is all the information you need. Now let's make our own form in HTML file. You can put the code below into the <body> tag.
    <input id="Email" name="Email" 
    type="text"  placeholder="Email Address">
    <input id="First" name="First" 
    type="text"  placeholder="First Name">
    <input id="Last" name="Last" 
    type="text"  placeholder="Last Name">
    <input id="Company" name="Company" 
    type="text" placeholder="Company">
    <button id="ButtonSubmit" onclick="postContactToGoogle()" 
    type="button" >Send</button> 
  5. In the final step, we will create JavaScript function that will post data to Google Form. In order to work, you need to reference jQuery.
        <script>
            function postContactToGoogle() {
                var email = $('#Email').val();
                var first = $('#First').val();
                var last = $('#Last').val();
                var company = $('#Company').val();
    
                    $.ajax({
                        url: "https://docs.google.com/forms/d/1PTIFxKDZBqKdrkGAgrsa28wus8FyP6XrMTWzabRuC18/formResponse",
                        data: { "entry_1402836733": email, 
                        "entry_1874720748": first, "entry_2092106103": 
                        last, "entry_944373055": company },
                        type: "POST",
                        dataType: "xml",
                        statusCode: {
                            0: function () {
                                window.location.replace("ThankYou.html");
                            },
                            200: function () {
                                window.location.replace("ThankYou.html");
                            }
                        }
                    });
            }
        </script>

    Code is actually simple once we collected relevant data from Google Form source. First, I use jQuery to get user inputs and we store them in local variables. Then I initiate Ajax POST call to the URL from Google Form source. URL is called with key-value parameters. After I receive statusCode from server, I redirect to browser to another page.

Points of Interest

I found that Google Forms and Google Spreadsheets can be an excellent database foundation form small scale projects and prototypes. Doing data collection this way, it is easy to share the responses.

History

I never liked history teachers. Wink | ;)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dejan Mauer
Software Developer (Senior) CENT SI d.o.o.
Slovenia Slovenia
I have strange hobby - programming.
While I am not programming I am tasting some good beers Wink | ;)

You may also be interested in...

Comments and Discussions

 
GeneralRegarding Post save form data to Google Spread sheet Pin
Member 1170442919-May-15 20:42
memberMember 1170442919-May-15 20:42 
GeneralRe: Regarding Post save form data to Google Spread sheet Pin
Member 1185498422-Jul-15 7:01
memberMember 1185498422-Jul-15 7:01 
QuestionHow to work with Non-textbox elements? Pin
Member 1160372313-Apr-15 22:59
memberMember 1160372313-Apr-15 22:59 
Questionshould this create a spreadsheet in my google drive ? Pin
mlotfi11-Apr-15 18:21
membermlotfi11-Apr-15 18:21 
QuestionPlease help nothing work when run code Pin
Member 1039550427-Feb-15 23:51
memberMember 1039550427-Feb-15 23:51 
QuestionNOTHING WORKS IN MY CODE EVEN AFTER COPYING OF MY GOOGLE FORM PLEASE HELP Pin
Member 1039550421-Feb-15 17:56
memberMember 1039550421-Feb-15 17:56 
BugI am getting an Access-Control-Allow-Origin Pin
Ubaier Bhat7-Feb-15 12:02
memberUbaier Bhat7-Feb-15 12:02 
Questionsame problem. Pin
Ankan Seth31-Jan-15 11:20
memberAnkan Seth31-Jan-15 11:20 
QuestionCool, but... Pin
Member 1140040224-Jan-15 21:39
memberMember 1140040224-Jan-15 21:39 
QuestionName or ID? Pin
Member 1106522626-Sep-14 4:06
memberMember 1106522626-Sep-14 4:06 
QuestionWindow location / page to apear after submit Pin
Member 1101982718-Aug-14 5:15
memberMember 1101982718-Aug-14 5:15 
AnswerRe: Window location / page to apear after submit Pin
Member 1185498422-Jul-15 6:59
memberMember 1185498422-Jul-15 6:59 
GeneralMy vote of 5 Pin
khanhamid92215-Jul-14 11:51
memberkhanhamid92215-Jul-14 11:51 
GeneralMy vote of 4 Pin
Brian A Stephens26-Jun-14 2:42
professionalBrian A Stephens26-Jun-14 2:42 
GeneralRE: Store your form data in Google Spreadsheet Pin
Member 1059181624-Jun-14 7:19
memberMember 1059181624-Jun-14 7:19 
QuestionThis is not working for me - nothing is getting saved to the google doc Pin
Member 1082256215-May-14 20:56
memberMember 1082256215-May-14 20:56 
AnswerRe: This is not working for me - nothing is getting saved to the google doc Pin
Dejan Mauer15-May-14 23:10
memberDejan Mauer15-May-14 23:10 
GeneralRe: This is not working for me - nothing is getting saved to the google doc Pin
Member 1082256216-May-14 4:41
memberMember 1082256216-May-14 4:41 
GeneralRe: This is not working for me - nothing is getting saved to the google doc Pin
Member 1082256216-May-14 5:48
memberMember 1082256216-May-14 5:48 
Questionis it code given enough?im using a notepad to test. unsuccessfull.please help Pin
Cik Miko ZaMija22-Apr-14 0:29
memberCik Miko ZaMija22-Apr-14 0:29 
AnswerRe: is it code given enough?im using a notepad to test. unsuccessfull.please help Pin
Dejan Mauer22-Apr-14 1:15
memberDejan Mauer22-Apr-14 1:15 
GeneralRe: is it code given enough?im using a notepad to test. unsuccessfull.please help Pin
Member 107950294-May-14 21:28
memberMember 107950294-May-14 21:28 
Questionother entries which are not text Pin
Member 107269625-Apr-14 6:39
memberMember 107269625-Apr-14 6:39 
Questioncan we get the entry ID by code? Pin
graytay24-Mar-14 2:06
membergraytay24-Mar-14 2:06 
AnswerRe: can we get the entry ID by code? Pin
graytay24-Mar-14 2:39
membergraytay24-Mar-14 2:39 
GeneralRe: can we get the entry ID by code? Pin
Member 1144118812-Feb-15 19:42
memberMember 1144118812-Feb-15 19:42 
Questioncheckbox Pin
Member 1061643921-Feb-14 21:18
memberMember 1061643921-Feb-14 21:18 
AnswerRe: checkbox Pin
Dejan Mauer21-Feb-14 22:49
memberDejan Mauer21-Feb-14 22:49 
Questionfetch from google Spreadsheet Pin
Jubayer Ahmed9-Feb-14 20:03
memberJubayer Ahmed9-Feb-14 20:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150723.1 | Last Updated 23 Jun 2014
Article Copyright 2014 by Dejan Mauer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid