HTML mailto email link HTML

You can create an email link in HTML that automatically opens the user's default email client when clicked with the "to" address pre-filled with your email address. Here is how to make a mailto email link in HTML.

First, you start with a regular anchor a link tag. Then you need to set the href attribute of the anchor to mailto: followed by your email address.

This will open the user's default email client such as the Mail app or if they have selected a different default email client, it should open in their preferred email client.

When the link opens, the user will see the "to" address already pre-filled with your email address from the mailto link. This means that when they click the email link, they won't have to type in your email address.

The email will be a blank document with no subject and no email body text content unless you format the mailto link as described later on in this article.

If the user doesn't use their system's default email client and has switched to another but without explicitly telling the system to make it their new default, the email links will still open in the system's default.

When you right click on an email link on desktop or long-press on mobile, you'll see the option to "copy email address" which is useful if a user doesn't have their default mail client set up correctly.

HTML mailto email link with subject

Here is how to format a mailto link to create a mailto email link with the subject pre-filled. This can be useful for categorising emails by the contact reason.

To add a subject to a mailto link, place a ?subject= parameter after your email address in the href attribute.

To add spaces in your email link subject, you need to add %20 between each word instead of a space because %20 represents a space character in an encoded-URL.

When a user opens this email link, they will see the subject field pre-filled with "Subject Here" as well as the "to" address pre-filled with "[email protected]".

HTML mailto email link with subject and body text

Here is how to format a mailto link to create a mailto email link with both the subject field and body text pre-filled as well as the email address.

This can be useful if you want to include a specific email template for a certain contact reason or include a reference to a specific thing the user is enquiring about.

To add body text to a mailto link as well as a subject, place a ?subject= parameter for the subject and a &body= parameter for the body text of the email after the email address in the href attribute.

When a user clicks this email link, they will see the both the subject field pre-filled with "Subject Here" and the email body text prefilled with "Body Content Here" as well as the "to" address field pre-filled with "[email protected]".

If you just want to include body text without a subject, just add a ?body= parameter after the email address without a subject parameter.

To add line breaks (new lines) in a mailto link so you can write email body text that spans multiple lines, you need to add %0A at the end of each line because %0A represents a new line character in an encoded-URL.

You can use 2 %0A encodings together, one immediately after the other, to create 2 new line characters so you have an empty line between your lines of text.

When a user clicks this email link they will see the "to" address filled with "[email protected]", the subject "Subject Here" and the following body text:

"Body Content Here
New line here

Line after empty line"

Try it out by pressing the email link we just created: Link Text

Thanks for reading.
Ryan

Published on 3 Aug 2022