Up next in 10
Google Apps Script to Submit HTML5 Form Data to Google Sheets in Browser Using Javascript
Dec 21, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello friends, today in this tutorial
0:02
I will be showing you a very simple
0:03
application inside which you can just
0:05
transfer all the information that you
0:06
submit inside your HTML form to your
0:09
Google sheet using Google app script. So
0:12
basically this is the demo of this
0:14
application. You can see that there are
0:16
two fields out there email address and
0:18
name field. So whatever information that
0:20
you will write inside this field guys it
0:23
will be transferred inside this Google
0:25
sheet. So let me take you a very simple
0:27
example. Let me enter the email address.
0:30
Uh let me enter Geek Eye Gotham and uh
0:33
enter the name as well. Let me enter
0:35
this name here. So as soon as you can
0:37
see guys, if I click the send button,
0:39
this information will be sent directly
0:41
to my Google sheet. Here you will see
0:43
you can see result is success row is
0:45
added here. So in this way guys, you can
0:48
capture any sort of email address or
0:50
names of the person. You can deploy this
0:51
application on your website also. Let me
0:54
change this email address to
0:56
johntheategmail.com.
0:58
And so again if I click send here you
1:01
will now see again this second row will
1:03
be inserted. You will see name, email,
1:05
date, date will automatically get
1:07
inserted with the today's date. So you
1:10
can just automate your Google sheet guys
1:12
and capture the information that is
1:13
submitted by the user inside HTML form.
1:16
You can deploy this website to WordPress
1:18
or any custom website. You can have a
1:20
user email capture form here where you
1:22
can just capture the user information
1:25
and just get all the email addresses out
1:27
there. So this is very simple guys using
1:30
Google appcript. We will be showing you
1:32
step-by-step tutorial how to do this
1:34
process. It's very simple. So if you go
1:36
to my tutorial website which is hosted
1:38
on web ninja developer.com I have given
1:41
the link in the description of this
1:43
video. So you will find out the
1:45
step-by-step blog post. All the
1:46
instructions will be given. So I will
1:48
highly recommend that you read that blog
1:50
post also alongside watching this video.
1:53
So let's start building this application
1:55
from scratch guys. So as you all know
1:57
guys Google appcript basically it's a
1:59
scripting language where you can develop
2:01
uh apps rel using the Google API. So if
2:04
you just write Google appcript this is
2:06
just a scripting language developed by
2:09
Google in 2009
2:11
and basically it makes use of Google
2:13
APIs. So this is their
2:16
uh website guys and basically you can
2:18
see build web apps and automate task
2:20
with Google app script. So you just
2:22
click start scripting and you will be
2:25
redirected to their editor here. So here
2:27
you can create any sort of project here
2:29
and specifically guys we are working
2:31
with Google sheet here. So we will need
2:33
to go to Google sheet and here you need
2:36
to first of all create a Google sheet
2:37
here. So click on go to sheets and here
2:40
guys you need to create a blank sheet
2:42
here and you can just rename this sheet
2:45
to any name of your choice. It totally
2:47
depends upon you. So let me name as
2:50
capture email. So I am saving it guys
2:54
you can see that. And now you just need
2:56
to create three columns out there which
2:57
is the date, the name field and the
3:01
email field. So sorry this needs to be
3:05
email
3:06
and this one should be name of the
3:08
person that's it. So just create these
3:10
three fields out there three columns
3:12
guys. So all this information will be
3:14
get inserted inside these three columns.
3:16
And now you simply need to go to
3:19
extensions tab. And now you need to
3:20
select the third option which is called
3:22
as appcript. So just select this option
3:25
guys. So now we will be redirected to
3:27
the editor where we will write some code
3:29
here for building this application. And
3:31
it's very simple code you will I will
3:33
write step by step. So this is the
3:36
editor guys. Basically here you can
3:38
write all your code. This is the
3:40
extension of this file of Google script
3:42
which is GS code.gs.
3:44
Basically it's just a JavaScript code.
3:46
It's very simple.
3:48
Let me create some spacing here. And uh
3:52
now let me just create. So first of all
3:54
guys we will write the sheet name where
3:57
we will be editing. The sheet name will
3:59
be simply sheet one because if you see
4:02
in the bottom side where you're editing
4:04
the sheet one so that's why we have
4:06
written sheet one here. After this guys
4:08
we just need to get the
4:11
script property
4:13
and uh property service and this
4:16
contains a method which is called as get
4:18
script properties. So we will do like
4:19
this. So it will get the properties of
4:21
the script and now we need to create a
4:23
initial setup guys uh method where we
4:26
need to grant the permission to the user
4:28
to use this script spreadsheet
4:30
application. We need to grant the
4:32
permission from the user. So for doing
4:35
this guys we need to create a new
4:36
variable which is called as active
4:39
spreadsheet. What is active spreadsheet?
4:42
And here this needs to be equal to
4:44
spreadsheet app. This is the actual API
4:47
that we are using and this contains a
4:50
method which is get active sheet. Get
4:52
active spreadsheet. This is a method.
4:55
After this guys we will say script
4:57
property and we need to set a property
4:59
here which is called as the key property
5:01
and this needs to be equal to active
5:03
spreadsheet and we need to get its ID.
5:05
So there is a method out there which
5:07
lets you get its ID which is called as
5:09
get ID. That's it. So now if you save
5:13
this code there is you can save your
5:14
project by clicking this button. So it
5:16
will save your project and after this
5:19
you will have this function which is
5:21
called as initial setup. So this will
5:23
contain all the methods that you create.
5:25
So after this guys what we need to do is
5:27
that we need to now enter the post
5:30
method. So whenever the user submit the
5:33
form what should happen basically
5:34
whenever I click this button which which
5:36
is send here. So what should happen? So
5:38
we need to write this method which is
5:39
automatically gets called which is
5:42
called as do post and uh inside this
5:46
method guys we will be inserting the
5:47
information of the user which they
5:49
submit. So e parameter is automatically
5:52
passed here and we will be creating a
5:54
lock service here which is get script
5:56
lock and we will be locking it for I
6:01
think 10 second.
6:03
This is in millisecond. So 10,000
6:05
milliseconds is equal to 10 second and
6:07
we will now have a try catch block guys.
6:09
So this will be a try catch block and
6:11
inside this we will be basically be
6:13
inserting the information. So if you're
6:16
not understanding this code guys totally
6:18
normal you you just need to copy paste
6:21
this code and uh we need to open this uh
6:24
spreadsheet by its id. So this contains
6:27
a method open by id and here we have the
6:30
have to pass script property dot get
6:33
property
6:35
and here we need to pass the property
6:37
which is key that's it and uh after this
6:41
guys we need to select the sheet which
6:43
sheet we are doing. So con sheet is
6:46
equal to doc dot get sheet by name get
6:49
sheet by name and here we need to pass
6:52
the sheet name that we have configured
6:54
which is sheet one. So as this is a try
6:56
catch block guys so we also need to
6:58
catch the error as well. So we just need
7:00
to write the catch statement also here
7:03
catchy. So if any sort of error take
7:05
place we will simply return the error
7:08
which is using content service. This
7:10
contains a method which is create text
7:12
output. So we will JSON stringify we
7:14
will return the response in a JSON. So
7:17
we will have a property called as
7:19
result. So inside this we will show our
7:22
error. So result will be equal to
7:26
error if any sort of error take place
7:28
and we will be also be returning the
7:30
error which is equal to e. That's it.
7:33
And also we need to set the mim type. So
7:36
mim type will be equal to content
7:38
service
7:40
dot mim type dot json because this is a
7:42
JSON response we are sending. So that's
7:44
why we have mim type json. So after this
7:47
guys we just need to after we select the
7:50
sheet we need to add the headers. So
7:53
headers are simply basically the name,
7:55
email and date. So sheet dot get range
7:58
we will be get access to those headers.
8:00
So get range 1 comma 1 comma 1. So these
8:04
are three columns for date, name and
8:06
email and then we will be providing the
8:09
actual information which is sheet dot
8:12
get last column. And inside this method
8:16
basically
8:18
we will get the values. So get values
8:22
get values
8:25
we will get the values. So basically
8:27
which is present inside the active
8:29
spreadsheet which is name date and
8:31
email. So after getting this uh
8:33
information guys
8:36
if you see
8:40
uh get values we will get the values
8:42
like zero zero index and now we will be
8:45
going to the next row guys basically we
8:48
will say sheet dot get last row
8:54
sorry last row
8:57
and inside this we will be incrementing
8:59
it by one. So every time when you add
9:01
the information, a new row will be
9:03
inserted. That's why we are incrementing
9:04
by one. That's it. This is the logic
9:07
behind this code. After this guys, we
9:09
need to add the row of data. What we
9:11
need to add? So we will be getting the
9:13
information from the user. We will use
9:15
the map method and inside this we will
9:18
have the actual information. So this
9:20
will be return header. So for the date
9:23
field guys, it will automatically get
9:25
inserted with the the today's date. So
9:28
that's why we will be using the date
9:29
constructor here new date and here we
9:32
will be adding the e dot parameter which
9:37
is header like this. [snorts]
9:42
This is a new row guys. So now we just
9:44
need to add this. So now for adding this
9:46
row here it's very simple.
9:49
We will basically call this method on
9:52
the sheet object. So there is a method
9:54
out there which is called as get range
9:56
and we will pass the
9:59
uh next row and we will pass the data as
10:02
well. So 1 comma 1
10:05
and then we will say next row dot length
10:11
and we need to set the values here. So
10:14
set the values
10:16
and here we will pass the new row. So
10:18
automatically whenever you submit the
10:20
information, this row will be added here
10:22
using set values. That's it.
10:26
After this guys, we just need to return
10:28
some JSON response to the user that your
10:30
uh data has been inserted. So again we
10:33
will use this content service. Basically
10:35
this is used to return some uh data back
10:39
to the user. Create text output
10:41
JSON.stringy file. This time the object
10:44
will be the result will be on success.
10:47
So result is success. This is not
10:50
mandatory that you pass a notification
10:53
to the user but it's just a
10:56
nice little thing that you need to pass.
10:59
So if you see this needs to be a colon.
11:04
That's it. After this guys we also need
11:07
to set the me type which is uh JSON. So
11:10
content service
11:13
dot mimype dot JSON that's it. So this
11:17
is all the code guys you need to write
11:18
inside this file. So now we just need to
11:21
select the initial set setup method here
11:23
and then click on the run button. So as
11:26
you click the run button guys initially
11:28
you will be granting to the screen here
11:29
which we need to grant the permissions
11:31
of the sheet API. So whenever you hit
11:36
this button you need to allow the
11:38
permission.
11:40
You need to click on the review
11:42
permission button authorization you need
11:44
to grant access. Select your account and
11:46
then you need to click on advanced here
11:49
and go to un unsaved version. So after
11:53
you click this button you will be just
11:56
click the allow button. So it will be
11:58
able to edit, create and delete all your
12:00
Google sheet spreadsheets. So click on
12:03
allow. After that you allow the button
12:06
you will be granted the access. So this
12:08
is completed. So you need to execute
12:10
this method.
12:12
Uh
12:14
it is saying that initial setup code
12:16
line six.
12:19
Uh
12:21
I think uh I have made a mistake here in
12:24
uh writing the code. So simply you need
12:26
to copy paste the code guys. I have
12:28
given that code in the description. So
12:31
sometimes uh spelling mistakes can
12:33
occur. So that's why I think you should
12:36
copy paste this code.
12:38
So now once once again you need to run
12:40
this code initial setup method. Run this
12:43
again. You will see attempted to execute
12:45
but it was deleted.
12:55
Execution started. Execution completed.
12:57
So now there is no error out there guys.
12:59
Now you need to go to triggers option
13:01
guys. You need to add a trigger. So when
13:03
something what what happens when you
13:05
submit the user form just click on
13:07
triggers and you need to add a new
13:09
trigger. So you can see that you need to
13:12
select here the post method here. Choose
13:14
which function function to run. So
13:16
simply select do post and uh select
13:18
event type. So whenever user submit the
13:20
form. So select this. So this will be
13:23
the same here head portion and the event
13:25
s will be the spreadsheet all that stuff
13:30
and click on save. So this you need to
13:33
add the trigger. So again it will ask
13:35
the permission for you. So simply select
13:37
the permission
13:40
and allow the permission. That's it.
13:43
This is all that you need to do. After
13:45
that it will add this trigger. You will
13:48
see. Now you need to deploy this
13:50
application guys. So to a web web URL so
13:53
that you can access this simply click on
13:55
deploy and then you need to click on new
13:57
deployment and uh then you need to
14:00
select the event which is it can be
14:02
either API executable add-on library I
14:04
need to select web app so simply select
14:07
this name capture email app for website
14:13
users so you who has access so simply
14:17
select anyone that's it and click on
14:19
deploy so now it will deploy deploy this
14:21
application on the live internet guys.
14:23
So, so that you can make a request to
14:25
those. This is your URL. So, simply copy
14:27
your URL. This is different for you. So,
14:30
now simply if you paste it in the
14:33
browser, you will see u do get is not
14:36
there but do post is there. So, we need
14:38
to make a simple HTML form here
14:40
basically where we can simply get the
14:42
information. So, form action. So, just
14:44
copy paste that URL. That's it. This is
14:45
the URL of that and just make a simple
14:48
method of post. You can create this form
14:51
at anywhere guys local host or any
14:53
inside your WordPress website or custom
14:56
website. You just need to have a input
14:58
form here like this. We will be getting
15:00
this uh just give it a name attribute of
15:03
uh email
15:06
and uh enter email.
15:11
Then we will be writing the
15:17
name of the person.
15:23
So this will be type email here that's
15:25
why.
15:27
And then guys we will have a simple
15:29
submit button to submit the form.
15:33
Uh send. So now this is our form. So if
15:37
I open with live server. So what you
15:39
will see guys if I open my sheet here
15:40
you will see date, email and name will
15:43
field will be there and let me open this
15:46
uh
15:51
let me open
15:53
in a new tab here and this is my form.
15:57
So basically let me enter a email
15:58
address and let me enter
16:01
a name name.
16:03
So you will see if we click the send
16:05
button
16:08
you will see this information is
16:10
inserted the today's date is 26 November
16:12
and you can see name email address name
16:16
you can see that so once again if I
16:18
submit with a different email address
16:20
John
16:23
click on send.
16:26
So in this easy way guys you can capture
16:28
information with the HTML and you can
16:31
send it directly to your Google sheet
16:33
using Google app script. I have shown
16:35
you step-by-step code that is required
16:37
for this. You can go to the blog post
16:38
and copy paste all the source code and
16:41
please hit that like button, subscribe
16:42
the channel and I will be seeing you
16:45
guys in the next video. Until then,
16:47
thank you very