Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to send an email from JavaScript ?

  • Difficulty Level : Medium
  • Last Updated : 29 Jul, 2021

In this article, we will learn how to send mail using Simple Mail Transfer Protocol which is free JavaScript library. It is basically used to send emails, so it only works for outgoing emails. To be able to send emails, you need to provide the correct SMTP server when you set up your email client. Most of the internet systems use SMTP as a method to transfer mail from one user to another. It is a push protocol. In order to use SMTP you need to configure your Gmail. You need to change two settings of your gmail account from which you are sending the mail i.e.

  • Revoke 2-step verification
  • Enabling less secure apps to access Gmail. You can easily do this by clicking on the link Enable

After this just create a html file and include SMTP in your <script></script> tag : 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

<script src="https://smtpjs.com/v3/smtp.js"></script>

 

Below is the html file which you will need to run in order to send the mail.



Filename: index.html

html




<!DOCTYPE html>
<html>
  
<head>
  <title>Send Mail</title>
  <script src=
  </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>

Just click on the button and the mail will be sent:

You will see below pop-up if the mail has been sent successfully. 
 

 



 

Now the question is what if you have multiple receivers. In that case you have to do nothing just configure your sendMail() function as described below:

to: 'first_username@gmail.com, second_username@gmail.com',

Rest all we be same. If you want to send html formatted text to the receiver, then you need to add below code in your mail function:

html: "<h1>GeeksforGeeks</h1>
<p>A computer science portal</p>"

At last, in order to send attachment just write the following code in sendMail() function:

Attachments : [{
    name : "File_Name_with_Extension",
    path:"Full Path of the file"
}]

So the final JavaScript code after above configuration will look like:
Filename: index.html

html




<!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",
        Body: "Well that was easy!!",
        Attachments: [
          {
            name: "File_Name_with_Extension",
            path: "Full Path of the file"
          }]
      })
        .then(function (message) {
          alert("Mail has been sent successfully")
        });
    }
  </script>
</head>
  
<body>
  <form method="post">
    <input type="button" value="Send Mail"
        onclick="sendMail()" />
  </form>
</body>
  
</html

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!