How to send mail using javascript
So is there anything python can do that we can't do with our JavaScript? in the past lesson we did how to login to our email using python. that is interesting for all pythonista but all fans of JavaScript see this boring and many ask can't " we send mail using JavaScript?" my answer is "why not?" Yeah we can login to our email and send our friend message. let's quickly see how it goes.
What is SMTP?
SMTP is a protocol used to send a specific type of data i.e email to the destined server followed by the recipient. these type of data are usualy need secure connections and user credentials, so it is not wise enough sending mail through a browser though if you have your own SMTP then you may proceed.
What do I need before I can send mail using JavaScript?
- Your Editor (Visual Code,Sublime, Notepad,CLI editors etc)
- Browser(chrome or Firefox)
-
SMTP Configuration ( for server details and authentication of credential).
How to Configure SMTP
Before you can send mail with smtp you have to make sure that you have properly configured the below settings:
- You need to allow less secure app access in Gmail for less security: To use Gmail SMTP you will go to setting and allow less secure app from google account or click here. turning the setting off will allow your codes to connect to Gmail.
- DIssabled 2-step factor authentication : since you want to connect to gmail with your program, so you need to disabled 2 step factor authentication in case you you manage your gmail security so much and if you don't then you don't need to. Once the above settings is done, then you are good to go.
Some Important credential needed.
- Host-name i.e smtp.gmail.com
- SMTP Username i.e Your Gmail address
- SMTP Password i.e your gmail password
- SMTP Port i.e 587 Now let's start writing the code to send mail. step 1: open your editor and save it as gmailmsg.html Step2: Download the smtp.js or include https://smtpjs.com/v3/smtp.js in your script tag like the following:
gamilmsg.html
<!DOCTYPE html>
<html>
<head>
<title>Send Mail with js</title>
<script src= "https://smtpjs.com/v3/smtp.js"> </script>
</head>
<body>
</body>
</html>
Step3: Add some html code to the body so that you provide place for user to input sender email address and password,reciever email address and the messages. like the following:
<!DOCTYPE html>
<html>
<head>
<title>Send Mail to friend with js</title>
<script src="https://smtpjs.com/v3/smtp.js"> </script>
</head>
<body>
<form method="post" name="Form">
<input type="Email" name="sender" placeholder="sender@gmail.com"><br>
<input type="Password" name="pswd" placeholder="Password here"><br>
<input type="Email" name="reciever" placeholder="Reciever@gmail.com"><br>
<input type="text" name="Message" placeholder="Your message here" id="Message"><br>
<input type="button" value="SendMessag">
</form>
</body>
</html>
step4: Add some css to it to look good a little if you like or add this little code
body{margin: 20px;}
input{border:solid red;
height: 4vh;
border-radius: 25px 25px 25px 25px;
text-align: center;
margin-bottom: 10px;}
form{border:solid 7px blue;
width: 50%;
height: 50%;
padding: 1%;
text-align: center;
background: #234a3a;
}
#Message{
width: 30vw;
height: 20vh;
word-break: break-all;
}
Now if you use the css above you will have below image on your browser.
if you have that then let's add a javascript function that will do all the work so you open a script tags and write the following codes :
function sendMail() {
var sender=Form.sender.value
var pswd=Form.pswd.value
var reciever=Form.reciever.value
var mesg=Form.Message.value;
alert(reciever)
Email.send({
Host: "smtp.gmail.com",
Username: sender,
Password:pswd,
To: reciever,
From: sender,
Subject: "Sending Email using javascript",
Body: mesg,
}).then(function (message) {
alert("mail sent successfully")
});
}
Now let's call the javascript function in our input button so that whenever the user click sendMail the function will be called. so we have this:
<input type="button" value="SendMessage" onclick ="sendMail()">
so the entire codes look like
Now you can check your program again the entire codes look like below:
<!DOCTYPE html>
<html>
<head>
<title>Send Mail</title>
<script src= "https://smtpjs.com/v3/smtp.js"> </script>
<style type="text/css">
body{margin: 20px;}
input{border:solid red;
height: 4vh;
border-radius: 25px 25px 25px 25px;
text-align: center;
margin-bottom: 10px;}
form{border:solid 7px blue;
width: 50%;
height: 50%;
padding: 1%;
text-align: center;
background: #234a3a;
}
#Message{
width: 30vw;
height: 20vh;
word-break: break-all;
}
</style>
</head>
<body>
<form method="post" name="Form">
<input type="Email" name="sender" placeholder="sender@gmail.com"><br>
<input type="Password" name="pswd" placeholder="Password here"><br>
<input type="Email" name="reciever" placeholder="Reciever@gmail.com"><br>
<input type="text" name="Message" placeholder="Your message here" id="Message"><br>
<input type="button" value="SendMessage" onclick ="sendMail()">
</form>
<script type="text/javascript">
function sendMail() {
var sender=Form.sender.value
var pswd=Form.pswd.value
var reciever=Form.reciever.value
var mesg=Form.Message.value;
alert(reciever)
Email.send({
Host: "smtp.gmail.com",
Username: sender,
Password:pswd,
To: reciever,
From: sender,
Subject: "Sending Email using javascript",
Body: mesg,
}).then(function (message) {
alert("mail sent successfully")
});
}
</script>
</body>
</html>
Now run the code, input your gmail and password, reciever e-mail and the message then click SendMessage.
does it work? yeah! that is how easy it is please consider to follow me so that you don't means any other class.
if you have any question don't hesitate to ask. chat me up on WhatsApp or Mail. Don't forget to follow me on Twitter so that you don't miss any of my articles.
Top comments (0)