If you’ve ever wondered how to customize a mailto: link, getting it to include your own subject line, list of recipients, cc or bcc someone, and pre-populate a message in the email body… look no further.
First, let’s look at a standard
Nothing special there. When you click that link, it opens up the user’s default mail program, and will populate firstname.lastname@example.org in the TO field.
mailto: Link Visual Builder
The guys over at Sam Carlton Creative have put together a really awesome tool to help you build a mailto: link with all the fields populated. It handles all of the encoding for you, and provides the final html code that you need to use.
To learn more about how to build an email link yourself, continue reading…
mailto: link with subject line
This would send an email to email@example.com with the subject line of “Hey Dude. You’re Cool.”
mailto: link CC & BCC fields
NOTE: As soon as you add a 2nd parameter (“subject” was our first parameter, now we’re adding “cc” and “bcc”), you need to separate all your parameters with an ampersand (
&). You begin your parameters, after the
mailto:firstname.lastname@example.org, with a question mark (
?), but use ampersands (
&) to separate parameters after that.
Adding CC & BCC fields is as simple as adding a subject. For multiple emails, separate each email with a comma.
Adding multiple emails for these fields would look like this:
mailto: link body content
Now for the really cool part: Adding a message in the email body. Again, it’s just as easy as before, but be careful of your character encodings. We are using the
body parameter. Here’s an example of a
mailto: link with subject, body, cc & bcc fields.
Blank TO field. Let the user enter the email address.
If you want to let the user type in the TO, CC or BCC fields, you can leave the
mailto: blank, like this:
<a href="mailto:?subject=whatever&body=whatever">Email Someone</a>
Make sure you encode all special characters. Common character encodings are below, or you can use Eric Meyer’s URL encoder tool. If you would rather learn what all the character encodings are, you can use this resource.
Common character encodings
- space =
+(either one works)
- line break / carriage return =
- question mark =
- / (forward slash) =
- : (colon) =
The plus sign (
+) might not work on all systems, specifically Windows/Chrome 10/Thunderbird (hat tip to Thomas).
You do not need to encode commas (,) or periods (.).