Using the Mailto Command on Your Website

Use this simple guide to code email links

Computer cursor on email button

Gregor Schuster/Photographer's Choice/Getty Images

Every website has a "win". These are the key actions that you want people who come to that website to take. For example, on an eCommerce site, the "win" would be when someone adds items to their shopping cart and completes that purchase. For websites that are not eCommerce, like sites for professional services organizations (consultants, lawyers, accountants, etc.), this "win" is typically when a visitor reaches out and contacts the company to learn more about what they have to offer or to schedule a meeting of some kind. This can be done via a phone call, website form, or very commonly, by simply sending an email using an email link from that website.

Putting links on your site is as easy as using the <a> 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 web pages 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

command in that link. When site visitors click on that link, the default

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 as you would normally, but instead of using

in the "href" attribute of that element, you would start the attribute's property value by writing

You would then add the email address you want this link 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:

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:

This is pretty simple and straightforward, and many email links on web pages stop here. There is, however, also much more information that you can configure and send 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. Let's dig a little deeper!

Advanced Mailto Links

When you create an email link with extra features, you treat it similarly to a CGI script that uses a

operation (a

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):

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

This makes the mailto link harder to read in the web page's code, but it 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

to get a new line. For a paragraph break, put two in a row:


Remember that it depends on the email client where the body text is placed. 

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 shown for an email address to an actual email address that you have access to.

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 the email barrage.

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. Remember, if you make it super hard for spammers to email you, you very likely also make it hard for legitimate customers to email you too! You need to find the balance and remember that spam email is, sadly, part of the cost of doing business online. You can take steps to minimize the spam, but some amount will make it through alongside those legitimate communications.

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