How to Create Mailto Links

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

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

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

If you want to receive the email to more than one address, separate your 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 - for sending a carbon copy,
  • bcc - for sending a blind carbon copy,
  • body - for the message's body text.

If you want to have a subject field, which is 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, use the "cc" or "bcc" parameter on 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, use the "body" parameter with other 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, we'll have the following 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 quite easy and helpful, but it also has downsides for many users. Mailto links can lead to appearing in spam. It's one of the most common ways used by spammers.

Even if you don’t receive many spams, or have a good spam filter, you cannot escape from spam emails. It's better to use a Mailto form on your website instead of a Mailto link.


Do you find this helpful?

Related articles