HTML Mailto: How to Use It

Download Now: 25 Free HTML & CSS Hacks
Jamie Juviler
Jamie Juviler

Updated:

Published:

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

person using a laptop to create html mailto

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.

Download Now: 25 HTML & CSS Hacks [Free Guide]

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.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

  • Coding to Convention
  • Being Browser-Friendly
  • Minimizing Bugs
  • Optimizing Performance
Learn more

    Download Free

    All fields are required.

    You're all set!

    Click this link to access this resource at any time.

    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!

    coding-hacks

    Topics: HTML

    Related Articles

    Tangible tips and coding templates from experts to help you code better and faster.

      CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

      START FREE OR GET A DEMO