UW Oshkosh How-To's: How to add a simple "captcha" to your /contact-info form

Overview

You can make a simple customization to your site's contact-info form.

The one on this Plone Projects site at http://www.uwosh.edu/ploneprojects/contact-info was suddenly inundated with spam submissions.

I customized the form to add a simple math question with a required answer, and I customized the form validation script to check that the correct answer was provided.

The following instructions apply specifically to Plone 3.1.4.

Customize the Contact Form

Go to portal_skins and use the Find tab to locate the form with ID "contact-info".  Customize it. 

Near the end of the form, above the form controls div:

<div class="formControls">

add this HTML:

<div class="field"
          tal:define="error errors/quiz|nothing"
          tal:attributes="class python:test(error, 'field error', 'field')">
          <label for="quiz" i18n:translate="label_quiz">
            Quiz Question
          </label>
          <span class="fieldRequired" title="Required"
                  i18n:attributes="title title_required;"
                  i18n:translate="label_required">(Required)</span>

          <div class="formHelp" i18n:translate="help_quiz">
            Please prove you are human.  What is 3+2?
          </div>

          <div tal:content="error">Validation error output</div>            

          <input type="text" 
                 id="quiz" 
                 name="quiz" 
                 size="1" 
                 value="" 
                 tal:attributes="value request/quiz|nothing"
                 />
        </div>

and press Save Changes.

This adds a string field of length 1, with the ID "quiz". The help text asks the user to answer the question 3+2.

Customize the Validation Script

Next go to portal_skins and use the Find tab to search for the script with ID "validate_site_feedback", and customize it.

Add "quiz" to the parameter list, so it should read:

subject,message,sender_from_address,quiz

Near the end of the script, above the line:

if state.getErrors():

add the following code:

if not (quiz and quiz.strip()):
    state.setError('quiz', _(u'Please answer the question'), 'quiz_required')
else:
    if (quiz.strip().find('5') != 0):
        state.setError('quiz', _(u'Please answer the question correctly - enter a single digit'), 'quiz_required')

and press Save Changes.

How to Change the Quiz Question

To change the quiz question, you'll need to:

• change the help text, where it says

  What is 3+2?

• if the length of the answer is not a single character, change the length where it says

  size="1"

• change the validation script where it looks for the correct answer,

  quiz.strip().find('5')

  and replace

  5

  with the correct answer
• change the validation script error message if the length of the answer is not a single character, where it says 

  enter a single digit