1 Thing A Week 1 Thing
A Week

How to use mailto links and the different properties available

Week 199.0 — 16th August '21

It's been a while since I used mailto links in anger, but they have their place on the web and can actually do a number of things that you might not be aware of.

In its most basic form, you use a mailto link to specify an email address to which you should start composing an email to. By prefixing an email address with mailto:, it automatically triggers a compose window in your preferred mail client. Combine this with an "a" tag and you have yourself a one-click action on your website or in your web app.

<a href="mailto:[email protected]">

Automatically populate the subject field from a mailto link

Using a query format, you can start specifying attributes for the email the user will compose. They're all optional, but to pre-populate the subject field you just specify a property called subject.

<a href="mailto:[email protected]?subject=This is my subject">

It might be better if you ensure it's url safe and replace the spaces with the URL safe code for spaces (%20) instead, but it will work either way.

Specifying other mailto link properties

If you think about the compose window for an email client, there's more than just a to field, a subject and a body. These are the ones you can set with the mailto link, all of which are optional:

  • To
  • CC
  • BCC
  • Subject
  • Body
  • CC

As it's the same format as query params in a URL, you can create a mailto link with multiple params by joining them with a & like so:

<a href="mailto:[email protected]?subject=This is my subject&body=This is my body">

If for any reason, you don't want to specify the 'to' address, then you can simply omit it and start the link with the query string:

<a href="mailto:[email protected]&subject=This is my subject&body=This is my body">

For the fields containing an email address, you can also specify multiples by separating the addresses with commas. In the case of the To field, you can either comma separate them as part of a 'simple' mailto link or you can specify the To field as part of the query string. If you do both, it should just all be concatenated together.

mailto link demos

Here are some demos for you to play with, just click on the links and you'll get a window populating various fields in your mail client.

Properties Example
Basic mailto link
To & Subject mailto link
Subject only mailto link
To & CC mailto link
To & BCC mailto link
To & Subject & Body mailto link
Multiple recipients mailto link
Multiple recipients (alt) mailto link
Multiple recipients (CC) mailto link
More from 1 Thing A Week
« The HTTP 203 web series Brush pen art, my new lockdown hobby Experimenting with the CSS min() function »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 199.2 – Tuesday
    1. Lamborghini Countach LPI 800-4 Lamborghini on youtube.com
  2. 199.3 – Wednesday
    1. Images from a changing Iceland theatlantic.com
    2. adidas Busenitz indoor super shoes   £85 adidas.co.uk
    3. Readers should not be renters pxlnv.com

Jump to notable items for Week #198, Week #200 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit