How to create a simple Honeypot to protect your Forms

NOTE: This will not get rid of the mail but rather show you whats certainly spam and what is not.

Let's Face it, we've all got hit with form abuse one time or another - and it can be SUPER ANNOYING! (sorry for yelling).

Well today (or whatever day it is for you now) I'm here documentating "how to stop those pesky little shmizzfizzleskiizzles".. Yea its better than what I wanted to say.
Anyways. Let's say you got this ole plain looking form (Most forms do have this info but this is not what counts).

<form id="myformid" action="/myformaction">
 <label for="name">Your Name</label>
 <input type="text" id="name" name="name" placeholder="Your name here" required maxlength="100">
 <label for="email">Your E-mail</label>
 <input type="email" id="email" name="email" placeholder="Your e-mail here" required>
</form>

Most Bots are simple mineded and often just search for common "patterns" like "Input ID", "Label Names", "required Fields" etc.. These bots typicaly search the code and just enter the attributes as needed. This is why sometimes you can get form requests from names like: gjsdaxsdhgh.

Most common "go to" for Bots to search for is the typical fields titled: "name, email, phone, address, message" 

What we are going to do is a little cheating to trick these nasty little sugar suckers. This is called a "Honey Pot". Pronounced just like the one you see that fat yellow bear in a red shirt with his hand in all the time.. 

Here is what we got to do 

<style>
 /* required style */
 .poohsgoodies{
 opacity: 0;
 position: absolute;
 top: 0;
 left: 0;
 height: 0;
 width: 0;
 z-index: -1;
 }
 /* aesthetics only */
 .container {
 max-width: 1024px;
 width: 100%;
 margin: 0 auto;
 }
 label, input {
 display: block;
 margin-bottom: 16px;
 }
 pre {
 background-color: #f1f1f1; 
 margin-bottom: 20px; 
 max-width: 600px; 
 padding: 12px;
 }
 </style> 

<form id="myformid" action="/myformaction">
 <!-- Real fields -->
 <label for="nameFYWP">Your Name</label>
 <input type="text" id="nameFYWP" name="nameFYWP" placeholder="Your name here" required maxlength="100">
 <label for="emailFYWP">Your E-mail</label>
 <input type="text" id="emailFYWP" name="emailFYWP" placeholder="Your e-mail here" required>
 <!-- P o o h s J a r -->
 <label class="poohsgoodies" for="name"></label>
 <input class="poohsgoodies" autocomplete="off" type="text" id="name" name="name" placeholder="Your name here">
 <label class="poohsgoodies" for="email"></label>
 <input class="poohsgoodies" autocomplete="off" type="email" id="email" name="email" placeholder="Your e-mail here">
</form>

I should not have to tell you whats changed, if you cant see that there has been a change you need to wash the honey out of your eyes! OK OK All jokes aside for this one. I bet your thinking I got some explaining to do. So heres what we did in the above.

First we added some class with <style>! No Seriously, We added the "poohsgoodies" Class by using the <style> code.

Important things to point out - or so im told - and a bit on what we did. You dont have to understand but if your here for the form honeypot then you should atleast read this.

First; Dont use display:none, some bots get lost and cant find their way to a field if display none is used, other simply know that's the "No No Square" and that they should not "Touch you there". Also don't use the "hidden" tag in a class name, some advanced bots are better at hide and seek than others - Hey I didn't make the bots or the rules!

What We did: Well we created (or copied) the "Real fields". These are your form fields, without them your form is.. Well its not a form and uhmm why are you here again? This data is releavant to your forms backend in terms of the data you get when a user fills out your form. I recommend to make sure your form "hashes" are not as basic as a group of Visco girls at Starbucks! Seriously! Get it together. Use anything other than "name". "yournamehere" or "nameFYWP" is harder for a bot to guess than plain ole "name". Try to avoid dashes. IE: "name-FYWP". If a bot split the hashes "name" would be easily exposed and would sort of defeat the purpose of the HoneyPot. With the above changes a bot will know there is fields there BUT wont know what they are asking for. 

Now we should be able to catch a spammer with their sticky hand in the pot!

The abive 'poohsgoodies' class will hide all the created fake inputs. I often recommend to ensre the "Fake Input: fields are the most simple, generic and attractive as possible. Use everyday common names such as "email, phone, name, etc", disable the autocomplete (so, browser will not fill it in - this can affect REAL Visitors), be sure to disable rules, but keep the types.

In the above code example we have 2 parts:
Real fields - with our inputs protected by renamed hashes (you can implement the hash or strange name as you prefer just make sure the ack end is set up for the same ID).
And then the honeypot (dont write the word "honeypot". If anything split the letters by a space to avoid any direct recognition).

Now on your backend keep an eye on new Form Entries. Verify if any of the "poohsgoodies" fields came filled in. If so you did it! You deserve a spoon full of honey cause you caught a spam!

This will not get rid of the mail but rather show you whats certainly spam and what is not. 
I will add more on how to filter these out later.