Form spam, am I right?  Ugh, so annoying.

Case in point, we just redid our WordPress website about three weeks ago and today, all of a sudden, HUNDREDS of spam emails.  As part of the site re-do, we swapped out the underlying form framework for a different one.  Now, we use Contact Form 7, mostly due to the luck we have had using it on client projects.  For most clients, it has been a great fit (and, when it isn’t, usually Gravity Forms is the hammer we like to swing).

Anyhow, one of the great features Contact Form 7 has are a couple of really powerful anti-spam features.  We had it on our list to enable these features, but they were back-burnered just due to time constraints.  With the receipt of all of the form spam this morning, this problem became pressing.  As such, I figured I would share how I solved it.  It is a pretty easy process, definitely accomplishable in 10 minutes (or less).   Plus, it works.  It has been several hours now and the form spam that was coming in at a rate of about 20 per hour has completely stopped.  Boo-ya!

So, just as a little background, these instructions are for WordPress.  Since WordPress is the most popular blog/CMS platform there is, hopefully this will be able to help people.  If you don’t use WordPress, don’t fret.  Just follow these same basic steps with your platform and your results should be the same.

Step 1: Install Contact Form 7

Again, this will probably work with other platforms, as well as other form frameworks.  But for simplicity, we are going to assume you are using (or can use) Contact Form 7.  Installing it is just as simple as any other WordPress plugin, so I am going to assume you have that part covered.  Once installed, you should have a new sidebar item in your WordPress Admin called “Contact”, which looks like this:

Once installed, you can go about creating your form.  Once you have this done, protecting your forms is pretty easy.  To get you started, here is the HTML for a (very) basic form:

<p>Your Name (required)<br /> [text* your-name] </p>

<p>Your Email (required)<br /> [email* your-email] </p>

<p>Subject<br /> [text your-subject] </p>

<p>Your Message<br /> [textarea your-message] </p>

<p>[submit "Send"]</p>

Working with Contact Form 7 is very simple, in that everything is controlled through tags.  Adding tags is as simple as using the “Generate Tag” function on the right of the admin interface.  Easy peasy.

Step 2: Install Honeypot Functionality for Contact Form 7 (Optional, But Recommended)

One of the spam bot deterrents we are going to use is called “Honeypot”.  Although this is optional, it gives your form an easy/automatic bot-rejection capability (fun fact: almost all form spam comes from bots).  Basically speaking, what Honeypot is is a fake form field that spam bots fill out (that no human would).  In a word, spam bots are dumb and go after the lowest common denominator.   What Honeypot does is create a field that web browsers hide from real humans.  Bots, though, since they are just chewing through the HTML of your page, see the field, ignore that it should be hidden, and just fill it out.  This technique is actually pretty old and it has worked for a long time.  However, it probably will not work forever, which is why it is just one of the two tools in our anti-bot tool bag.

To install this feature, simple install the Honeypot Addon plugin for Contact Form 7.

Step 3: Add Honeypot to Your Form

This step is quite easy.  All you have to do is use the Tag Generator to generate a honeypot field for your form.  As the plugin tells you, choose a name other than “honeypot” (I like to use “Mailing Address”, something I would never ask for).  Add the field to your form, and boom, it is protected by honeypot.

Once you do that, you should now have something like this in your form (I put mine right above the submit button):

<p>[honeypot mailing-address]</p>

Step 4: Math to the Rescue

Personally, I hate CAPCHA.  No, that is not fair, I **LOATHE** CAPCHA.  Whenever I see it, even on the biggest sites, my right eyebrow starts to twitch, uncontrollably.  Is CAPCHA effective?  Yes, probably.  Is it a maddening usability issue?  Yes, definitely.  I have always wondered how many false-positives CAPCHA  creates, which causes people to just abandon the form.  I know I have had to resort to the audio CAPCHA on some sites just to get the form filled out.  This is super-annoying, unnecessary, and probably has negative side-effects for users.  No one likes to having to prove they are innocent, especially to a website.

So, since CAPCHA was out of the question, I went with my (massively) preferred option, just some simple math.  In my opinion, a simple math problem is, approximately, 1,366% easier to fill out than CAPCHA usually is.  Adding this to your form is easy.  In exactly the same way you generated the honeypot tag, generate another tag for “Quiz”:

Now, there are a few options on this one, but they are easy to fill out.  First, you can name your field whatever you want.  Second, I like the specify a field length of  “5”.  This way, it is a small field, so when your users fill out the answer there isn’t a ton of extra field space.  Here are the options as I created them:

To fill out the quizzes (the actual math problems displayed to the user), use the formatting of X+Y=?|Z.  As an example, 2+1=3 would be 2+1=?|3.  And personally, I like to rotate three quizzes (at least).  This way, it offers a bit of learning that will be required to beat your form.  You can add as many quizzes you want, just put down one per line, and make the problems super-easy (oh, and make sure the answers are right).  You are not testing people’s math abilities, you are testing if they are human.

Once done with all that, simple copy the code it gives you (in the brown field) and paste it onto your form page:

So, when you are done, your “Edit Page” screen should look like this (with other content, probably, of course):

And there you have it.  A contact form that is protected by both Honeypot and Math in about 10 minutes.  This is super-easy and should make form spam a thing of the past.