Blog

CAPTCHA, an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart,” is a popular method for preventing spam form submission. A CAPTCHA requires users to pass a test before they can successfully submit a form.

You’ve likely come across CAPTCHAs before. The tests can come in the form of asking users to identify distorted letters and numbers or select images that match a common theme. There are also less disruptive CAPTCHAs such as No CAPTCHA reCAPTCHA and invisible reCAPTCHA, but both of these can fall back to a traditional CAPTCHA when the program suspects the user is a bot.

Filling out forms while trying to pass the CAPTCHA can be difficult and frustrating for users. The honeypot field is an alternative solution that is practically undetectable to the user while effectively deterring bot submissions.

What is a honeypot field?

A honeypot field is an anti-spam technique that baits bots into filling out hidden form fields and then rejects their form submissions. Human users cannot see the field so they don’t fill it out. However, bots will download the HTML code and attempt to fill out every field within the form. We can use this behavior to guess which submissions are from automated bots and reject them.

Setting up a honeypot with collective.easyform

Let’s create a simple honeypot TTW (through-the-web) with Plone 6 Classic and EasyForm.

First, we create a form field we do not want human users to fill out — our honeypot field. Let’s name the field “Verify Email” since bots tend to look for certain common fields to fill out such as “Username” and “Email.” Just in case a screenreader picks up the field, we will also add the Help Text “Leave this field blank if using screen reader.” Click “Add” to create the new form field.

Next, we hide the honeypot field by updating the “Verify Email” field with a CSS class that hides it. Bootstrap conveniently has a d-none class that’s equivalent to the css display: none.

On the Edit Fields page, find the “Verify Email” field and click on the “Settings…” link to open the “Edit Field” modal.

In the “Edit Field” modal, click on the “Advanced” tab. Then, in the “CSS class” field, enter d-none.

This will visually hide the honeypot field.

Lastly, we update the field validation to reject any form submission where the honeypot field is not empty. In the “Edit Field” modal, click on the “Overrides” tab. Then, in the “Custom Validator” field, enter python:test(value=='', False ,'Submission failed.').

When a bot fills in the honeypot field, the form submission will fail and show an error message.

We have successfully set up a simple honeypot field.

Accessibility and Usability

It’s important to consider usability and accessibility when adding honeypot fields. The goal of the honeypot field is to deter bots without disrupting the user experience.

In the custom validation code snippet, we supply a field level error message. However, since the honeypot field is hidden, the message is not displayed on screen. If a real user fills in the honeypot field, they will only see the overall form error, not the honeypot field error message. They will have no useful feedback about why the form will not submit.

We want to ensure that screen readers do not “see” the field. To that end, we use display: none to hide the field from screen readers rather than just moving it off screen with margins and positioning. Also to prevent keyboard users from interacting with the field, you can add tab-index="-1" to the honeypot field.

The collective.honeypot add-on

The TTW approach works well, but needs to be repeated for each form. Also, it does not cover all the forms within a Plone site. The collective.honeypot add-on provides honeypot protection to Plone forms.

After installing the package, it doesn’t require any further activation or any configuration to get started. The add-on automatically adds honeypot fields to a variety of Plone forms including EasyForms — no additional steps required.

In conclusion, CAPTCHAs serve an important function. Malicious bots can cause havoc on a website, and it’s the last thing you want to happen. However, no one likes filling them out, so why not go for a win-win?

A simple honeypot field can be an effective alternative to traditional CAPTCHAs and will help secure your website without stressing users out over exactly how many test images have stoplights in them.