How to send an Email from JavaScript?

Last Updated : 09 Jan, 2025

Sending an email from JavaScript involves using a library like SMTP.js, which allows you to send emails directly from a web page. It’s done by configuring SMTP settings and creating a simple HTML form, enabling users to send emails programmatically.

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: In this example, this HTML page uses SMTP.js to send an email. When the "Send Email" button is clicked, the sendEmail() function is triggered, configuring SMTP settings and sending the email. A success message appears upon completion.

html

<!DOCTYPE html>
<html>

<head>
    <title>Send Mail</title>
    <script src="https://smtpjs.com/v3/smtp.js">
    </script>


</head>

<body>
    <form method="post">
        <input type="button" value="Send Email" onclick="sendEmail()" />
    </form>

    <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>
</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.

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: '[email protected], [email protected]',

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>

</head>

<body>
    <form method="post">
        <input type="button" value="Send Mail" onclick="sendEmail()" />
    </form>

    <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>
</body>

</html>

Output:

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.