avatarMax Clayton Clowes

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2629

Abstract

pan>email<span class="hljs-variable">%20</span>subject&body<span class="hljs-operator">=</span>Content<span class="hljs-variable">%20</span>of<span class="hljs-variable">%20</span>your<span class="hljs-variable">%20</span>email</pre></div><p id="8248"><a href="https://codepen.io/mcclowes/pen/MZaREd">Try it out!</a></p><p id="b0c8">Notice, we’re not using the actual characters for commas, semi-colons, whitespace, ampersands…</p><h1 id="5d81">Structure</h1><p id="a0be">That mess just above is a bit hard to read(!), so let’s break it down.</p><div id="1178"><pre><span class="hljs-symbol">mailto:</span>[<span class="hljs-keyword">to</span>][<span class="hljs-variable">%3</span>B<span class="hljs-variable">%20</span><span class="hljs-keyword">to</span>][?header<span class="hljs-operator">=</span>value][&amp<span class="hljs-comment">;header=value]</span></pre></div><h2 id="6682">To</h2><p id="2d60">Sets the recipient(s) of the email. Separate multiple email addresses with <i>%3B. </i>This is the encoded character for a semi-colon.</p><p id="53cb">There is also a <b><i>to</i></b> <i>header</i>, which gives you an alternative way of setting email address to include in the <i>to </i>field of your email. Don’t use it, Outlook seems to ignore it or treat it as a <b><i>cc</i></b>.</p><div id="0a11"><pre>mailto:<span class="hljs-symbol">example@</span>email.com</pre></div><div id="da79"><pre><span class="hljs-symbol">mailto:</span>example<span class="hljs-title">@email.com</span><span class="hljs-variable">%3</span>B<span class="hljs-variable">%20</span>other<span class="hljs-title">@email.com</span></pre></div><h2 id="3c2c">Headers</h2><p id="db8b">Headers allow you pre-fill other content of the email:</p><ul><li>cc</li><li>bcc</li><li>subject</li><li>body</li></ul><p id="6d24"><b>cc</b></p><p id="443f">Email addresses to <i>cc</i> into the email. Separate multiple email addresses with <i>%3B%20.</i></p><div id="3b3d"><pre><span class="hljs-symbol">mailto:</span>example<span class="hljs-title">@email.com</span>?<span class="hljs-keyword">cc</span><span class="hljs-operator">=</span>other<span class="hljs-title">@email.com</span></pre></div><div id="3493"><pre><span class="hljs-symbol">mailto:</span>example<span class="hljs-title">@email.com</span>?<span class="hljs-keyword">cc</span><span class="hljs-operator">=</span>other<span class="hljs-title">@email.com</span><span class="hljs-variable">%3</span>B<span class="hljs-variable">%20</span>another<span class="hljs-title">@email.com</span></pre></div><p id="80b7"><b>bcc</b></p><p id="3307">Email addresses to <i>bcc</i> into the email. Se

Options

parate multiple email addresses with <i>%3B%20.</i></p><div id="5c64"><pre>mailto:<span class="hljs-symbol">example@</span>email.com?bcc=<span class="hljs-symbol">other@</span>email.com</pre></div><div id="510b"><pre><span class="hljs-symbol">mailto:</span>example<span class="hljs-title">@email.com</span>?bcc<span class="hljs-operator">=</span>other<span class="hljs-title">@email.com</span><span class="hljs-variable">%3</span>B<span class="hljs-variable">%20</span>another<span class="hljs-title">@email.com</span></pre></div><p id="7df5"><b>subject</b></p><p id="8592">Sets the <i>subject</i> field of the email. Replace whitespace<i> </i>with <i>%20.</i></p><div id="1ec7"><pre><span class="hljs-symbol">mailto:</span>example<span class="hljs-title">@email.com</span>?subject<span class="hljs-operator">=</span>Complex<span class="hljs-variable">%20</span>mailto<span class="hljs-variable">%20</span>link</pre></div><p id="65d5"><b>body</b></p><p id="1ad2">Sets the <i>body</i> of the email. Replace whitespace<i> </i>with <i>%20.</i></p><div id="4472"><pre><span class="hljs-symbol">mailto:</span>example<span class="hljs-title">@email.com</span>?body<span class="hljs-operator">=</span>Content<span class="hljs-variable">%20</span>of<span class="hljs-variable">%20</span>your<span class="hljs-variable">%20</span>email</pre></div><h1 id="32b0">TL;DR</h1><ul><li>Follow this example:</li></ul><div id="7f5e"><pre><span class="hljs-symbol">mailto:</span>example<span class="hljs-title">@email.com</span><span class="hljs-variable">%3</span>B<span class="hljs-variable">%20</span>other<span class="hljs-title">@email.com</span>?<span class="hljs-keyword">cc</span><span class="hljs-operator">=</span>another<span class="hljs-title">@email.com</span><span class="hljs-variable">%3</span>B<span class="hljs-variable">%20</span>someother<span class="hljs-title">@email.com</span>&bcc<span class="hljs-operator">=</span>mother<span class="hljs-title">@email.com</span><span class="hljs-variable">%3</span>B<span class="hljs-variable">%20</span>brother<span class="hljs-title">@email.com</span>&subject<span class="hljs-operator">=</span>Your<span class="hljs-variable">%20</span>email<span class="hljs-variable">%20</span>subject&body<span class="hljs-operator">=</span>Content<span class="hljs-variable">%20</span>of<span class="hljs-variable">%20</span>your<span class="hljs-variable">%20</span>email</pre></div><ul><li>Separate email address with <i>%3B%20</i></li><li>Separate headers with <i>&</i></li><li>Replace all spaces with <i>%20</i></li><li>Do not use the <i>to=</i> header</li></ul></article></body>

