How to Use Captcha in Drupal 7

You've seen Captcha used on many, many websites. Before you can submit a form, it provides a question and asks for a response from you. This prevents many spam comments, form submissions and email submissions.

This tutorial will show you how to use the standard Captcha module for Drupal and will introduce you to several alternatives.

Step 1. Download and Install

You can get the standard Captcha module here http://drupal.org/project/captcha

Download the module from http://drupal.org/project/captcha.
Go to Modules > Install new module and browse to find the file on your computer and upload it.

Step 2. Activate

You will see that two modules have been installed. You can see in the description that they are dependent upon one another so be sure to enable them both.
Click the check boxes and scroll to the bottom of the page and save to enable the the modules.

You will then be able to access the "Configure" option for both modules. Click Configure on CAPTCHA first.
A CAPTCHA can be added to virtually each Drupal form. Some default forms are already provided in the form list, but arbitrary forms can be easily added and managed when the option "Add CAPTCHA administration links to forms" is enabled.
Users with the "skip CAPTCHA" permission won't be offered a challenge. Be sure to grant this permission to the trusted users (e.g. site administrators). If you want to test a protected form, be sure to do it as a user without the "skip CAPTCHA" permission (e.g. as anonymous user).

Step 3. Configure the module

Configure the Default Challenge type. This will be used by all forms unless you change the type for an individual form.
The module comes with two types of challenges built in.

• Math: requires the user to solve a simple math problem.
• Image: presents an obscured image of a word that can't be read by a machine.

Each form you have on the site will be listed and you can customize the challenge type on each form individually from a drop down box in the Challenge Type column.

Step 4. Decide if all forms are going to use CAPTCHA

A CAPTCHA can be added to virtually each Drupal form, in both the user side and the administrative side .Some default forms are already provided in the form list, but arbitrary forms can be easily added and managed when the option "Add CAPTCHA administration links to forms" is enabled.
You can completely control whom is required to fill out capture by editing the permissions in the usual manner. Users with the "skip CAPTCHA" permission won't be offered a challenge. Be sure to grant this permission to the trusted users (e.g. site administrators). If you want to test a protected form, be sure to do it as a user without the "skip CAPTCHA" permission (e.g. as anonymous user).

You can skip this button. For efficiency, the positions of the CAPTCHA elements in each of the configured forms are cached. Most of the time, the structure of a form does not change and it would be a waste to recalculate the positions every time. Occasionally however, the form structure can change (e.g. during site building) and flushing the CAPTCHA placement cache can be required to fix the CAPTCHA placement. There is no need to do this in the original setup. You only need to do it if you make changes to the structure of the forms.

Step 5. Add a description to the form for the visitor.

Click the check box, and the Challenge description field will be available for you to fill in. By default this doesn't show. This description will be visible to everyone. You don't have to use it.

Step 6. Set validation and persistence

Read the choices and you can make the validation more or less difficult by requiring case sensitivity. You can make things simpler for users, by hiding the form once they've logged in and completed the first challenge.
Save the Configuration and you are ready to use CAPTCHA.

Step 7. Configure image CAPTCHA if desired

This is an optional step. This configuration will help you match the challenge image to your design. You can choose colors, type fonts, and other parameters to create the display of the challenge image.
The image is generated on the fly for each request, which is rather CPU intensive for the server. Be careful with the size and computation related settings.

Make your image CAPTCHA configuration choices and you're completely done. There are some other styles of CAPTCHA that you can try if you like them. Here's a list with a brief description.

Other CAPTCHA styles explained

There are links to these downloads on the same page as CAPTCHA http://drupal.org/project/captcha. They are essentially "extensions to the extension" and are designed to add more security to the process.
reCAPTCHA - Uses the reCAPTCHA web service to improve the CAPTCHA system and protect email addresses.
CAPTCHA Pack - The CAPTCHA Pack module contains several CAPTCHA types for use with the CAPTCHA module. The CAPTCHA Pack module is meant to provide lightweight, yet effective alternatives for the traditional image CAPTCHA, which is undesirable in certain situation (e.g. bandwidth restrictions, cpu restrictions, accessibility constraints, etc).
Text CAPTCHA - This module provides a CAPTCHA which uses logic questions instead of standard visual or auditory challenges. This can help to improve the accessibility of CAPTCHAs, although it should be stated that no solution is perfect. The module uses the web service textcaptcha.com to provide logic questions and a list of possible appropriate answers.

Egglue Semantic CAPTCHA - The Egglue CAPTCHA module uses the Egglue Semantic CAPTCHA web service for generating over 10,000 knowledge-based, accessible CAPTCHA challenges on a Drupal site. The CAPTCHA module is required.

