Creating a Personal Library of Canned Emails, Ready to Send in One Click
A lot of our emails at work are repetitive. This is especially true if you send work out for reviews, send frequent reports, or email reminders to people (agencies and digital marketing teams, I'm looking at you).
So there's this thing in HTML called an anchor tag, which can be used to open up emails. You may have seen these "mailto" links on contact or support pages throughout the web. However, they can do a lot more than just fill in the "to:" field of your email with the contact address.
This is your typical mailto link:
<a href="mailto:email@address.com">email@address.com</a>The email address of the contact is directly in front of the "mailto:" designator. It's the repeated in between the angle brackets (>email@...<) so that it will show up on the page.
Let's make this work for us
While most people leave it at that, you can actually turn these mailto links into fully-fledged canned emails, complete with CC, BCC, Subject Line, and even Body content.
To add content to these extra fields, we'll put some parameters on the href value, using a question mark (?) immediately after the email address, and then ampersands (&) for each extra field. For example:
<a href="mailto:email@address.com?subject=Some+Subject+Line&cc=xxxxx@xxx.com&bcc=xxxxx@xxx.com">email@address.com</a>This part:
?subject=Some+Subject+Line
...tells the browser that we want to add some extra stuff, which is why it begins with a question mark (?). We then give it the keyword subject so that it knows we want to fill in the subject line. After the keyword, we use the equals sign (=) followed by our subject line so the browser knows what's inside the subject.
Test it out:
email@address.comHot Tip
Since these links need to be URL compatible, it's best to swap all of your spaces with plus signs (+), like this:
This+has+no+spaces,+only+plus+signs
This goes for all of the values in our mailto link. The rule is, if you see a space, turn it into a +
All of the options
We are able to create custom email links with the following "keywords":
&subject=
&cc=
&bcc=
&body=
Remember that your first "keyword" should use a question mark (?) instead of the ampersand (&). Usually that means ?subject but if you don't want the subject line in your link for some reason, make sure you start with a question mark (?).
Time to automate
Let's make our own list of canned emails, so we just click a link and open the pre-written email.
See below or watch the video to code-along:
Get the code
- Open up either a text editor like notepad or (even better) a code editor like Visual Studio Code (it's free and it's amazing).
- Paste in the following code—it's the full template with responsive design:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Templates</title>
<style>
* {
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
}
.container {
padding: 2rem;
display: flex;
flex-direction: column;
}
.column {
width: 100%;
padding-right: 5rem;
}
h2 {
margin-top:2rem;
color: black;
border-bottom: 2px solid black;
}
a {
color: #3636ee;
text-decoration: none;
}
.template-link {
margin-bottom: 1rem;
}
a:hover {
color: #1a1abc;
}
@media screen and (min-width:768px) {
.container {
flex-direction: row;
}
.column {
width: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<h2>Reports</h2>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Weekly+Report" target="_blank">Weekly Report to Ben</a></div>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Site+Report&cc=another@example.com&bcc=theblindcarbon@copy.com&body=Lorem+ipsum+dolor+sit+amet+consectetur+adipisicing+elit.+Minima+dolor+suscipit+obcaecati+voluptatum+modi,+inventore+dolorum+eos+tempore+ut+illum+aut+doloremque+quisquam+sint+quae+velit+vero+sequi+incidunt+est!" target="_blank">Site Report</a></div>
<h2>Requests</h2>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Question+about+Request" target="_blank">Question about Request</a></div>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Review+Request" target="_blank">Review Request</a></div>
<h2>Asks</h2>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Ask+for" target="_blank">Ask for Permissions</a></div>
</div><!-- /.column (left) -->
<div class="column">
<h2>Requests</h2>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Weekly+Report" target="_blank">Weekly Report to Ben</a></div>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Site+Report&cc=another@example.com&bcc=theblindcarbon@copy.com&body=Lorem+ipsum+dolor+sit+amet+consectetur+adipisicing+elit.+Minima+dolor+suscipit+obcaecati+voluptatum+modi,+inventore+dolorum+eos+tempore+ut+illum+aut+doloremque+quisquam+sint+quae+velit+vero+sequi+incidunt+est!" target="_blank">Site Report</a></div>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Question+about+Request" target="_blank">Question about Request</a></div>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Review+Request" target="_blank">Review Request</a></div>
<div class="template-link"><a href="mailto:youremail@example.com?subject=Ask+for" target="_blank">Ask for Permissions</a></div>
</div><!-- /.column (right) -->
</div><!-- /.container -->
</body>
</html>3. Save it somewhere you can find it again 😉
4. Drag the file into an open browser of your choice (preferably one that you've set your default email app)
5. Watch the video above and start modifying the mailto links in the code.
First change the contact "youremail@example.com" to a real email. Then try writing out the subject line and even the body of your email.
Make sure your subject lines and body content contain "+" instead of spaces.
Save your work and refresh the page.
