The full guide to mailto links!
For a small project I had to create a smart mailto: link to make my life a bit easier. I wanted it to hold not only a to and the subject (I'd figured that much out) but a multi lined body too.
Turns out that is pretty darn easy to do. So, for my own reference, and yours, here's a complete overview of everything possible with a mailto link.
There are a couple of variables you can use, and you'd have to do that in standard URL format:
<a href="mailto:info@example.com?subject=subject&cc=cc@example.com">mail link</a>
Here are the variables you can use in these mailto links:
| mailto: | to set the recipient, or recipients, separate with comma |
|---|---|
| &cc= | to set the CC recipient(s) |
| &bcc= | to set the BCC recipient(s) |
| &subject= | to set the email subject, URL encode for longer sentences, so replace spaces with %20, etc. |
| &body= | to set the body of the message, you can add entire sentences here, including line breaks. Line breaks should be converted to %0A. |
Some mailto examples
Simple mailto link:
<a href="mailto:info@example.com">mail link</a>
mailto link with subject:
<a href="mailto:info@example.com?subject=email%20subject">mail link</a>
mailto link with multiple recipients:
<a href="mailto:info@example.com,email@example.com">mail link</a>
mailto link with a CC:
<a href="mailto:info@example.com?cc=email2@example.com">mail link</a>
mailto with message body already started:
<a href="mailto:info@example.com?body=these%20mailto%20links%20are%20cool">mail link</a>
mailto with 3 lines of message body:
<a href="mailto:info@example.com?body=these%20mailto%0Alinks%20are%0Acool">mail link</a>
mailto with 3 lines of message body and a BCC:
<a href="mailto:info@example.com?bcc=mail2@example.com&body=these%20mailto%0Alinks%20are%0Acool">mail link</a>
As you can see, you can add as many of these as you want and stack them on top of each other. Remember that after the email address you'll use a question mark to prefix the first variable, and ampersands ( & ) for each consecutive variable.
On top of that, for the code to be valid HTML, you have to replace every & with &.
Happy mailing!
Enjoyed this article?
Join 4714 subscribers and subscribe by daily or weekly emails or with RSS to receive more tips, tricks and ideas on improving your website!
Cats: Webdesign & development Tags: html
Both comments and pings are currently closed.
The examples with body texts contain spaces, while a URL cannot contain them. They should be converted to
%20;)Fixed, practice what you preach, I know ;)
Here's the mailto RFC for more reading on mailto.
Nice article, but be aware of the mailto flaws, only use it when nothing else is possible.
@André: that's for forms, I actually use stuff like this to quickly email all the commenters on a post, for instance.
Ring ring.. The 90s called and want their sick html-code skills back. Just kidding. Great stuff.
@Joost: forms do give a lot more trouble when used with mailto's in their action attribute. But the same goes for plain mailto links. The browsers behavior on a mailto link isn't defined in some sort of standard. If I click on a mailto link on my fresh installed laptop it isn't working because I only use webmail. Windows can't find a proper application to send the mail.
But yes: they work fine if you only use them for personal reasons.
Thanks for theses advices ! Where did you find theses funky characters images ?
@Maxime I've got a while pile of them :)
@Joost : If they are royalty free, can you send them to me? :) Thank you in advance.
It should also be noted that bots can and do crawl pages and spam mailto links. if you absolutely must use mailto, be sure to change the @ to something like [at] and tell visitors to change it before mailing.
@impNERD: yeah I usually do not use these in public, and if I do, I ROT13 the entire script piece.
Actually mailto links aren't a good way to go. This requires that the visitor has a proper setup of their email client, if they don't have a default email client installed (or it's configured wrong) the mailto-links won't work.
Mailto-links may seem convenient, but it's bad practice. Forms, how ever boring, is the way to go.
My 2C!
/J
Once and for all :) I use these mailto links for my OWN use in my OWN internal applications, not on the front end! (And I know you all mean your comments lovingly and you ARE helping the readers here :) )
ooooo. now I see.
Code textareas are broken in IE7.
What about those of us who use GMail? (Plus, there's no tastier spider food than a juicy mailto: link...)
Was just looking for this in some form processing that I'm doing for a local educational client.
I didn't even look for this, just stumbled accross your post!
ah this is helpful for sure! much thank you's!
We created a free PHP class, which hides mailto links from spam harvesters =
http://www.debuggeddesigns.com/open-source-projects/mailto