Preventing spam emails from contact forms

Eurghh. Spam. It really is annoying. My old website used a contact form that was doing a pretty good job of stopping it. The problem was that it used a CAPTCHA to do it.

Original CAPTCHA Image to stop spam

An example of the original CAPTCHA image

Let’s start with the basics. The original CAPTCHAs were developed twenty years ago, the most common type consisting of words that were distorted and twisted. The logic behind them was that they were difficult for another computer to read. This was the benchmark CAPTCHA for many years until in 2009 Google acquired reCAPTCHA. This more advanced system used multiple words to decipher as well as an audio prompt. A great feature was that as more words were deciphered, they helped to digitize books that computers couldn’t currently scan. The latest CAPTCHAs often just consist of a tick box where you must explicitly declare you are not a robot.

An example of reCAPTCHA to stop spam

An example of reCAPTCHA

What’s the problem with CAPTCHAs?

A superb article from 2013 highlights the many issues with CAPTCHAs. The article, from Moz.com explains that CAPTCHAs can harm your conversion rate. They are an obstacle to getting your customers and readers from engaging with your site. The user experience is key, and if people need to spend valuable time doing something they don’t personally derive any benefit from, they will leave. Quickly. And analytics statistics support that view. I strongly suggest you check the article out as it changed the way I thought about CAPTCHAs completely.

What’s the alternative to beat spam?

The honeypot. Honeypots are often used in the cyber security industry to attract malicious systems and software and quarantine them in a safe place where they can do no harm. So, in theory,  you can trash anything that looks suspicious before it gets to you, by creating a contact form that can determine whether it is being filled out by a human or a machine. I used a hidden form field to achieve this. This field will be completed by spam software as they are usually designed to fill in any available field. Meanwhile, the honeypot field is hidden to humans through a CSS display:none declaration and thus if it is unfilled, the email should probably be allowed through. You can see what I mean below:

The script is checking to see whether the honeypot field (in our case, a simple text input) exists, and if so, that it is empty. You would then continue to build your contact form as normal. The second step is to create your HTML contact form. This can be done as usual, but adding in our hidden field. I have added an inline style for demonstration purposes but you should use a stylesheet to hide the honeypot.

And that really is all there is to it. You now have a form that will ignore the vast majority of spam. So give it a go and ditch the CAPTCHA!

Ben Roberts

Thank you for reading! I'm Ben, a web developer from Hertfordshire. I love writing about problems I've been able to solve, or very ocasionally, those that I can't. Sometimes I write about other things, such as cybersecurity, which has always fascinated me. If there is anything you'd like help with, or explained better, let me know in the comments below.