HTML mailto can have multiple addresses, subject and email body

Today I was just working on a contact page and was doing a mailto: href link to contact the business and realised theres a bit more you can do!

For example, I usually use the following and that is where my customisation ends:

<a href="mailto:gary@example.com">Contact us now!</a>

When the user clicks on the link above, it will open up the default email program - eg outlook and prefil the email address in the To field.

Seems like theres so much more you can do with the mailto: scheme. You can add multiple email addresses, add a subject add cc/bcc and even a email body text!

Since mailto: is a URL/link, we need to use the same URL encoding rules - eg percentage encoding for these https://en.wikipedia.org/wiki/Percent-encoding. This means that we need to change whitespace the %20, or special characters such as & (ambersand) to %26

1. Multiple email addresses

One thing you can customise with the mailto URL is to add multiple emails. This can be done in two ways. The first is to separate each email address with commas

<!-- comma separated list without spaces and/or url encoded with %20 -->
<a href="mailto:gary@example.com,bob@example.com">
 Contact these people
</a>

Another option add multiple email addresses is to use the ?to query parameter

<!-- or with ?to= parameter -->
<a href="mailto:gary@example.com?to=bob@example.com">
 Contact these people
</a>

2. Adding cc

You can add cc (carbon copy) email address to be prefiled when the user clicks on the mailto link as well.

To do this, we will need to add the ?cc= parameter. This will follow the URL query notation.

That just means that if theres more than one parameter and cc is not the first, you will need to use the & (ambersand)

<!-- with ?cc= parameter -->

<a href="mailto:gary@example.com?cc=bob@example.com">
 Contact and CC
</a>

<!-- or with & ambersand -->

<a href="mailto:gary@example.com?to=jane@example.com&cc=bob@example.com">
 Contact and CC
</a>

You can add multiple cc email addresses by just adding the comma (,) similar to what we used with the to parameter.

As an example:

<a href="mailto:gary@example.com?cc=bob@example.com, jane@example.com">
 Contact and multiple CC
</a>

3. Adding bcc

Similar to the cc option as above, we can use bcc to add email addresses (blind carbon copy).

With this option, the copy of the email will be sent out to the relevant people, but the list of recipients are not visible.

<!-- with ?cc= parameter -->

<a href="mailto:gary@example.com?bcc=bob@example.com">
 Contact and BCC
</a>

<!-- or with & ambersand -->

<a href="mailto:gary@example.com?to=jane@example.com&bcc=bob@example.com">
 Contact and BCC
</a>

4. Include email subject

Another customisation we can do with the mailto URL is to include the subject line. So when users click on the link the default email program will prefill the subject line for you.

<a href="mailto:someone@yoursite.com?subject=Hello%20World">Email Us</a>

Notice that we have to have the %20. The mailto links are URLs, so they all need to follow percentage encoding: https://en.wikipedia.org/wiki/Percent-encoding

Eg replace special characters such as whitespaces with %20, ambersands with %26

5. Include body for the email

Finally you can go even further and add body text!

<a href="mailto:someone@yoursite.com?body=Body-goes-here">Email Us</a>

Final thoughts

When a user clicks on a link with href=“mailto:…", the default email program will open with the email address prefiled in the to section.

The mailto: option for href attribute can be customised to do more than just having one email address.

We can set it to have multiple email addresses, cc and bcc address to be prefilled, set the email subject and even set the body text.

When we make these custom settings, we need to follow the percent encoding rules, since this is just another URL and need to follow URL encodings.