How to send an email from JavaScript ?

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 : 

<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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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

chevron_right


full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.