Home → The Classics → Farai's Codelab

Setting Up an Email Based Feedback System.

Published: Updated:

While I want feedback on my posts, I couldn’t be bothered to set up a commenting system for three reasons.

  1. I want to boast about how fast my website is, part of which is doing away with “unecessary” bloat. I consider comments to be part of said bloat. since I have to include a js-based library1.
  2. I’m too lazy and broke to set up a proper commenting system.
  3. I’m unwilling to do proper moderation. Ironic considering that I want to launch a YouTube channel, but that leads to my next point.
  4. I want this website to be slow unlike the fast pace of social media.

So instead of setting up comments, I’ve decided to implement an email-based feedback system. Here’s how.

1. Aliasing My Email For Feedback

Most web hosts support aliasing email with something like [email protected]. It’s great for sorting out emails and finding out which service shared your email with marketers.

Since I use Fastmail with my own domain, I have the benefit of setting up and alias without the +Folder, letting me add up to 600 email aliases that go into various folders. For feedback, I created an address [email protected] which resolved to [email protected] that directs emails to the folder Feedback.

2. Adding A Prepopulated Email

I wanted to add a simple link that would allow someone to quickly send feedback. Basically, you need to do something like this

<a href="mailto:<email>?subject=<subject>&body=<body>">send me feedback</a>

Note that the subject and body need to be URI encoded.

Here’s how I implemented this using Hugo, a Go-based static site generator. At the end of each post, there’s something like this

Thanks for reading this post. If you want to send me some feedback, send an email to gandiyafarai+feedback at gmail dot com. Don’t forget to mention the post you’re refering to!

To make something like that in Hugo, I configured the single.html file (the template responsible for the blog posts on this site). Like this

<a href="mailto:[email protected]?subject={{ .Title }}&body={{ printf "Concerning: %s\n\nThanks for the great article! I know you put words in my mouth by populating this email for me, but I totally thought you wrote something great!" .Permalink }}">send an email to gandiyafarai+feedback at gmail dot com</a>

The default body is rather contrived but ¯\(ツ)/¯, you can change it and tell me how you really feel=.

This results in output that looks something like this.

<a href="mailto:[email protected]?subject=Setting%20Up%20an%20Email%20Based%20Feedback%20System.&body=Concerning%20Setting%20Up%20an%20Email%20Based%20Feedback%20System.%3a%0a%0aThanks%20for%20the%20great%20article%21%20I%20know%20you%20put%20words%20in%20my%20mouth%20by%20populating%20this%20email%20for%20me%2c%20but%20I%20totally%20thought%20you%20wrote%20something%20great%21">send an email to gandiyafarai+feedback at gmail dot com</a>.

Note that the subject and body are URI encoded, which the Go templating system that Hugo uses does that automatically in the context of hrefs.

With this, once someone navigates to the link, it’ll open up an email client with the recipient, subject and body pre-populated. This is what it looks like on iOS’s Mail app.

The iOS email app with the recipient, subject and body prepopulated.

Mind the typo. Still works either way.

Not sure how many emails I’ll get giving me feedback, but I can’t wait to hear it, unless it’s abusive nonesense. I don’t want that here.

  1. Static hosting has come a long way since I first wrote this as you can use severless functions to handle form submissions and build the site with the submitted comments. Then again, I could have done that on another server. Either way it would have been a lot of work. ↩︎