More Stuff You Can do with mailto
Tags: html, javascript, email, mailto
Published: 2020-07-17 19:17:25

##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:
```html
<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:
```html
<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:
```html
<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
```html
<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.
```html
<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.
```html
<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=`.
```html
<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