How to Create Mailto Links

Mailto links are used to redirect to an email address instead of to a web page URL. When a user clicks on the mailto link, the default email client on that visitor's computer opens and suggests to send a message to the email address which is mentioned in the mailto link.

To create a Mailto link you need to use the <a> tag with its href attribute, and insert a "mailto:" parameter after it, like this:

<a href="mailto:email@example.com">Send Email</a>

In the case you want to receive the email to more than one address, just separate the email addresses with a comma:

<a href="mailto:email@example.com, secondemail@example.com">Send Email</a>

The following fields can be filled out beforehand:

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

If you want to have a subject field already filled out, add the “subject” parameter to the href attribute:

<a href="mailto:email@example.com?subject=Mail from our Website">Send Email</a>

To add CC and BCC to your email, just add the “cc” or “bcc” parameters to the href attribute:

<a href="mailto:email@example.com?cc=secondemail@example.com, anotheremail@example.com, &bcc=lastemail@example.com&subject=Mail from our Website">Send Email</a>

To add a body text, just add the “body” parameter to the list of parameters:

<a href="mailto:email@example.com?cc=secondemail@example.com, anotheremail@example.com, &bcc=lastemail@example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>

Putting all together, you will have an example like this:

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main-content {
      width: 60%;
      height: 400px;
      padding: 20px;
      line-height: 28px;
      }
      footer {
      padding: 10px 20px;
      }
      a {
      color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="main-content">
      <h1>This is some message</h1>
      <p>We are happy to inform that we have new feature called snippets. Snippet is a programming term of a small piece of  reusable source code or a text. As you can see  below there are following snippet sections:  AngularJS, CSS, HTML, JavaScript, Linux, NodeJs, PHP and Symfony. For the future we are planning to add more snippets as well as snippet sections.</p>
    </div>
    <footer>
      <p>Written by: W3docs Team</p>
      <p>For questions: <a href="mailto:info@w3docs.com?cc=secondemail@example.com, anotheremail@example.com, &bcc=lastemail@example.com&subject=Mail from our Website&body=Dear W3docs Team">Send Email</a>
      <address>
        Verin Antarayin St. 160/6<br/>
        Yerevan, RA<br/>
        (+374) 95-588689
      </address>
    </footer>
  </body>
</html>

Using Mailto links is easy and helpful, but it also has downsides for many users. Mailto links can lead to appear in spam. In fact, this is one of the the most common ways that spammers use.

Even if you don’t receive a lot of spam, or have a good spam filter, you can’t escape from spam emails. A better way is using a Mailto form on your website instead of a Mailto link.