Complete Tutorial on Mailto Links: What They Are & How to Use Them
HTML is nearly as old as the internet, and so is one of its most common schemes: mailto. And, even though so many things have changed since then, good ol’ mailto is still widely used and taught in HTML courses all around the world.
The way it works is very simple. When placed behind a text and clicked/tapped afterward, it triggers a default email client to be opened and a new email message creator pops up on a screen. Usually, one or more fields are already pre-populated to make life easier for a sender (and make typos, and subsequent email bounces, impossible).
We’re going to explore different methods of customizing html mailto links. We’ll also talk about whether it’s still a good approach in the 2020s, and whether there are any viable alternatives. Let’s start!
The basics of mailto
Mailto is a link so you need to use the <a> tag with its href attribute. A very basic mailto syntax that sends an email after clicking/tapping on “I want free Bitcoins” looks like this:
<a href=”mailto:piotr@mailtrap.io”>I want free Bitcoins</a>Copy
They say the more people you email, the higher the chance of getting what you want, right? If that’s what you really want, you can let your leads contact a few people at once. Simply insert their addresses separated with commas.
<a href=”mailto:piotr@mailtrap.io, john@mailtrap.io, kate@mailtrap.io”>I want free Bitcoins</a>Clicking on such a link will open the default email app or load a web client in the same or a new tab. What exactly happens depends on the default settings of the recipient’s device and browser (more on that later).
If the recipient is logged in to their mail client, an empty new message window will pop up with the pre-filled “To:” field. Here’s a Gmail example:
Customizing further
Okay, that was easy to set up. But the email above is still quite empty and it will take some effort from a customer to populate and send it. Chances are, they’ll change their mind in the process and you really want to give away all those bitcoins you were diligently digging. Luckily, pre-filling a “To:’ field is just the start.
Subject line
To automatically add a text in the subject field, insert it after the ‘subject’ parameter, as in the example below.
<a href=”mailto:piotr@mailtrap.io,john@mailtrap.io,kate@mailtrap.io?subject=Give%20me%20all%20your%20bitcoins”>
If this was the first parameter you added to an email address, use “?” to separate them. For any further parameters, you’ll use ampersand “&” instead. To separate words, use the ‘%20’ tag.
Email body
Chances are you want to pre-populate the email body as well. For that, you’ll use the ‘body’ parameter (surprise surprise).
<a href=”mailto:piotr@mailtrap.io,john@mailtrap.io,kate@mailtrap.io?subject=Give%20me%20all%20your%20bitcoins&body=Here%20are%20my%20parents'%20credit%20card%20numbers%3A%0D%0A%0D%0ACheers%2C%0D%0AHappy%20Customer”>I want free Bitcoins</a>This looks a bit ugly already as, on top of ‘%20’ for separating words, you may also need to separate lines. Use the ‘%0D%0A’ tag for this purpose.
Now this looks a lot better (depending on who you ask, of course).
CC and BCC
If for any noble reason, you just want to keep Kate and John in the loop, you can easily cc and bcc (blind carbon copy) them. For example like this:
<a href=”mailto:piotr@mailtrap.io? cc=john@mailtrap.io& bcc=kate@mailtrap.io& subject=Give%20me%20all%20your%20bitcoins&body=Here%20are%20my%20parents'%20credit%20card%20numbers%3A%0D%0A%0D%0ACheers%2C%0D%0AHappy%20Customer”>I want free Bitcoins</a>Skip the ‘To’ field
Or maybe you don’t really want anyone to email you but instead, you want the folks to spread the news about the giveaway you’re doing? You can omit the ‘To’ field with the following construction:
<a href=”mailto:?subject=Folks%2C%20check%20this%20out!&body=These%20losers%20are%20giving%20away%20bitcoins!”>Spread the news</a>Open in a new tab
The last thing that may be useful to know is related to opening a link containing mailto in a new tab.
<a href=”mailto:piotr@mailtrap.io” target=”_blank” rel=noopener noreferrer””>I want free Bitcoins</a>If you use this construction and your clients have a native app set up as a default email client (for example, Microsoft Outlook or Apple Mail), nothing will change. The app will open with a pre-filled email whether you include a ‘target’ parameter or not.
If, however, they have a web-based client such as Gmail as a default email client, it will make a difference. Using target=”_blank” parameter will cause the email client to open in a new tab, letting a user stay on your website and browse more of your “great” offers. In any other case (also when no target is specified), an email client will load in the same tab.
Add an attachment
And what if you wanted to automatically add an attachment? It’s not that simple and for a reason – automatically fetching files from a user’s hard drive and sending them in an email would lead to some serious abuse. For that reason, there’s no parameter related to attachments in the mailto protocol.
There can be legitimate use cases for attachments, though.
For example, your site is generating a file (say, a simple design) that users may want to send to a friend right away. To enable this, have a server generate a URL to a file and include it in the body of an email for a recipient to download. The same way, if users are to upload a file, generate a link to it when an upload is finished and include it as a hyperlink in email’s body text.
Either way, it’s going to be a download link, not an attachment that’s sent. But it should do the job in nearly any situation.
You don’t have to do all of this manually
And some good news to wrap up this chapter – there are lots of great tools that will craft a mailto link for you so you don’t need to play with the %20 and %0D%0A tags all day long. Some examples include
https://mailtolink.me/
and https://htmlstrip.com/mailto-generator
If you need to make sure that all of your mailto links are inserted properly, other links are sent to the right recipients, and that the HTML is not broken in any way, then check out Mailtrap Email Testing.
Email Testing catches your SMTP traffic in a safe environment and let’s you inspect and debug emails in staging, development, and QA stages without spamming recipients. Check the support for a template’s HTML and CSS with the most popular mailbox providers. Analyze emails’ Spam Scores and see if your IP appears in any blacklist reports. Then, automate testing flows with Mailtrap’s Email Testing API.
We appreciate you chose this part of the article to know how to link an email in HTML. Click here and read the full article to know why mailto may not work!