How to Send Emails Easily using SmtpJS.com
Building an app with a feature to send emails can be tedious work if it involves server-side code, as seen in both my Nodemailer with React and Nodemailer with vanilla JS tutorial articles.
In this article, let's take a look at a front-end only way to design and send emails using SmtpJS.com.
About SmtpJS.com
It is a free-to-use, simple script with no usage restrictions that can be embedded into your webpage for you to be able to send emails via JavaScript, given the provided credentials.
Step 1: Getting Started
First, include the script in the <head> your webpage like so:
<head>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
Step 2: Create Form
Next, we can create a simple form to get the recipient's email. Let's say your website wants to send an emoji email to the provided email by the user.
For this example, I have created a very simple form.
Here's the code I use for this example. I use TailwindCSS for the styling, you may style any way you want.
<form class="flex flex-col" id="form" enctype="multipart/form-data">
<h3 class="text-xl">Please Input Your Email to Receive an Emoji</h3>
<input type="email" name="email" placeholder="abc@example.com" required
class="mt-4 border border-gray-300 w-1/3 px-5 py-2" />
<button type="submit" class="mt-4 p-1 rounded-lg bg-yellow-500 text-xl w-1/3 text-white">Get Emoji</button>
</form>
Step 3: Send Email
Now, we can simply send an email using the following code:
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)
);
Let me explain the what each attribute in the send method is.
1. Host
The host you will provide depends on your (the sender) email service provider. Here are some common values for the most common email services.
| Email Service | Host |
|---|---|
| Gmail | smtp.gmail.com |
| Outlook | smtp-mail.outlook.com |
| Office365 | smtp.office365.com |
| Hotmail | smtp.live.com |
For more host values, please readhttps://www.arclab.com/en/kb/email/list-of-smtp-and-imap-servers-mailserver-list.html
2. Username + Password
This is pretty intuitive. These attributes refer to your email credentials. You can use environment variables to securely hide these from view or encrypt them as a secure token.
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"
}).then(
message => alert(message)
);
The instructions for encrypting can be found at the official documentation here.
3. To + From + Subject
The 'To' will be the recipient's email address or an array of email addresses that we retrieve from our simple website's form in Step 2.
The 'From' will be your email address. The recipient will be able to see this address when the email arrives in their inbox.
'Subject' is simply the email's subject that the recipient will see.
4. Body
This is the content of the email. It can be a string or HTML or any accepted format for emails. You can also add attachments to the body.
So here's the final script to send the email.
let recipientForm = document.getElementById("form");
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(recipientForm);
const recipient = Object.fromEntries(formData.entries()).email;
//Send Email
Email.send({
Host: "smtp.gmail.com",
Username: "username", //your email address
Password: "password", //your email password
To: recipient,
From: "example@gmail.com",
Subject: "Here's your Emoji!",
Body: "❤️"
}).then(
message => alert(message)
);
}
recipientForm.addEventListener("submit", handleSubmit);
Note: Gmail users need to allow third party access to let SmtpJS.com send emails. So turn on the 'Less Secure Apps' settings by following instructions here.
Result
If you test it, you should get an email sent to your inbox!
Conclusion
And there you have it! A very simple way to send emails in a webpage without a server. It is very convenient if you need a quick email-sending feature in your app, or for testing purposes.
Please take a look at the official documentation for more details. Thanks for reading. I hope you have found it helpful. If it is, do give a like and share. Cheers!
