DEV Community

loading...

More Stuff You Can do with mailto

cooljasonmelton profile image Jason Melton Updated on ・3 min read

Background:

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="mailto:example@email.com">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="mailto:person1@email.com?cc=person2@email.com
&subject=The%20subject%20of%20the%20email">
Email!</a>

Add a Subject

Have a subject automatically appear when the mail client loads:

<a href="mailto:example@email.com/?subject=Important 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="mailto:example@email.com/?body=Welcome 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=”mailto:example@email.com" 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='mailto:person1@email.com,person2@email.com,person3@email.com'>Email!</a>

CC or BCC Contact

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

<a href="mailto:person1@email.com?cc=person2@email.com&bcc=person3@email.com"> Email! </a>

Again, you can add multiple contacts with a comma.

Caveat

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!

[1.] https://www.rapidtables.com/web/html/mailto.html
[2.] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI
[3.] https://web.dev/external-anchors-use-rel-noopener/
[4.] https://www.w3schools.com/tags/att_a_target.asp

Discussion (0)

pic
Editor guide