Add a User-Friendly Spam Deterrent with Drupal Webform

January 7, 2013

Spam is one of the worst by-products of the digital age. If it’s not bad enough that we are hit with advertisements 24/7, we also have to get some kind of sales pitch in our inboxes as well. Each morning, I wake up and have to delete at least half of all my new emails, just to save my own sanity.

Most developers have long since done away with showing email addresses on public-facing sites, but site visitors still need a way to easily contact a company. Enter the web form. I challenge you to find a contact page that doesn’t have a form on it. I’m not saying it shouldn’t, but we now have to make sure that spam is appropriately handled.

Captcha, reCAPTCHA, Mollom, Etc

To combat this rise in spam, several great plugins/modules have been developed. The best of these is probably reCAPTCHA, which also helps translate libraries of books as you fill out the textbox. But one problem still remains with all of these: the site visitor is punished for being a real potential customer.

The best practices way of overcoming this problem is simple. Add an extra field in your form, hide it using “display: none”, and validate that this field is empty when the form is submitted. While users will never fill out this field – it is hidden, after all – spambots don’t read CSS and will fill out any and all fields.

The only drawback would be for screen readers, which also ignore CSS. For this reason, it is best to leave a label for this field with something obvious, like “Leave this field blank”.

The Drupal Way

UPDATE: It has come to my attention that a module specifically designed to accomplish this has been developed called Hidden CAPTCHA. While it is worthwhile to take a look at essentially what this module is doing below, the module solves the problem without much work on your part.

Dealing with forms in Drupal is best done by utilizing the Webform module. The Webform module makes setting up a new form, with all of its fields, a breeze. Create a new piece of “Webform” content, add your fields, select email addresses to be notified upon submission, and you’re done.

Then, to reduce spam, you could use the Captcha+ReCaptcha modules, but let’s look at achieving the nice, user-friendly scenario above.

Drupal Webform Setup

Once you’ve added all the fields for information you wish to collect, add one more textfield with the label “Leave this field blank”. (No need to make it mandatory, because we actually want it not to be filled out.)

Add a field with the label "Leave this field blank"

The default values are fine on the subsequent screen; just click “Save”. Now, we just need to add a bit of validation.

The Webform Validation Module

It really coudn’t be easier. Simply install the Webform Validation module and click on the Form Validation tab in the top right corner of the webform tab in your form.

Click on the Form Validation button in your webform

Once inside, scroll all the way down and select the “Must be empty” link near the bottom of the page. You’ll note that the description even gives this use case as an example for this option.

Select the "Must be empty" link

Now give this an administrative name for later (I generally choose “CSS Captcha” because it’s simple, yet descriptive) and select the field you just created from the checkboxes. Save and you’re almost done!

Name the rule and select your field

Hiding the Field from Real Visitors

To stay true to our “best user experience” credo, we now have to get rid of this field from the page for real visitors. It’s best to hide the entire form item div by targeting something like: “#webform-component-leave-this-field-blank”. As a bonus, if you use the same field name for multiple fields withing forms in your site, you only need to do this once!

CSS


/* ----- Hidden "CSS Captcha" Fields ----- */
#webform-component-leave-this-field-blank {
    display: none;
}

You Did It!

With a simple Drupal module, you eliminated one of the internet’s most despised types of content. Certainly your mileage may vary as spambots continue to evolve, but this should do well in the short term, without punishing the ones you actually want to fill out your form: your users.

Wanna chat about this article or any others? Feel free to DM me or mention me on Twitter @marcusdburnette to start a conversation!

Leave a Reply

Your email address will not be published. Required fields are marked *