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:
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.
|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||Am I using the DATASET element wrong?||Experimenting with the CSS min() function »|
You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit