Sending Emails with Mailto Links

Introduction

We are all familiar with HTML links whether we know it or not. Each of us probably use them several hundred times a day to get from one page to another. In code, links are generally made by using an <a> (anchor) tag having the href attribute being the target destination. For example, the following was what likely brought you to this page:

  <a href='/knowledge-base/email-with-mailto-links/'>...</a>  

While fundamentally important to the web, there is a lot more you can do with HTML links like sending an email.

In This Article

You will learn how to send emails with an HTML link. This article will include:

• The basics of sending emails using mailto
• Additional parameters to pre-define the message
• Examples on how to put it it all together
• A tool to generate the tags for you

The Basics

Emails can be sent via a link by replacing a url with a mailto: and an email. When a user clicks on this kind of link, their email application will open with the specified email as the recipient. If one isn't set, they will be asked to choose an application to open it with. A basic email link looks like the following.

  <a href='mailto:email@example.com'>Contact Us</a>  

In this case, when the user clicks 'Contact Us', a blank email be created with email@example.com as the recipient. You can see that code in action by clicking here.

Additional Parameters

You can optionally pre-define the following contents of the email:

• subject - the title of the email
• cc - additional recipients (can be more than one)
• bcc - hidden additional recipients (can be more than one)
• body - the email's main text

To set any of the above beforehand, you will need to add a ? followed by the parameter name, an =, followed by the value you wish to include. You can add additional parameters (eg. pre-defining both a subject and a cc by separating these with an &.

Examples

Multiple Parameters

Lets say we want to:

• send the email to: email@example.com
• set the title to: Product Inquiry
• set starting text to: I am interested in the following:
• have the link text be: Contact Us

The above can be done with the following code:

  <a href='mailto:email@example.com?subject=Product%20Inquiry&body=I%20am%20interested%20in%20the%20following:'>Contact Us</a>  

Note that the spaces have been replaced with %20. While spaces generally work, they are invalid inside the href attribute. To ensure that your links function correctly everywhere, make sure to replace them or use the tool below.

Multiple CC Recipients

Multiple recipients can be done as well. To do this, separate each recipient with a comma:

  <a href='mailto:email@example.com?cc=email2@example.com,email3@example.com'>Contact Us</a>  

Build Your Own Links

Use the tool below to generate email links for yourself:

  Code will appear here!  

Was this helpful?

Share this article with the people you know: