Revision 1100623 of Email links

<p><span class="seoSummary">It's often useful for Web sites to be able to create links or buttons that, when clicked, open a new outgoing email message. For example, this might be used when creating a "contact us" button. This is done using the {{HTMLElement("a")}} element and the <code>mailto</code> URL scheme.</span></p>

<h2 id="mailto_basics">mailto basics</h2>

<p>In its most basic, and most commonly-used, form, a mailto link simply indicates the email address of the intended recipient. For example:</p>

<pre class="brush: html">
&lt;a href="mailto:[email protected]"&gt;Send email to nowhere&lt;/a&gt;

Complete examples detail:

&lt;a href="mailto:[email protected][email protected]&amp;[email protected]
&amp;amp;subject=The%20subject%20of%20the%20email
&amp;amp;body=The%20body%20of%20the%20email"&gt;
Send mail with cc, bcc, subject and body&lt;/a&gt;</pre>

<p>&nbsp;</p>

<p>This results in a link that looks like this: <a href="mailto:[email protected]">Send email to nowhere</a>.</p>

<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to a person of their choosing.</p>

<h2 id="Specifying_details">Specifying details</h2>

<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly-used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p>

<div class="note">
<p><strong>Note:</strong> The values of each field must be URL-encoded (that is, with non-printing characters and spaces <a href="https://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>).</p>
</div>

<h3 id="Sample_mailto_URLs">Sample mailto URLs</h3>

<p>Here are a few sample <code>mailto</code> URLs:</p>

<ul>
 <li><a href="mailto:">mailto:</a></li>
 <li><a href="mailto:[email protected]">mailto:[email protected]</a></li>
 <li><a href="mailto:[email protected],[email protected]">mailto:[email protected],[email protected]</a></li>
 <li><a href="mailto:[email protected][email protected]">mailto:[email protected][email protected]</a></li>
 <li><a href="mailto:[email protected][email protected]&amp;subject=This%20is%20the%20subject">mailto:[email protected][email protected]&amp;subject=This%20is%20the%20subject</a></li>
</ul>

<p>Note the use of the ampersand (&amp;) to separate each field in the mailto URL. This is standard URL query notation.</p>

<h3 id="Example">Example</h3>

<p>If you'd like to create an outgoing email asking to subscribe to a newsletter, you might use a <code>mailto</code> link like this:</p>

<pre class="brush: html">
&lt;a href="mailto:[email protected]?subject=Newsletter%20subscription%20request&amp;body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F"&gt;
Subscribe to our newsletter
&lt;/a&gt;</pre>

<p>The resulting link looks like this: <a href="mailto:[email protected]?subject=Newsletter%20subscription%20request&amp;body=Please%20subscribe%20me%20to%20your%20newsletter!%0A%0AFull%20name%3A%0A%0AWhere%20did%20you%20hear%20about%20us%3F">Subscribe to our newsletter</a>.</p>

<section id="Quick_Links">
<ol>
 <li>{{HTMLElement("a")}}</li>
 <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li>
 <li>{{RFC(5322, "Internet Message Format")}}</li>
 <li><a href="https://www.url-encode-decode.com/">URL encode/decode online</a></li>
</ol>
</section>