Up next in 10
Google Apps Script to Send Email Using GmailApp in HTML Form & Javascript Web App in Browser
Dec 21, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/google-apps-script-to-send-email-using-gmailapp-in-html-form-javascript-web-app-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello friends, today in this tutorial
0:02
I will be showing you that how basically
0:04
you can send messages to your Google
0:07
account using Gmail app API inside
0:11
Google appcript. So basically this is a
0:13
demo of the application. Here we have
0:14
simple HTML form out there. We have
0:16
three input fields out there. You can
0:18
just send to any email address. You need
0:20
to enter out the subject and enter out
0:23
the message. If you click out send guys,
0:25
there will be alert message that your
0:27
message has been successfully sent. Now
0:31
if I basically check here to my email
0:33
address. If I check,
0:36
you will see this uh message will be
0:38
sent here. You will see that this
0:40
message is sent here. Whatever message
0:42
that we sent from this email address. So
0:45
we will try to basically build this
0:46
application. We can basically change
0:48
this email address to whatever email
0:50
address that we want to send here.
0:53
So if I now click send
0:56
and now if I check out the other email
0:59
address guys you will see that basically
1:05
we will get this message you will see
1:06
that
1:10
uh the email address we got here. So
1:13
after now guys we will build out this
1:15
application. So for building it out we
1:19
will need this Google app script. The
1:21
source code is given in the description
1:23
of the video guys. You can go to it and
1:26
get that and click on new project. And
1:28
basically guys inside this project we
1:32
will require the code here. Uh the code
1:34
is very simple guys. Uh in order to send
1:36
out a particular email. Uh we will first
1:40
of all need a template. So we can
1:43
basically make a function here do get
1:46
and inside this we can load a template
1:48
which is will be uh index html. So we
1:52
can use HTML service and it contains a
1:54
method create HTML template from file
1:58
and we can pass the name which is index
2:02
don't need the extension. So then we can
2:04
simply return template evaluate that's
2:07
all. So after this we can basically
2:09
create a new file here guys which will
2:11
be HTML file which will say index html.
2:15
So right here inside this file guys we
2:17
will have uh
2:22
uh we need to write some code here and
2:25
we can have a simple form here form
2:27
element.
2:31
So inside the form element guys uh I
2:34
will just copy paste the code here. So
2:37
there will be a simple uh three fields
2:41
guys which will allow the user to enter
2:43
the email address to which they want to
2:45
send the email address. Then we will
2:47
have the subject field. Then we have the
2:50
actual text area where we will construct
2:52
our message. Then we will have a submit
2:55
button. This will be a web application.
2:57
We can deploy this application guys. New
2:59
deployment. I can simply click this as a
3:02
web application. So you can say that
3:04
mail app and then we will allow
3:06
everyone. So we will select here anyone
3:09
and then we will click deploy. So now
3:11
this application will be deployed here.
3:14
So so now if I open this link guys which
3:17
they provide me you will basically now
3:20
see this form right here. This three
3:22
fields will be there. So now what we
3:25
need to do right here we need to enter
3:27
just write our JavaScript code here. So
3:30
for writing the JavaScript code guys, we
3:32
will basically
3:34
have the script tag.
3:38
So inside the script tag guys, we will
3:40
basically what we will do, we will
3:43
target the form element by
3:46
document.query selector
3:50
and uh form and we will basically add a
3:53
event listener to it. Add event listener
3:56
and uh we will basically have the submit
3:58
event handler. So whenever the form is
4:00
submitted we will this call back
4:02
function will execute which will have e
4:04
parameter. We will prevent the auto
4:06
submission. We will say e.tprevent
4:08
default and then we will get all these
4:11
three things that the user submits which
4:13
the email address subject and the actual
4:15
message. For this also we will use
4:18
document.query selector guys. Document
4:20
getelement by ID. We have given ID to
4:23
each of the field right here. You will
4:24
see that we are getting these things out
4:26
there. So after this guys we will need
4:28
to run a simple Google script. So now to
4:31
call that Google script guys it's a very
4:34
simple line of code that we need to
4:36
write google.script
4:38
and we need to run a simple function
4:42
which will be send email
4:45
and uh
4:48
here guys we will pass these three
4:50
things which is to subject and message.
4:54
So we are passing these three things
4:56
guys to the Google app script function
4:58
which will be send email. We can even
5:00
have a uh success handler guys which
5:03
will be executed whenever you have
5:06
successfully
5:08
send out the email address with success
5:10
handler. And uh we can basically provide
5:12
a function here of success and we can
5:15
basically define this uh success
5:17
function right here below.
5:21
Just after this we can say
5:25
just this function when it is over right
5:27
here we can define at
5:31
outside this we can define this success
5:34
function guys right here. So inside this
5:37
success function we can simply uh say to
5:40
the user that your email address has
5:41
been successfully sent. So email is sent
5:44
sent successfully that's all. So this
5:47
will be executed whenever your Google
5:49
app script is completed. this call back
5:51
function success call back you will see
5:53
that now we need to define this send
5:55
email function guys so right here inside
5:57
Google codegs
6:00
we need to write this function which
6:02
will execute which will actually send
6:04
out the email address so now for sending
6:07
out the email address guys it's very
6:09
easy
6:12
we have a this function which is send
6:15
email
6:18
and we will basically have these three
6:20
things guys which is the two
6:25
and the subject and the actual message
6:30
and then we have this Gmail app guys
6:32
Gmail app API so we can have various
6:35
meth methods out there you will see that
6:37
guys create label draft delete label all
6:40
that stuff inside this we have this
6:43
method send email and here we will
6:45
basically use the two subject and
6:49
uh object here which will be HTML body.
6:55
So here HTML body will be simply message
6:58
guys. So here the message will be sent.
7:00
So simply save this and now we need to
7:02
update this. So click on manage
7:04
deployment and create a new version.
7:06
Click on that and click on deploy. So
7:10
now your application is deployed guys.
7:12
So now you will be able to you need to
7:14
firstly authorize the access guys
7:17
because we have used the Gmail API. So
7:19
simply you need to go to advance and
7:21
simply grant the permission in on behalf
7:24
of you. You will be able to send and
7:27
permanently delete emails. Simply allow
7:29
these permissions. Now if you go to that
7:32
URL guys you have these three fields out
7:35
there. You will basically need to send
7:37
to this email address. So we will type
7:40
this email address.
7:42
And uh this is the email the subject and
7:45
the body. This is the body of the mail.
7:50
That's all. And when we have a send
7:52
method guys uh click on this button. And
7:54
now you can see email is sent
7:56
successfully. If I now check guys you
7:58
will see basically this email will be
8:00
there. You will see this is the email
8:02
and this is a body of the email. So
8:05
using uh this is a web application guys.
8:08
The link is unique to you. You can share
8:10
this link to anyone. So anyone can send
8:12
you email. Basically you can type here
8:16
any email of your account choice and the
8:20
email will be sent from your own
8:22
account. That's important. So the email
8:26
that will be sent it will be sent from
8:28
your own Google account. So just make
8:30
sure that you are sending by the correct
8:33
email address. So here we can change to
8:35
any user. This was the application. You
8:37
can get all the source code. You can
8:39
purchase the s source code in the
8:40
description of the video if you have
8:42
some doubt. And thank you very much guys
8:44
for watching this video.