Captcha Riddler - Captcha Riddler is a sub module of Captcha that lets site administrators create their own questions to foil automated spam bots.

Hidden CAPTCHA - Hidden CAPTCHA is an extension to the CAPTCHA module. It offers a hidden CAPTCHA (duh!) The idea is very simple: If you offer an input box in any form, 99% of the time, robots will fill it with something before posting the form. If you offer an input box that has to stay empty, then the CAPTCHA system will prevent posts by robots.

CAPTCHA after - Show CAPTCHA protection on selected forms after specified number of unsuccessful form submit attempts has been made.

Setting up a contact form for Drupal

Drupal vs WordPress

As told in the previous Drupal article, Drupal is far to be “click and we are done” sort of CMS as WordPress. In WordPress, even for your first time installation, setting up a captcha’d contact module will take 15 minutes. In Drupal, if this is your first time, this will easily take a couple of hours. I thought hence it’s important to document the steps.

Module activation

To begin with, given that Drupal has three kinds of modules, the good news is that “Contact” is part of Drupal’s core module. Let’s go to Administer > Site building > Modules (admin/build/modules) and click beside “Contact” to check it from the list of available core modules. We will next submit the page using the Save Configuration button below.

Contact settings

For the next part, we will browse to Administer > Site building > Contact form(admin/build/contact) and will click on add category. We will add a demo category here, let’s say “Website feedback“. In the next field, Recipients, we will add the email address of the website administrator. We can also add an “auto reply” in the next field. Let’s add a weight, selected = yes and then move to settings after saving the configuration.

We will now see that a contact form is created in the list tab, as below. The form just created, can be found by browsing to /contact while still logged in as admin.

Getting the captcha spam protection

We will add a captcha to our newly created contact field protect against spams now. Here is the link. Once we have downloaded the latest version, we will unzip this, and will upload the “captcha” folder to our server’s /sites/all/modules directory.

Captcha settings

Let’s go to Administer > User management > CAPTCHA (admin/user/captcha) and start by setting up the Default challenge type under the Form protection block. We will then add challenge types to individual items, where we can choose among none, math and image. We can also click on Add CAPTCHA administration links to forms and set up other details below as per our taste. Save configuration.

Image Captcha settings

We can next click on the image captcha link above to tweak with the image captcha settings. We can set up the default characters to use in the code, code length, select the fonts, font-size, character spacing, etc. Also you can play around with the distortion and noise level. Be careful (hit and try is the best option) not to add too much distortion / noise to make the captcha illegible.

I have got the above image captcha look by using Code length: 5, Fonts: #2 and #3, Font size: 30pt, Character spacing: normal, Background color: white, Text color: black, Additional variation of text color: moderate, Distortion level: 5, Smooth distortion: 0, Add salt and pepper noise: 1, Add line noise: 1 and Noise level: 1.

Introducing reCaptcha

reCaptcha is an interesting alternative to the traditional math and image captcha, and as you can see, it is visually more appealing and gives more option to the end user. To use this, we will have to download this from here. Like before, we will unzip and upload this to the /sites/all/modules directory.

reCaptcha settings

The admin/user/captcha page will now hold a link to reCaptcha, and on clicking the link, we will see that we will need private and public keys to use reCaptcha in our site. Getting the keys are instant however, like getting the Google API key (reCaptcha is a Google project). Once we have added the keys, we can tweak with the theme settings and after saving the configuration, we can go to the Captcha tab above, and do changes if we feel.

Alternative Captchas

We also have to choice to choose some alternative captchas proposed by other developers, like text CAPTCHA or the Egglue CAPTCHA.

Setting the permission right

Even if the contact form is by now installed in www.example.com/contact address, you will see an access denied page if you browse there. To see a proper contact page there, let’s set the permission right. Rendez-vous for this at Administer > User management > Permissions (admin/user/permissions). Let’s find the contact module> access site-wide contact form and check the anonymous user. The page www.example.com/contact on refresh will now show the contact page.

Integrating into menu / navigation

Okay, let’s now go to Administer > Site building > Menus (admin/build/menu) for the final step. Once there, under the List menu tab, we will click on Primary links, and then Add item. In the form, Path: contact (assuming that in Administer > Site configuration > Clean URLs, the Clean URLs: are Enabled), Menu link title: anything you find suitable, say Contact us. Also, Enabled: 1, Expanded: 0, Parent item:<Primary links>, Weight: 0 (you will have to play around with this value later).

And that’s it. The contact form is up and ready. Go and check the front end of your website. Cheers.