How to Submit an HTML Form to Googl…

Guardado en Dropbox • 24/05/2018, 23E30

Get started

Member preview

David McCoy
Expat. Web developer. CTO of
Hipsters of the Coast.
Jun 10, 2017 · 5 min read

How to Submit an
HTML Form to
Google Sheets…
without
Google Forms
Google Forms is a great service.
Easy, good-looking forms with re-
sults stored in Google Sheets. But
what if you don’t want your form to
look like a Google Form? How can
you build your own HTML form and
record the responses in Google
Sheets?

The answer is surprisingly tricky.

One would think that Google Forms
would have an API to receive AJAX
requests but, alas, that is not that
case. So we’ll cut out the Google
Forms middleman and submit our
AJAX requests directly to Google
Sheets.

Setting up the
Google Sheet
Since we’re skipping Google Forms,
head straight to Google Sheets and
create a new spreadsheet. The only
thing we’ll need to do to the spread-
sheet itself is assign column names
for each form Meld we’ll be collect-
ing.

Place the names of each form Meld

in row 1. The order isn’t important,
but the name of the cell in the
spreadsheet must match the name
of the form input. It’s case-sensitive,
so choose your names carefully!
Con;guring the
Google Script
Now that we’ve set up our Google
Sheet with our form Melds, it’s time
to write the script that will allow us
to send our form data to it. From the
spreadsheet we just created, go to
the “Tools” menu and select “Script
editor” from the dropdown.

This will open a new Google Script

that will look something like this:
 Get rid of this useless function. We’ve got
our own for this job!

Delete that creatively-named func-

tion and copy/paste the following
gist:

The script above will conMgure your

Google Sheet to handle a GET re-
quest ( function doGet() ), tells the
spreadsheet where to place the re-
ceived data (lines 21–38), and sets
the allowed MIME type ( setMime‐
Type(ContentService.MimeType.J‐
SON) ). Give it a read—Will Patera
did a great job explaining the script
with his comments so I left them in
there. (The original gist can be
found here.)

Save the script and give it an appro-

priate name. Then go to the “Run”
menu and select “setup.”

You might be asked to give Google

Scripts to use your Google account.
Once you’ve given your authoriza-
tion, go to the “Publish” menu and
select “Deploy as web app.”

You will then be presented with a

few options with which to cus-
tomize your script.
The last two of these three options
are extremely important to set cor-
rectly or you won’t be able to access
your script with an AJAX request.
You must execute the app as your-
self and you must give “Anyone,
even anonymous” access to the app.
Without these settings your script
will reject any request from a diber-
ent server, like your form’s AJAX re-
quest, because it won’t be
conMgured to allow for cross-origin
resource sharing (CORS).

Once you’ve conMgured these op-

tions, go ahead and click “Deploy.”

You will the be presented with the

URL for your web app. This is where
we’ll be sending our AJAX request
so copy that URL and save it for lat-
er.

Building the
HTML Form
So we’ve got a Google Sheet set up
with a column for each of our form
Melds, as well as a script that will ac-
cept form data in an AJAX request
and write it to the spreadsheet. All
that’s left is to create an HTML form
so that we can collect some informa-
tion and persist it in our Google
Sheet!

There’s no need to do anything

fancy with your form—just make
sure that each input’s name matches
the name you used as column
names in your spreadsheet. Your
form might look something like this
if you were afraid of styling:
Again, the key is to make sure the
name of each input matches the
name of each column in your
Google Sheet.

Finally, we’ll connect our HTML

form with our Google Script with a
little JavaScript/jQuery. Nothing
too crazy here, either. We’re pre-
venting the form from submitting
normally and instead constructing
an AJAX request to the URL for our
web app/script that we obtained
earlier.
The only interesting part is the
data that we’re sending. Our script
is expecting a JSON data-type so
we’ll have to convert our form data
into a JSON object. I chose to do this
with the jQuery Serialize Object
script, which provides the serial‐

izeObject() method, and will con-

vert our form into a JavaScript
object. You can solve this problem
however you’d like—as long as your
data is structured like JSON!

Now, when someone submits your

HTML form, their responses should
be recorded in your Google Sheet.
Sweet!

A Google Form-less
Google Form
Well, it took a bit more work than
should have have been necessary,
but we did it! By using Google
Sheets in conjunction with Google
Scripts, we were able to build our
own Google Form…without being
forced to use a Google Form. Why
there isn’t a Google API to do this is
beyond me…but at least it’s possi-
ble!

Update! If You’re
Having Issues…
Thanks to Joel Aguero for address-
ing some issues people are having
using this guide. His response is
here and reproduced below.

1. CORS Issues
 If you’re seeing an error like the
following: “No ‘Access-Control-
Allow-Origin’ header is present
on the requested resource,” dou-
ble-check you’re making a GET
request and not a POST request.

2. Web App URL

The format of the URL is not the
same as in David’s original ex-
ample if you have multiple
Google accounts. SpeciMcally,
Google’s web app URL looks like
this:
https://script.google.-
com/macros/u/1/s/…/exec
You must remove the “/u/1” to
hit the endpoint, resulting in the
following:
https://script.google.-
com/macros/s/…/exec

3. Accessing Parameters
 If you’re struggling to access pa-
rameters or properly pass data,
try attaching them to the end of
the url instead:
https://script.google.-
com/macros/s/…/exec?9rst-
Name=Joel
If you go this route, I recom-
mend using encodeURICompo-
nent to escape special characters
(eg: the “+” in test+1@exam-
ple.com).

4. Request Libraries
I used the Fetch API to make the
request because React suppos-
edly ships with a polyMll by de-
fault. If you aren’t using React, I
recommend the popular pack-
age request or Mnding a polyMll
so you can ober cross-browser
support.
 Web Development Google Forms

Html Forms Google Sheets

Google Scripts

Like what you read? Give David

McCoy a round of applause.
From a quick cheer to a standing ovation,
clap to show how much you enjoyed this
story.

1.1K 39

David McCoy Follow

Expat. Web
developer. CTO of
Hipsters of the
Coast.