Reply by email

I’ve added a “Reply by email” button to the end of posts on my site. My aim is to give readers a clear and obvious way to contact me, should they have any questions about something they’ve read.

Now that I’m using a masked email address as a way to control spam, this solution feels the least confusing. It means you can click a button which automatically opens your mail client, without having any concerns about why my email address looks a little strange.

“Reply by email” is simple and descriptive, unlike random.yw4fe@aleeas.com, which if you saw it in plain text, you might think twice about emailing.

In this post I want to explain how it works.

Utilising the config.toml file #

My personal site is built with Hugo, so I store this masked email address in my config.toml file. Doing so means I can manage it from one place and easily update it, should it receive spam.

[author]
email = "random.yw4fe@aleeas.com"

Now I can expose the address in my templates using a variable:

{{ .Site.Author.email }}

Simple stuff. Next it’s onto building the button.

Building the HTML partial #

I set up a partial file for the code that renders my ‘Reply by email” button. Now I can include it anywhere in my templates.

<div id="reply-by-email">
  <a class="Button Button--secondary" href="mailto:{{ .Site.Author.email }}">Reply by email</a>
</div>

And, here is the final HTML output, with the email address rendered.

<div id="reply-by-email">
  <a class="Button Button--secondary" href="mailto:random.yw4fe.@aleeas.com">Reply by email</a>
</div>

You’ll notice I’ve wrapped the link in a div with an id. This is so I can create jump links from some other place in the content. For example:

If you spot any typos of have any questions, [drop me an email](#reply-by-email).

The anchor tag includes two classes used to style the link as a button.

.Button {
  border-width: 0;
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  outline-style: none;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.1s;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}

.Button--secondary {
  background: var(--color-white);
  border: solid 2px var(--color-dark);
  color: var(--color-dark);
  padding: 8px 16px;
}

.Button--secondary:hover,
.Button--secondary:focus,
.Button--secondary:active {
  background-color: var(--color-dark);
  box-shadow: 0 10px 28px rgba(47, 47, 47, .3);
  transform: translateY(-2px);
}

.Button--secondary:focus {
  color: var(--color-white);
  outline: 2px dotted var(--color-dark);
}

This does the job.

But, as I wrote about recently, exposing your email address in plain text is asking for trouble from email scraper scripts. Unless you’re a fan of spam, it’s worth taking a few extra steps to prevent email scraping altogether.

Final thoughts #

The way I see it, nobody really cares what your email address is, as long as they can find a clear and easy way to contact you.

Realising this, I now feel far less need for a dedicated email address on my website. Especially when it increases the chances of spam. A masked email address, which I can update from time to time and disguise behind a “Reply by email” button, is a good enough solution.

I assume folks might end up saving the address in their contacts, and if I delete and update the address, then emails will start to bounce. But it’s easily enough to head back to my website and find a new way to contact me, if this happens.

In any case, I still have a contact form, so all bases are covered.