Creating mailto: links that actually work

mailto: provides a way of creating hyperlinks in websites that will tell your computer to open the default mail client and create a new email without the user having to copy and paste the email address. You can even pre-fill the message subject and content.

A simple mailto: hyperlink looks something like this:

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

You can read the full RFC documentation here: https://tools.ietf.org/html/rfc2368

Pretty useful. And it seems simple at first. But differing implementations across email clients can make it a deceptively difficult to create a mailto: link that works everywhere.

You might have a link opening fine in Mail on a Mac, only to realise that the links no longer work for Outlook on a PC. And then you turn to Stack Overflow where you decide you should probably be using semi-colons, not commas, but no one can really agree. Then you promptly just give up.

Even the Wikipedia page for mailto: gives instructions that won’t work by default on Outlook (which requires its users to actively turn on commas separation of email addresses).

Getting it right

Here is an example of a complex, robust, href link:

mailto:example@email.com%3B%20other@email.com?cc=another@email.com%3B%20someother@email.com&bcc=mother@email.com%3B%20brother@email.com&subject=Your%20email%20subject&body=Content%20of%20your%20email

Try it out!

Notice, we’re not using the actual characters for commas, semi-colons, whitespace, ampersands…

Structure

That mess just above is a bit hard to read(!), so let’s break it down.

mailto:[to][%3B%20to][?header=value][&amp;header=value]

To

Sets the recipient(s) of the email. Separate multiple email addresses with %3B. This is the encoded character for a semi-colon.

There is also a to header, which gives you an alternative way of setting email address to include in the to field of your email. Don’t use it, Outlook seems to ignore it or treat it as a cc.

mailto:example@email.com
mailto:example@email.com%3B%20other@email.com

Headers

Headers allow you pre-fill other content of the email:

  • cc
  • bcc
  • subject
  • body

cc

Email addresses to cc into the email. Separate multiple email addresses with %3B%20.

mailto:example@email.com?cc=other@email.com
mailto:example@email.com?cc=other@email.com%3B%20another@email.com

bcc

Email addresses to bcc into the email. Separate multiple email addresses with %3B%20.

mailto:example@email.com?bcc=other@email.com
mailto:example@email.com?bcc=other@email.com%3B%20another@email.com

subject

Sets the subject field of the email. Replace whitespace with %20.

mailto:example@email.com?subject=Complex%20mailto%20link

body

Sets the body of the email. Replace whitespace with %20.

mailto:example@email.com?body=Content%20of%20your%20email

TL;DR

  • Follow this example:
mailto:example@email.com%3B%20other@email.com?cc=another@email.com%3B%20someother@email.com&bcc=mother@email.com%3B%20brother@email.com&subject=Your%20email%20subject&body=Content%20of%20your%20email
  • Separate email address with %3B%20
  • Separate headers with &
  • Replace all spaces with %20
  • Do not use the to= header
Email
HTML
Web Development
Hyperlink
Website
Recommended from ReadMedium