abbood abbood - 1 year ago 128
Ajax Question

how to make web form post directly to google sheets without authentication page


I simply want to create a landing page that has a form that saves visitors email address in a google sheet.

I found this useful post that has a google app script that does the work. I followed the instructions (on my localhost) and here is the request code:

request = $.ajax({
url: "",
type: "post",
data: serializedData

but when I click on submit I get this error:

XMLHttpRequest cannot load
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8000' is therefore not allowed
access. The response had HTTP status code 405.

Which is kind of weird, considering that I have already published the app to be accessible from everyone as depicted here:

enter image description here

Fair enough, I need to use CORS to access Google APIs.


The instructions above require that users authenticate themselves, so this is what a user flow would look like on my landing page:

user adds email in text field

user clicks on get started button



the form should submit just fine


a google authentication screen shows up, and asks people to authorize the app


How can I make the web form run the google app script without


Interestingly, I tested the same script on the blog post and it works fine, but if I copy the url of the script there"
and call it from my webservice, I get the same CORS error message.

So this is proof that the script can't just be called by anyone, it must be whitelisted somehow. How can I do that?

Update 2

the author of the blog implied that i should be using https, working on setting that up

Update 3

I'm using JSONP right now, but somehow the way the google app script interprets the JSONP data is weird.

So as instructed by Spencer Easton I'm calling it like so:

var url = "" + serializedData +"&callback=?";
$.getJSON(url, successCallBack).fail(failCallback)

however I keep on getting undefined,

enter image description here

I tried to debug my google app script code using instructions from here like so:

function fakeGet() {
var eventObject =
"parameter": {
"email": "hindi",
"callback": "fakecallback"

This code worked perfectly and updated the spreadsheet as expected. So what am I missing here? How is google app script exactly interpreting the jsonp data?

Answer Source

Since you are returning JSON you have to use JSONP.

For you it would roughly look like:


var url = "" + serializedData +"&callback=?";
$.getJSON(url, successCallBack).fail(failCallback)

 // we'll assume header is in row 1 but you can override with header_row in GET/POST data
var headRow = e.parameter.header_row || 1;
var callback = e.parameter.callback; // required for JSONP
return ContentService
        .createTextOutput(callback+'('+ JSON.stringify({"result":"success", "row": nextRow})+')')
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download