Using the Mailto Command on Your Website

Learn How to Write Email Links

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

Putting links on your site is as easy as using the element - which stands for "anchor" but is more commonly called the "link" element. Sometimes people forget that you can link to more than just other webpages or documents and files (PDFs, images, etc.). If you want people to be able to send an email from a webpage link, you can use the mailto: command in that link. When site visitors click on that link, the default email client on their computer or device will open up and allow them to send an email to the address you have specified in your link's coding.

Let's look at how this is done!

Setting up a Mailto Link

To code an email link, you would first create an HTML link like you would normally, but instead of usinghttp://  in the "href" attribute of that element, write mailto: You would then add the email address you want this link to to mail to. For example, to set up a link to email yourself, you would write the code below, simply replacing the placeholder “CHANGE”  text with your email address:

<a href="mailto:CHANGE">Send us an email with your question</a>

In this above example, the webpage would display the text that says "Send us an email with your questions" and, when clicked, that link would open an email client that would pre-populate with whatever email address you specified in the code.

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

<a href="mailto:email1@adress.com, email2@address.com">Send us an email with your questions</a>  

This is pretty simply an straightforward, and many email links on webpages stop here. Still, there is also 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 to be included. 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 all 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 what is below (replacing the placeholder "email here" lines with actual addresses):

<a href="mailto:MAIN-EMAIL-HERE?cc=OTHER-EMAIL-HERE">
Email Us</a>

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

<a href="mailto:EMAIL-HERE?cc=EMAIL-HERE&bcc=EMAIL-HERE

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. To prevent this, and still have subject lines that include spaces, you should use URL encoding for your spaces, %20.

<a href="mailto:EMAIL-HERE?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 could also use a + sign instead of a space or the space encoding, but that doesn't work in all instances, and some browsers will actually submit the + instead of a space, so the encoding listed above really is the best way to do this.

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 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:EMAIL-HERE?body=I%20have%20a%20question.%0AI%20would%20like%20to%20know:

Putting It All Together

Here is an example of a complete mailto link. Remember, if you copy and paste this into your web pages, be sure to change the placeholder I have for email address to an actual email address that you have access to.

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

The Downside to Email Links

The one negative about using email links in a webpage is that they can open up the recipient to unwanted spam email messages. This is because spam-bots crawl the web looking for the links that have clear email addresses encoded in them. They then add those addresses to their spam lists and begin emailing.

The alternative to using an email link with a clearly visible (in the code at least) email address is to use an email form.Those forms will still allow a site's visitors to connect with a person or company without having to have an email address out there for the spambots to abuse. Of course, web forms can be compromised and abused as well, and they can send spam submissions as well, so there really is no perfect solution. 

In the end, "mailto" links are super quick and easy to add, so if all you are looking to do is provide a means form a site's visitor to reach out and send a message to someone, these links are an ideal solution.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 9/14/16