Add basic data to a Google Spreadsheet via a simple HTML Form

Question

I have a form with a Name and an Email address, that the user can fill out.

Now if the user clicks the submit button, I want to send the data to a spreadsheet ideally without using some server-side magic..

This is my Form:

<form method="post" action="SOME-ACTION-HERE" accept-charset="UTF-8">
    <input type="text" name="newletter_name" placeholder="Name">
    <input type="text" name="newletter_email" placeholder="Email">
    <input type="submit" value="Subscribe" />
</form>

Is there a way to do this with my own custom HTML-form. I know that you can create a google form for a given spread sheet, but I want to use it like some sort of widget.

Answer 1

Yes this is possible. Using some server side magic or not.
But what's important is to know witch server we are talking about, your server or google server, because in the end it will go server side to be stored on the spreadsheet apps :)
I think this is possible to do it in full JS (but it will be really painfull).
The solution that I propose you here is to relay on a google apps script that will handle the server side magic in a really easy way: the demo:

the HTML code on you site:

<form  id="form" method="get" action="https://script.google.com/macros/s/AKfycbxeKTVlTkqSGLIRphBrzACjuWlfmejbPIG7NqBxx-7Us7lnqLw/exec" accept-charset="UTF-8">
    <input type="text" name="newletter_name" placeholder="Name">
    <input type="text" name="newletter_email" placeholder="Email">
    <input type="submit" value="Subscribe"/>
</form>

and here the google apps script:

function doGet(e){
  var vals=[];
  vals.push(new Date());
  for(var i in e.parameter){
    vals.push(e.parameter[i]);
  }
  SpreadsheetApp.openById("0Ao02g19G1-G-dElQQW92ekZWa0lGRGREYUpHRWQwTVE").appendRow(vals);
  return ContentService.createTextOutput("added");
}

If you want to see the result you can have a look to the spreadsheet here

what you need to know:
The google apps script is here located in the spreadsheet (but that's not mandatory as in the script I call it with his id).
In order to run the script you must publish it and allow anyone to run it. When you'll do this action you will get the published URL that you need to put in your HTML code. Here its: https://script.google.com/macros/s/AKfycbxeKTVlTkqSGLIRphBrzACjuWlfmejbPIG7NqBxx-7Us7lnqLw/exec

Hope this is a satisfying answer for you.