What is SMTP?
SMTP (or Simple Mail Transfer Protocol) is the communication layer that handles email. It outlines a set of rules for sending and receiving emails, just as HTTP (Hyper Text Transfer Protocol) outlines the rules for sending and receiving data packages on the web.
An SMTP server handles SMTP traffic. SMTP servers perform a lot of important functions, mostly to do with preventing spam and other bad actors from invading our emails and ruining our days.
An SMTP server works like this:
- The server receives email information from a client (usually on Port 25.)
- It breaks the email address of both sender and recipient into two parts: the username and the domain.
- For example, in the address firstname.lastname@example.org, the username is abstractapi and the domain is gmail.com
- It examines the domain of the sender and the domain of the recipient. If both are under the same domain (i.e. gmail.com) it sends the email via that domain’s preferred method (i.e. POP or IMAP.)
- If the domain of the sender and recipient are different, the server checks to see that the sender’s email address is an active and valid email. This prevents spam.
- If the sender’s address is valid, the server sends the email data to the recipient’s SMTP server. That server handles delivering the email to the recipient.
You can configure your own SMTP server and send an email that way. There are plenty of plugins and packages for Node and other backend languages that allow you to do this. However, it can be difficult and time-consuming. It's easier to have someone else host the server for you.
Send Emails Using Mailto
Add the mailto link to an anchor element
Put the email address you're sending to after mailto: as part of the string.
When the user clicks on the anchor element, mailto will open the user’s default email client and populate the “recipient” field with the intended email.
Mailto also lets you add a default subject, message, and cc/bcc as a query string.
Use string interpolation to add dynamic content.
It's very easy to send emails this way. Unfortunately, it's not the best solution.
You can't send emails that look great this way. The most you can do is get a string of text with some dynamically added content.
mailto will always open a device's default email client, even if it's not the provider that the user typically uses. Furthermore, if the user doesn't have any email service installed on their device, mailto won't have anything to open at all and it won't work.
Finally, some spammers use bots to search the web for mailto links and then use those bots to spam mail servers.
Validate Emails Using AbstractAPI
An additional step that would make the mailto redirect more secure against spammers would be validating the sending and receiving email addresses before you send the email. To do this, you could use a service like AbstractAPI.
AbstractAPI’s Email Verification and Validation API does more than just validate that a given email is formatted correctly. It also runs checks against databases to determine whether the address is active, whether the address can be delivered to, whether the address is a free or disposable email address, or a role-based account, and whether it is SMTP valid and MX records are good.
Acquire an API Key
Navigate to the API’s Get Started page. Click “Get Started.”
You’ll be asked to sign up by providing a valid email address and password. If you've already signed up, you may need to log in. Once you’re in, you’ll land on the API’s dashboard, where you’ll see your API key and links to documentation and pricing.
Use Your API Key to Send a Request to the API
Use Fetch to send a GET request to the AbstractAPI endpoint, passing it the email address we want validated. Write a function called sendEmailValidationRequest that accepts an email as a parameter and sends the email to the API.
The response data should look something like this:
Based on the response, we can decide whether or not to use the email address in our mailto link. That might look something like this:
Now, we know at least that the addresses we are using are not spam email addresses. We can't do much about the formatting of the emails, however.
A better solution that using mailto is to use a third-party library like SMTPJS. SMTPJS is a package that routes emails from your front end to an SMTP server. All you need to do is include a small snippet of code in the header of your HTML.
Sign Up for An ElasticEmail Account
You can sign up for an ElasticEmail account for free and use it to send up to 100 emails. After the free trial is over, plans start at $15/month.
Head to elasticemail.com and click "Try for Free." Alternatively, you can start your journey at SMTPJS.com and they will direct you to the ElasticEmail signup page.
Sign up using your preferred email address. This is just for communication and authentication with the app.
Create an SMTP Server
Click on "My Account" in the bottom left corner. You'll be taken to a page with settings, billing, profile, etc. Click "Settings."
Here, you'll see all the configuration options for your account. Click on "Create SMTP Credentials."
You'll be asked to input your username, which is the email address you used to sign up for the account.
Once you do that, and click "Create" you'll see a modal popup containing the credentials for your new server. Copy the password and put it somewhere safe - once you close the modal you will no longer have access to it.
The server will run on port 2525 by default.
Head back to SMTPjs.com and copy the src https smtpjs.com v3 code snippet for your app.
Next, grab the Email.send() function from their homepage as well.
Replace the relevant details with the information from your ElasticEmail account. That would be the host, username, and password.
Let's wrap this in a function that we can call inside a click handler. Write a function sendEmail. This assumes you're building a React app and have a way to store values for to, from, subject, and body in state, as well as a success message alert to show the user once the email has been sent.
Being able to send emails from the client-side is important. A contact form is critical for marketing and lead generation, as well as hearing about bug reports and helping customers with problems.
In this tutorial, we explored two different ways of sending emails from a client-side application. Using the mailto link is the easiest way to do it, however, it’s not very robust due to spam and security risks. It also doesn't allow you to add any customization to emails.
The risks of using the mailto link can be mitigated by validating email addresses through a dedicated third-party email validation API like AbstractAPI.
We also looked at using ElasticEmail and SMTPJS.com to run our own SMTP server with ElasticEmail and send emails from the frontend using SMTPJS's easy script src https smtpjs.com tag and a sendEmail function .
What is SMTP?
SMTP (Simple Mail Transfer Protocol) is a set of rules that govern how emails are sent and received. It is similar to HTTP (Hyper Text Transfer Protocol), which controls how webpages and app data should be sent and received. SMTP runs on top of TCP (Transmission Control Protocol), which enables applications to communicate with each other over the web.
How Does SMTP Work?
This is what happens when you send an email from your Gmail account.
- You compose an email using the Gmail email client on your device.
- You input the recipient’s address (let’s say it’s a yahoo.com address) and click “send.”
- Your Gmail client connects to the Gmail SMTP server. Once it receives the email, this email server is now considered an SMTP client.
- Your email server communicates with the yahoo.com SMTP server and says it wants to deliver the message. The two servers perform an STMP “handshake.”
- The Gmail SMTP client sends your message to the yahoo.com SMTP email server.
- The yahoo.com server scans the message and recognizes the domain and the user name.
- The yahoo.com mail server receives the email and stores it in the recipient’s mailbox.
- When the recipient logs in, their Yahoo email client fetches the new email from the server.