Print this page

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

Knowledge Article Number 000182269
Description It is possible to add a CAPTCHA to a Visualforce page exposed on a Force.com 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

 
Resolution
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' 
                         };
    </script>
<apex:pageBlock title="RoBot or Not">
    <apex:form >

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




promote demote