How to send an email from JavaScript ?

16 May, 2022
In this article, we will learn how to send mail using Simple Mail Transfer Protocol which is a 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 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. 
html
<!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>
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 the below code in your mail function:
html: "<h1>GeeksforGeeks</h1>
<p>A computer science portal</p>"
At last, in order to send an 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 the above configuration will look like as follows:
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="sendEmail()" />  </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 and 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.
ramsamarth21bcs24
HTML-Misc
JavaScript-Misc
Picked
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?