Send email using javascript

In today's world, most businesses will have a website of their own. In some cases like user-submitted form, contact-us form etc we might need to send an email from our website and every website we develop will not have a dedicated backend. Let's find out how to send an email using SmtpJS and vanilla javascript.

Coming to SmtpJS, It is a license-free script with no usage restrictions. You can use it for any commercial or non-commercial project. But, if you get one spam report the account will be blocked.

Enough of the Introduction. What do you need before you start coding?

SMTP Host: smtp.gmail.com (For other email clients this will differ)
SMTP Username: Your Email Address from which you want to send emails
SMTP Password: Your Email Password
SMTP Port: 587 (For other email clients this will differ)

Now, let's begin with the coding

Import the script using the CDN or by downloading the script file in your index.html page.

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

Add a button inside your form which will trigger the sendEmail function.

<input type = "button" onClick="sendEmail()"/>

Create a function that sends the email. If you want to send the email to multiple email addresses, you can use an array of destination emails in "To" property.

<script type="text/javascript">
function sendEmail() {
Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);
}
</script>

If you want to send any attachments you can use the "Attachments" property.

<script type="text/javascript">
function sendEmail() {
Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
    Attachments : [
    {
        name : "xyz.png",
        path : "https://xyz.com/xyz.png"
    }]
}).then(
  message => alert(message)
);
}
</script>

If you are worried about providing the SMTP credentials within the code, you can use Encrypt your SMTP Credentials feature provided in the official SmtpJS website

After getting your SecureToken modify the function by adding "SecureToken" property.

<script type="text/javascript">
function sendEmail() {
Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
    Attachments : [
    {
        name : "xyz.png",
        path : "https://xyz.com/xyz.png"
    }]
}).then(
  message => alert(message)
);
}
</script>

You are done with the code. Now, run the code and click on the button to send the email. You will see an alert with the message as "OK" for success or an error message as a failure.

Conclusion

So, using SmtpJS you can send emails without any backend. This can be used in any of the javascript frameworks or libraries like Angular, React etc.

Thank you for reading. Follow my blog for more interesting articles.

Ravi's Blog

Ravi's Blog

How to send an Email using JS without any backend