How To Add A Honeypot Field To A Shopify Form

Recently, a few stores that I manage have seen an uptick in bot form submissions. While the intentions of these bots are unclear, a few things are. This is annoying not only for the store owner, but also for the person who's email address has been compromised and used in these form submissions. These fake submissions are sometimes submitted through blog post comments, contact forms, and even new account creations!

Luckily we have a couple of options to drastically reduce and sometimes even stop these bots all together. One option is to use reCAPTCHA, which boasts a tag line of "Easy on Humans, Hard on Bots"; however, if you are a human like me, you know that this isn't always true. "Click on all of squares that have cars in them". So... does that include the square with a sliver of the roof of the car in it or... I'm not a fan. What is truly easy on humans is the form "Honeypot" field. This field is hidden to humans, but visible to bots. All it takes is an HTML input field, some CSS to hide it, and some JavaScript to validate it.

Here is an example of a Shopify store's new account creation form found in the theme's /templates/customers/register.liquid file.

Screenshot of the example HTML and Liquid

The first step is to include the markup for the hidden field. In the example below, you can see that I chose to use the hp prefix to inform myself that it's a honeypot without using the actual words honeypot. Also note that I have kept the markup structure the same as the rest of the form, with the inclusion of the hp-bcontrol class. Don't forget to include the tabindex="-1" and autocomplete="off" to ensure that humans don't accidentally enter a value into the input.

screenshot of the example html for the form honeypot field

The CSS to hide the input field is relatively simple. See below.


.hp-bcontrol {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

 

And for the JavaScript, we will simply add an event listener to the form to check to make sure that the honeypot doesn't have a value on submit.

  const Form = document.querySelector('.create-customer form');
  const Honeypot = Form.querySelector('.hp-bcontrol input');
  Form.addEventListener('submit', event => {
    if(Honeypot.value && Honeypot.value !== '') {
      event.preventDefault();
      console.log('nope');
    }
  });

The whole file put together looks like this:

Complete honeypot form field example