Implement Recaptcha to Silverstripe

Question

I'm trying to implement Recaptcha to Silverstripe, it is all working well but the compulsory message 'Please answer the captcha question' wouldn't shown on only one of my forms when the captcha info is not filled.

Can anyone give me some directions on how to fix this problem? Thanks heaps.

This is what i've done after following the steps and installed recaptcha and spamprotection.

I added new RecaptchaField('MyCaptcha') to my BookingFormPage.php

$fields = new FieldSet(
        $TourDropDown, 
        new TextField('FirstName'),
        new TextField('LastName'),
        new TextField('EmailAddress')
        new DropdownField('People','People Travelling',$People),
        new DropdownField('Accommodation','Accommodation Standard',$Accommodation),
        new DropdownField('Rooms','How Many Rooms',$Rooms),
        new DropdownField('Transport','Transport Option',$Transport),
        new DropdownField('TransportSelfDrive','If self drive select grade',$TransportSelfDrive),
        new TextField('FlightArrival','Flight Arrival Details'),
        new TextField('FlightDeparture','Flight Departure Details'),
        new DropdownField('LengthOfStay','Length of stay',$LengthOfStay),
        new TextareaField('Comments'),
        **new RecaptchaField('MyCaptcha')**

    );

and I added 

<div class="formHoizontal">
<div id="MyCaptcha" class="field recaptcha ">
$dataFieldByName(MyCaptcha) 
</div>
</div>

to the BookingForm.ss

<form $FormAttributes class="threecolumnform">
<% if Message %>
  <p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% else %>
  <p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
<% end_if %>
<fieldset>
<div class="formHoizontal">
        <div class="field text">
            <label class="left" for="$FormName_Tour">Tour</label>
            $dataFieldByName(Tour)
        </div>
    </div>
    <div class="clear"></div>
    <div class="formHoizontal">
        <div id="FirstName" class="field text">
            <label class="left" for="$FormName_FirstName">First name</label>
            $dataFieldByName(FirstName)
        </div>
        <div>
            <label class="left" for="$FormName_LastName">Last name</label>
            $dataFieldByName(LastName)
        </div>
    </div>
    <div class="clear"></div>
    <div class="formHoizontal">
        <div id="EmailAddress" class="field email">
            <label class="left" for="$FormName_EmailAddress">Email</label>
            $dataFieldByName(EmailAddress)
        </div>

    </div>
    <div class="clear"></div>
    <div class="formHoizontal">

        <div class="field text">
            <label class="left" for="$FormName_LengthOfStay">Length of stay</label>
            $dataFieldByName(LengthOfStay)
        </div>
    </div>
    <div class="clear"></div>


    <div class="formHoizontal">
        <div class="field text">
            <label class="left" for="$FormName_People">Number of Adults</label>
            $dataFieldByName(People)
        </div>


    </div>


    <div class="clear"></div>
    <br />
    <h4>Accommodation</h4>
    <div class="formHoizontal">
        <div class="field text">
            <label class="left" for="$FormName_Accomadation">Type</label>
            $dataFieldByName(Accommodation)
        </div>
        <div class="field text">
            <label class="left" for="$FormName_Rooms">Number of rooms</label>
            $dataFieldByName(Rooms)
        </div>
        <div class="field text">
            <label class="left" for="$FormName_RoomConfig">Room requirements</label>
            $dataFieldByName(RoomConfig)
        </div>
    </div>


    <div class="clear"></div>
    <br />
    <h4>Transport</h4>
    <div class="formHoizontal">
        <div class="field text">
            <label class="left" for="$FormName_Transport">Type</label>
            $dataFieldByName(Transport)
        </div>

        <div>
            <label class="left" for="$FormName_TransportSelfDrive">If self drive select grade</label>
            $dataFieldByName(TransportSelfDrive)
        </div>
        <div class="clear"></div>
    </div>


    <div class="clear"></div>
        <div>
            <div class="field text">
                <label class="left" for="$FormName_SightSeeing">Enter any sightseeing or activities you would like included</label>
                $dataFieldByName(SightSeeing)
            </div>
        <div><h4>Sightseeing</h4></div>
        </div>
    <br />

    <div class="formHoizontal">
        <div class="field text">
            <label class="left" for="$FormName_FlightArrival">Flight Arrival Details</label>
            $dataFieldByName(FlightArrival)
        </div>
        <div class="field text">
            <label class="left" for="$FormName_FlightDeparture">Flight Departure Details</label>
            $dataFieldByName(FlightDeparture)
        </div>
    </div>

    <div class="clear"></div>
    <br /><br /><br />


        **<div class="formHoizontal">
        <div id="MyCaptcha" class="field recaptcha ">
            $dataFieldByName(MyCaptcha)

    </div>
    </div>**


    <div class="clear"></div>
    <br /><br /><br />



    <div class="formHoizontalTwoColumn">

        <div class="field text">
            <label class="left" for="$FormName_Comments">Extra Information</label>
            $dataFieldByName(Comments)
        </div>
    </div>


  $dataFieldByName(SecurityID)

Thanks a lot.

Kind regards Sam

Answer 1

the compulsory message 'Please answer the captcha question' wouldn't shown on only one of my forms when the captcha info is not filled

Do you mean it didn't show at all or it showed multiple times?

My template looks like this (including the CSS grid etc.) - which should show error messages:

<div class="push_2 grid_15 formbackground">
    <div class="grid_4">
        <label for="recaptcha_response_field" class="right">Captcha*<br/><span>Bitte die Zeichen der Grafik in das Feld eingeben</span></label>
    </div>
    <div class="grid_9">
        $dataFieldByName(MyCaptcha)
        <span class="message $dataFieldByName(MyCaptcha).MessageType">$dataFieldByName(MyCaptcha).Message</span>
    </div>
</div>

Does that help?