Typically, emails are sent using web server on back end. But it can be tedious to setup email sending on web server, depending on your programming language. Sometimes you just need to send a quick, simple email from your web page or application without much overhead. You can easily do this using JavaScript itself, without adding any code in backend. In this article, we will learn how to send email from JavaScript.
How to Send Email from JavaScript
There are many third-party JS libraries to help you send emails in JavaScript. We will be using a free JS library called Simple Mail Transfer Protocol (SMTP) for our purpose. SMTP is a common protocol to send emails on web, and the library is also named the same. To make this work, you need to provide the proper SMTP server details when you setup email client. We will be configuring our SMTP JS client to send emails via GMail.
Before we proceed, you need to log into your GMail account that you will be using to send emails, disable 2 step verification, and also enable less secure apps to access GMail here.
Thereafter, add the following line in your HTML file from where you want to send email.
<script src="https://smtpjs.com/v3/smtp.js"></script>
Next, add the following Script tag to define the JS function to send email.
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.gmail.com",
Username: "sender@email_address.com",
Password: "Enter your password",
To: 'receiver@email_address.com',
From: "sender@email_address.com",
Subject: "Sending Email using javascript",
Body: "Well that was easy!!",
})
.then(function (message) {
alert("mail sent successfully")
});
}
</script>
Replace the parts in bold above with your GMail username, password, from email address, and to email address. You can also edit email subject and body as per your requirement.
Add the following HTML code to define a button, which when clicked will call the above function and send email.
<body>
<form method="post">
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
Here is the full HTML code for your reference.
<!DOCTYPE html>
<html>
<head>
<title>Send Mail</title>
<script src=
"https://smtpjs.com/v3/smtp.js">
</script>
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.gmail.com",
Username: "sender@email_address.com",
Password: "Enter your password",
To: 'receiver@email_address.com',
From: "sender@email_address.com",
Subject: "Sending Email using javascript",
Body: "Well that was easy!!",
})
.then(function (message) {
alert("mail sent successfully")
});
}
</script>
</head>
<body>
<form method="post">
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
</html>
If you want to send emails to multiple recipients, just list them one after the other in a comma separated manner.
to: 'first_username@gmail.com, second_username@gmail.com',
In our example, we have sent a plain text email by defining its content in Body variable. If you want to send an HTML email, you will need to specify HTML contents in html variable.
html: "<h1>Hello World</h1> <p>Have a nice day</p>"
If you want to add attachments, specify their paths in Attachment variable.
Attachments : [{
name : "File_Name_with_Extension",
path:"Full Path of the file"
}]
Here is an example to send HTML email with attachment.
<!DOCTYPE html>
<html>
<head>
<title>Sending Mail</title>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.gmail.com",
Username: "sender@email_address.com",
Password: "Enter your password",
To: 'receiver@email_address.com',
From: "sender@email_address.com",
Subject: "Sending Email using javascript",
html: "<h1>Hello World</h1>
<p>Have a nice day</p>",
Attachments: [
{
name: "data.pdf",
path: "/home/ubuntu/data.pdf"
}]
})
.then(function (message) {
alert("Mail has been sent successfully")
});
}
</script>
</head>
<body>
<form method="post">
<input type="button" value="Send Mail"
onclick="sendEmail()" />
</form>
</body>
</html>
In this article, we have learnt how to send email using JavaScript.
Also read:
How to Check if String Starts With Another String in JS
How to Check if Variable is Undefined in JavaScript
How to Detect Invalid Date in JavaScript
Forbidden Characters in Windows & Linux Filenames
MySQL Date Format DD/MM/YYYY in SQL Query