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 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>
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.
Why mailto may not work
As you can see, setting up a mailto is one of the easiest things in HTML. But no matter how hard you try, many of your visitors still won’t take advantage of it.
Most commonly, their default email client won’t correspond to the actual client they use to send emails. For example, they send with Gmail and Outlook or Apple Mail is set as a default client. (Or the other way around).
If that’s the case, a client they don’t normally use (and are likely not even logged in to) will load when clicking a mailto link. Needless to say, it’s more likely to annoy them rather than help them reach you.
They could technically right-click on a mailto link text and copy the mail address to a clipboard for later use:
But let’s face it, how many will?
Is mailto the right approach?
Mailto links, and email addresses hidden behind them, are also very easy to harvest. Endless amounts of bots crawl websites day and night and they add to their long lists whatever even resembles an email address. Since a mailto link is directly encoded into a web page, they can collect an email behind it within milliseconds.
This can lead to obvious abuse, usually in the form of an endless wave of unwanted messages in your inbox. You could try to obfuscate the address with JavaScript or other methods to hinder the harvest. But, with already excellent spam filters put in place by reputable email clients, it may not be worth the effort. We discuss it in more detail in our article on email obfuscation.
By putting a mailto link out there, you also share your contact details with any legitimate outreach specialists that wish to reach you. Finding all your company emails hidden in the html code is as easy as a single tap on a hunter.io widget (many similar tools are also available).
Is there an alternative?
A contact form is. It’s easy to reach you this way (as long as you don’t add 38 required fields). Your email address is not revealed and, as such, is impossible to harvest. You can gather more specific data this way, forcing users to choose items from a list, as in the example below.
There are also many free and paid resources online for building beautiful contact forms. And, of course, with a bit of design effort you can build your own forms that perfectly complement your website design.
On the downside, a contact form may not be the preferred contact method for some of your clients, used to sending emails back and forth. While bots won’t be able to harvest any email this way, they could still populate the fields of a form and hit the ‘send’ button. So if a form is your preferred choice, make sure a latest reCaptcha is in place to quickly filter out these awkward guests.
Changing the default mailto behavior
If mailto links don’t open for you the way they should, a quick look at the system or browser settings should do the job.
In Windows, head to Settings -> Apps -> Default apps. Scroll down and pick “Choose default apps by protocol” from the menu. For ‘Mailto’, choose the client of your choice.
On MacOS, open the default Mail app. Log in to your email account (it’s a required step to edit settings). Choose “Mail” from the menu and then “Preferences”. Change the default client in the first dropdown list.
If you want Chrome and Gmail to open mailto links for you by default, make sure Google Chrome is picked as the default client on either OS.
In Firefox, you can also specify which client should handle mailto links.
Click on the menu button -> Preferences. Then in ‘General’ go to the ‘Applications’ section and search for ‘Content Type ‘mailto’’. In the action field, pick the desired client:
If Gmail is your client of choice and setting it as default doesn’t fix the problem, there’s one more thing you can do. Launch Chrome and type in chrome://settings/handlers into the address field. You should make sure that mail.google.com is added as a default handler, like in the picture below:
If it’s not, make sure “Allow sites…” is enabled and open your Gmail account. You’ll see a popup asking whether Gmail can open these html email link. Grant the permission and it should fix the problem.
Wrapping up
By now, you should have a pretty good idea of how to customize and use mailto link, and whether you actually want to use it. Explore our blog, where we cover various topics related to emails – important infrastructure choices, software worth using, email configuration for many different frameworks and libraries. And a lot more!
We appreciate you chose this article to know how to link an email in HTML. To discover more interesting topics, read other articles on Mailtrap blog!
Top comments (0)