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?’
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
mailto: links are “a type of HTML link that activates the default mail client on the computer for sending an e-mail.” A standard one look like this:
There’s more! Here’s what I’ve learned:
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
<a href="mailto:email@example.comfirstname.lastname@example.org &subject=The%20subject%20of%20the%20email"> Email!</a>
Have a subject automatically appear when the mail client loads:
<a href="mailto:email@example.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
%20 in place of a space.
<a href="mailto:firstname.lastname@example.org/?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.
escape all the special characters using
encodeURI() and adding your subject string as a parameter. [2.]
_blank will cause the email to open in a new tab.
<a href=”mailto:email@example.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 recipients with a comma and no space between emails.
Carbon copy or blind carbon copy recipients using
<a href="mailto:firstname.lastname@example.orgemail@example.comfirstname.lastname@example.org"> 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!