How to use mailto links and the different properties available

Week 199 was posted by Charanjit Chana on 2021-08-16.

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.

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.

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:

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:

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.

Tags: development, html