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
Top comments (0)