You can make a garden variety anchor link (<a>) open up a new email. Let’s take a little journey into this feature. It’s pretty easy to use, but as with anything web, there are lots of things to consider.
The basic functionality
<a href="mailto:[email protected]">Email Us</a>It works!
But we immediately run into a handful of UX issues. One of them is that clicking that link surprises some people in a way they don’t like. Sort of the same way clicking on a link to a PDF opens a file instead of a web page. Le sigh. We’ll get to that in a bit.
“Open in new tab” sometimes does matter.
If a user has their default mail client (e.g. Outlook, Apple Mail, etc.) set up to be a native app, it doesn’t really matter. They click a mailto: link, that application opens up, a new email is created, and it behaves the same whether you’ve attempted to open that link in a new tab or not.
But if a user has a browser-based email client set up, it does matter. For example, you can allow Gmail to be your default email handler on Chrome. In that case, the link behaves like any other link, in that if you don’t open in a new tab, the page will redirect to Gmail.
I’m a little on the fence about it. I’ve weighed in on opening links in new tabs before, but not specifically about opening emails. I’d say I lean a bit toward using target="_blank" on mail links, despite my feelings on using it in other scenarios.
<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">Email Us</a>Adding a subject and body
This is somewhat rare to see for some reason, but mailto: links can define the email subject and body content as well. They are just query parameters!
mailto:[email protected]?subject=Important!&body=Hi.Add copy and blind copy support
You can send to multiple email addresses, and even carbon copy (CC), and blind carbon copy (BCC) people on the email. The trick is more query parameters and comma-separating the email addresses.
mailto:[email protected][email protected],[email protected],[email protected]&[email protected]This site is awful handy
Use a <form> to let people craft the email first
I’m not sure how useful this is, but it’s an interesting curiosity that you can make a <form> do a GET, which is basically a redirect to a URL — and that URL can be in the mailto: format with query params populated by the inputs! It can even open in a new tab.
See the Pen
Use a <form> to make an email by Chris Coyier (@chriscoyier)
on CodePen.
People don’t like surprises
Because mailto: links are valid anchor links like any other, they are typically styled exactly the same. But clicking them clearly produces very different results. It may be worthwhile to indicate mailto: links in a special way.
If you use an actual email address as the link, that’s probably a good indication:
<a href="mailto:[email protected]">[email protected]</a>Or you could use CSS to help explain with a little emoji story:
a[href^="mailto:"]::after {
content: " (📨↗️)";
}If you really dislike mailto: links, there is a browser extension for you.
I dig how it doesn’t just block them, but copies the email address to your clipboard and tells you that’s what it did.
this is new after 10 years of knowing the html 4.0 . thanks
Some extra notes:
The body argument can’t contain html, not even if you escape it in any format. (some browser+client might still accept it but it’s not valid).
Target _blank can produce an unwanted side effect of creating an empty browser tab if the mailto is handled by external software. So when the user opens the browser again all he/she sees is a white page. This is obviously very bad for usability but I still prefer target _blank and any browser still opening a blank tab should just fix it ;-)
I’d like to know if mailto: links are broken for some users. In other words, can clicking on such a link result in an error state or any state where the user doesn’t see a “New message” dialog as the result of clicking the link?
Sure can: if the user never bothered to find the obscure setting that will set their webmailer as responsible handler in the browser, they might be dropped into a local Outlook/WinMail default client that will then start their first-run “set up an account” routine. (I thiiiiiiink you cannot even detect that. Even if you can test for a handler for mailto: (and that, by gut feeling, would be a security issue), you don’t know if it’s there because some app made itself the default.)
The form with target=”_blank” doesn’t work on (at least) Android Chrome 73, it just opens the URL in a new, empty tab… After removing the target, it does however open the mail app (or app selector if you have multiple)… It does work as expected on a link, so might be just an Android thing (not handling the intent/activity).
In Firefox 66 the target=”_blank” (also on the form example) appears to ignored which is a shame.
But if you put your email in plain text it’ll get harvested by spam bots :(
I really like the form to generate the email.
For the emojis, here is what worked for me:
Did I miss something. How can we tell which mail client they use?
I knew you could add a subject, but not CC, BCC and body! Brilliant tricks- thanks Chris
I actually like using mailto; when I have directions for what to ask me for to do something and a list of what to provide, I’ll usually use the email address as the visible link. But if they click it, then it prefills the email with everything in place so they can just fill in the blanks.
I hadn’t considered using a GET form before, though; that’s pretty clever!
However futuristic front-end gets, always there is room back at the basics department we would have definitely missed. #backtobasics is what we need at times.
I actually avoid mailto: over just sending the user to a basic contact form.
You would think that the browsers would have made an in-page email client to do a pop-up form that already connects to their email browser.
The problem I’ve found with this approach is the times where you want to keep a copy of the message you’re sending. You can manually copy/paste the message somewhere of course but I like to add a ‘Mail me a copy’ checkbox to forms for this reason.
This is just great thanks chris
Isn’t a mailto link open to bots?
It is(to crawlers), but I stopped worrying about that a long time ago. Nowadays spammers can easily buy or find huge lists of verified mail addresses for less money than it would cost to maintain a crawler. Of course there are probably exceptions but the focus for spammers is likely more towards finding mail addresses to send from rather than to.
So I’m guessing that running a webserver with permissions to send verified mail is a bigger risk than using mailto ;-)
I never had to care about email issues as I always had the option to route through server side cpanel stuff.
Now I am using aws s3 buckets for serving up static sites, thus article is very useful. Though the whole process seems archaic.
I’m confused by:
a) “a garden variety anchor link”. What does this mean exactly?
b) “If you use an actual email address as the link, that’s probably a good indication”. We can’t use actual email addresses anymore b/c of GDPR.
c) “Or you could use CSS to help explain with a little emoji story”. What does this mean exactly? There is no context or visible end result of said coding.
Hey Brian, good questions!
Ive noticed that mailto: links are no longer working in Safari on iOS 11.3, anybody else come across this?
mailto links aside we have had success with PDFs and other docs by clearly labeling them – PDF AND opening them up in Google Drive preview windows in new tabs. From a UX perspective users can simply see the document and/or make a choice from that point to download and print.
The mailto: link will never go away for larger organizations/corporations as long as there is the mindset of “this is my content and I want users to contact me about it in a way that works for me specifically.”
I am very curious, what would people around here recommend as the current, 2019-comptabile anti-spam solution for both mailto: links and displaying email address in a page :)
how can I send links in the body of the mailto anchor tag?
I am finding some mixed support across browsers. Some restrict this functionality altogether and do not open the Email client, which is a bad experience for the user as they may be clicking and nothing happening.
I try to avoid it as much as possible and think that it is much better to offer a contact form on the site where you have much more control over.
I agree, what if the user doesn’t have a default email client set? What if they use Gmail or some other web mail?
Thanks for all the information on Mailto Links
is there any possible to way to click on a mailto link and send it ?
situation: I have received a email with some hyperlinks and one of them is a “mailto” link which up on clicking opens another email.
Need: can i automatically click that mailto link and send ?