HTML Mailto: How to Use It

Want to learn how to add a mailto link in HTML? You’ve found the right blog post.

Mailto allows visitors on your site to quickly and easily send an email to any address you specify. You can even have the email auto-populate with CC and and BCC recipients, a subject line, and body text.

In this post, we’ll tell you what you need to know to add mailto links to your website. Let’s dive in.

What is mailto in HTML?

In HTML, a mailto link is a kind of link that opens a new email in the default email client of the user’s browser, instead of to another web page. A user can click a link and then quickly send an email from their own address to one or more recipients specified in the mailto link.

How to use mailto in HTML

HTML mailto Syntax

To create an HTML mailto link, you’ll use the anchor (<a>) element, just as you would for any other hyperlink. For the anchor’s href attribute parameter, you’ll use the mailto: followed directly by the email address. Here’s the syntax:

<a href="mailto:name@example.com">Send an email!</a></p>

And here’s an example of the link in action. (Note that, for the example below, I’ve also set the mailto link to open in a new tab to make the demonstration work properly. However, this is not necessary on a normal HTML web page.)

See the Pen html mailto by HubSpot (@hubspot) on CodePen.

When you click the mailto link above, your browser will open up a new email with your default email client. You’ll also see that the email address you provided populates the “to” field.

You can also include add multiple recipients to your link by separating each email address with a comma:

See the Pen html mailto - multiple recipients by HubSpot (@hubspot) on CodePen.

HTML mailto Parameters

You can also add additional parameters to your mailto link to make the user experience more seamless. A mailto link accepts the following parameters:

• mailto (required): specifies the recipient email address(es)
• subject (optional): creates a subject line for the email
• cc (optional): adds one or more carbon-copy recipient
• bcc (optional): adds one or more blind-carbon-copy recipient
• body (optional): adds body text to the email

When adding optional parameters, always place the mailto parameter first, then follow the parameter with the ? delimiter character. Separate multiple optional parameters with the & character.

Here are some examples of mailto links with optional parameters:

See the Pen html mailto - parameters by HubSpot (@hubspot) on CodePen.

Mailto and Spam

Unfortunately, since they have no built-in spam protection by default, mailto links are vulnerable to spam attacks. It’s easy to build a bot that crawls your webpage looking for mailto links and then flooding them with spam.

That’s why we recommend collecting emails from visitors via a form, rather than a simple mailto link on your page. With a form that sends email, you can add a captcha and other spam prevention features to limit the amount of unwelcome emails in your inbox.

Also, it should go without saying, but don’t put an email address in your mailto link from someone who doesn’t want to get a bunch of emails from your website!