DEV Community

Jason Melton
Jason Melton

Posted on • Updated on

More Stuff You Can do with mailto


I’m building an email automation website using React for the front-end, Rails for the back-end. It lets users create and save email templates and contacts. It has a nice, clean single page display where users can select and edit templates and send them to their chosen contacts.

The issue I had to overcome: ‘How can I quickly create an interface that anyone can use from their personal email?’

I researched various back-end options, JavaScript libraries, and other email automation projects on GitHub. There’s a lot of cool stuff out there, but I realized my problem was not that complex. In fact, I could probably just use a mailto: link.

Looking into mailto:, I learned there’s a lot more here than “that annoying link I accidentally clicked when I was trying to copy your email.” Here’s the meat:
Image for post

The Meat:

mailto: links are “a type of HTML link that activates the default mail client on the computer for sending an e-mail.”[1] A standard one look like this:

<a href="">Email!</a>

There’s more! Here’s what I’ve learned:

General Idea

After you set up your basic anchor tag with a href="mailto:... , you can add your first parameter to the href with a ? and additional parameters with a &.
For example:

<a href="

Add a Subject

Have a subject automatically appear when the mail client loads:

<a href=" Email!">Email!</a>

Using Chrome and Gmail, spaces between words in the subject line were acceptable. It also transposed if I put a + or %20 in place of a space.

Add a Body

<a href=" to the body!%0D%0AI'm on the next line!">Email!</a>

Similar to the subject, you just add a body parameter.
Want to add a line break in your body? Use %0D%0A in place of return.

Other special characters may need to be encoded. Using JavaScript, you can escape all the special characters using encodeURI() and adding your subject string as a parameter. [2.]

Open in New Tab

Adding a target of _blank will cause the email to open in a new tab.

<a href=”" target=”_blank” rel="noopener noreferrer">Email!</a>

Be sure to include rel=”noopener noreferrer” when opening a link in a new tab to avoid exposing your site to performance and security issues. [3.]

Options for a target from w3schools[4.]:
_top: Opens the linked document in the full body of the window
_blank: Opens the linked document in a new window or tab
_self: Opens the linked document in the same frame as it was clicked (this is default)
_parent: Opens the linked document in the parent frame

Add Multiple Contacts

Add multiple recipients with a comma and no space between emails.

<a href=',,'>Email!</a>

CC or BCC Contact

Carbon copy or blind carbon copy recipients using &cc= or &bcc=.

<a href=""> Email! </a>

Again, you can add multiple contacts with a comma.


In my research, I’ve seen some cross-browser, cross-email client issues with some of these methods, especially the ones dealing with special characters. Ultimately, my purpose was to point out some of the flexibility of mailto:. I’m sure there are things I’m overlooking or glossing over.

I love to be corrected. If I am missing anything, please shoot me a message, I’d love to add to the list. Or send me anything cool that you’ve done that I can share here?

As always, thanks for reading. Hope this helps someone!


Top comments (0)