view.gsp

<!-- PLACE IN HEADER -->
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.simpleCaptcha-0.2.js')}"></script>
<style type="text/css">
    img.simpleCaptcha {
        margin: 2px !important;
        cursor: pointer;
    }
    img.simpleCaptchaSelected {
        margin-bottom: 0px;
        border-bottom: 2px solid red;
    }
</style>

<!-- BODY CONTENTS -->
<g:form action="pickup">

    <div class="stylized myform" style="width:542px;">
        <h2>Your pickup code will be given to you by your loan consultant</h2>

        <g:if test="${flash.message}">
            <div class="error">
                ${flash.message}
            </div>
        </g:if>

        <div class="clearfix formField">
            <label class="label_only">Pickup Code</label>
            <g:textField name="pickupCode" value="${pickupCode}" autocomplete="no" class="text" />
        </div>
        <div class="clearfix formField">
            <label class="label_only">Last 4 Digits of Phone</label>
            <span class="after_checkbox" style="padding-right: 0px;">(XXX) XXX-</span>
            <g:textField name="lastFourDigits" value="${lastFourDigits}" autocomplete="no" class="text" maxLength="4" />
        </div>
        <div class="clearfix formField">
            <label class="label_only">Are You Human?</label>
            <div style="float: left; margin-left: 10px;">
              <!-- Begin Captcha -->
                <div id="captcha"></div>
              <!-- End Captcha -->
            </div>
        </div>
        <div class="clearfix" style="margin-top: 15px;">
            <label class="label_only">&nbsp;</label>
            <g:submitButton name="submit" value="Show Me My Offer" class="button" />
        </div>

    </div>

</g:form>

<script type="text/javascript">
    $(document).ready(function() {
        $('#captcha').simpleCaptcha({
            numImages: 5,
            introText: '<p>Are you human? Then pick out the <strong class="captchaText"></strong></p>'
        });
    });
</script>