Print this page

Distorted CAPTCHA styling when used on a site's Visualforce page

Knowledge Article Number 000182269
Description It is possible to add a CAPTCHA to a Visualforce page exposed on a site.  An example of how to do so is detailed on our Developer Wiki site.

However, following this example, the CSS of Google's CAPTCHA mechanism can become distorted, as show below:

Captcha Style Problem

This can be resolved by changing the style of the CAPTCHA code.  Insert the following script tag before the first <apex:pageBlock> tag given in the above example.
<apex:page controller="reCAPTCHA">

      <script type="text/javascript">
        var RecaptchaOptions = {                                
                     theme : 'clean' 
<apex:pageBlock title="RoBot or Not">
    <apex:form >

For more details on CAPTCHA window customization, please refer to Google's documentation.

promote demote