Open In App

How to send an email from JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 an HTML file and include SMTP in your <script></script> tag : 

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

Example: 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>


Output: Just click on the button and the mail will be sent: You will see the below pop-up if the mail has been sent successfully.

How to send an email from JavaScript ?

How to send an email from JavaScript ?

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 will 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"
}]

Example: 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>


Output:

How to send an email from JavaScript ?

How to send an email from JavaScript ?

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.



Last Updated : 20 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads