You are here: Home / Documentation / How To's / How to add a simple "captcha" to your /contact-info form

How to add a simple "captcha" to your /contact-info form

by nguyen — published Jun 04, 2014 11:25 AM, last modified Aug 16, 2016 10:49 AM
...without having to install a product

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 are known to work specifically with Plone 3.1.4 and 4.2.  If you try these instructions and they work with other versions of Plone and PloneFormGen please let us know.

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

 
 
 

 

Navigation