Adding CAPTCHA to Forms

Recite CMS allows you to easily add a CAPTCHA field to your forms if you want to. You can add CAPTCHA both as an image or as a sound clip (this allows vision-impaired users to still submit your forms).

What is CAPTCHA?

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. It is used to ensure that it is a person filling out a form, as opposed to another computer automatically submitting a form. It is a basic security method to help prevent abuse of your web site.

Many of the sample form templates include code to output the CAPTCHA image and a form input for typing to code. To help with outputting CAPTCHA, Recite CMS provides the {captcha} template tag. This tag returns the URL where the CAPTCHA image is located. You must then provide a form input with the name captcha.

Tip

The CAPTCHA URL should then be used in a HTML <img /> tag.

Alternatively, you can retrieve the link to an audio version of the CAPTCHA by including audio=true to the {captcha} tag. The sound file is a wav file which pronounces a series of words (in English), each one beginning with the corresponding letter in the CAPTCHA.

Note

If you include the audio CAPTCHA on your site, include basic instructions on the form so vision-impaired users know how to use the sound file.

You can check if the form requires a CAPTCHA value by checking the $form.captcha value. The following example shows how to check for this value and output the CAPTCHA if required.

Example 6.1. Using a CAPTCHA in your form template

{if $form.captcha}
    <div>
        <img src="{captcha}" alt="" />
        (<a href="{captcha audio=true}">listen</a>)
    </div>
    
    <div>
        Enter code:
        <input type="text" name="captcha" value="{$form.values.captcha|escape}" />
    </div>
{/if}

In this example, we first check that CAPTCHA is enabled for the form. If it is, we output the CAPTCHA image and a link to the audio CAPTCHA.

We then include a form input so the user can enter the CAPTCHA. Additionally, we pre-populate the form input with a previously-entered value. This is done in case they entered the CAPTCHA correctly but there was an error elsewhere in the form, resulting in the same form being shown again.