1. Technology

The Mailto Command

Learn How to Write Email Links

By

Computer pointer on mail button
Gregor Schuster/Photographer's Choice/Getty Images

Putting links on your site is as easy as using the A element, but sometimes people forget that you can link to more than just http://. If you want people to send you email from your web page, you can use the mailto: command. Then, when your readers click on the link, an email client opens up to allow them to send you email.

Setting up a Mailto Link

To write an email link, create a link like you would normally, but instead of http:// write mailto: and then the email address you want them to mail to. For example, to set up a link to email me, you would write (replacing “CHANGE” with my email address):

<a href="mailto:CHANGE">mail the Web Design/HTML Guide</a>

If you want the message to go to multiple email addresses, separate the email addresses with a comma:

<a href="mailto:CHANGE">mail the Web Design/HTML Guide</a> mailto:email@address1.com,email@address2.com

But there is so much more that you can do with the mailto links. Most modern web browsers and email clients support more than just the “To” line. You can specify the Subject, send carbon copies, and blind carbon copies.

Advanced Mailto Links

When you create an email link with extra features, you treat it similarly to a CGI script that uses a GET operation (a query string or attributes on the command line). Use a question mark after the final “To” email address to indicate you want more than just a “To” line. Then you specify what other elements you would like:

  • cc—to send a carbon copy
  • bcc—to send a blind carbon copy
  • subject—for the subject line
  • body—for the body text of the message

These are name=value pairs. The name is the element type listed above that you want to use, and the value is what you want to send. To send a letter to me and cc the Weblogs Guide, you would type:

<a href="mailto:CHANGE?cc=CHANGE">
Email Web Design and Weblogs Guides</a>

To add multiple elements, separate the second and subsequent elements with an ampersand (&).

<a href="mailto:CHANGE?cc=CHANGE&bcc=CHANGE

Adding a subject line is the trickiest part. While you can use spaces in your subject, spaces are not valid in URLs and can cause problems. It is better to encode the space as a plus-sign (+) in your subject. For example:

<a href="mailto:CHANGE?subject=Testing+Mailto+with+Subject

Some clients will send the subject “Testing Mailto with Subject” while others will send the subject “Testing+Mailto+with+Subject.”

To prevent this, and still have subjects that have spaces, you should use URL encoding for your spaces, %20.

<a href="mailto:CHANGE?subject=Testing%20Mailto%20with%20Subject

This makes the mailto link harder to read in the web page, but is going to show up as you intend in the email client.

You can also define some body text in your mailto links, to give readers advice on what to write in the message. Like with the subject, you need to encode spaces, but you also need to encode new lines. You can't just put a carriage return in your mailto link and have the body text show a new line. Instead you use the encoding character %0A to get a new line. For a paragraph break, put two in a row: %0A%0A.

Remember too that it depends upon the email client where the body text is placed. In my client the text is placed below any signature I use.

<a href="mailto:CHANGE?body=I%20have%20a%20question.%0AI%20would%20like%20to%20know:

Putting It All Together

Here is a mailto link. Remember, if you copy and paste this into your web pages, be sure to change the email address to one that you own.

<a href="mailto:CHANGE?subject=here%20is%20a%20mailto%20link&cc=CHANGE&body=I%20have%20a%20question.%0AI%20would%20like%20to%20know:">testing mailto</a>

After I add my address in, the above link looks like this: testing mailto. Note, this link works, but unless you ask a question in the resulting email, I won't reply. Thanks!

Stay up-to-date, read some of the Most Current Articles on the About.com Web Design/HTML site.

Related Video
Link a Website to an Email Address in HTML

©2014 About.com. All rights reserved.