Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • West 4 posts 24 karma points
    Oct 01, 2010 @ 17:30
    West
    0

    Customizing the Look of reCAPTCHA

    Hi there,

    By default reCaptcha displays a Red Theme. There are 4 different styles for reCaptcha. Can somebody explain how to change the style / make own style?

    Like here: http://www.google.com/recaptcha/demo/custom

    It’s described here: http://code.google.com/apis/recaptcha/docs/customization.html

    Thanks!

  • Sebastiaan Janssen 5044 posts 15475 karma points MVP admin hq
    Oct 02, 2010 @ 16:32
    Sebastiaan Janssen
    0

    Hi West, just go to /usercontrols/CultivContactForm.ascx and add Theme="..." to the recaptcha control. Possible values are: red, white, blackglass and clean,

  • Sebastiaan Janssen 5044 posts 15475 karma points MVP admin hq
    Oct 02, 2010 @ 16:44
    Sebastiaan Janssen
    0

     

    By the way, to set a custom them, add Theme="custom" into the control and at the bottom of the ascx file add:

     <script type="text/javascript">
     var RecaptchaOptions = {
        theme : 'custom',
        custom_theme_widget: 'recaptcha_widget'
     };
    </script>
    
     <div id="recaptcha_widget" style="display:none">
    
       <div id="recaptcha_image"><!-- --></div>
       <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
    
       <span class="recaptcha_only_if_image">Enter the words above:</span>
       <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
    
       <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
    
       <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
       <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
       <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
    
       <div><a href="javascript:Recaptcha.showhelp()">Help</a>
    
     </div>
    
     <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=your_public_key"><!-- --
    
    ></script>
     <noscript>
       <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key" height="300" width="500" frameborder="0"></iframe><br />
       <textarea name="recaptcha_challenge_field" rows="3" cols="40">
       </textarea>
       <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
     </noscript>

     

    Don't forget to put in your public key in both places.

  • West 4 posts 24 karma points
    Oct 04, 2010 @ 07:22
    West
    0

    Thank you Sebastiaan! It works!

    This line in /usercontrols/CultivContactForm.ascx file needs to be modified to have a different Theme:

    <recaptcha:RecaptchaControl ID="_recaptcha" Theme="clean" runat="server" PublicKey="." PrivateKey="." />
  • West 4 posts 24 karma points
    Oct 05, 2010 @ 20:52
    West
    0

    Hi Sebastiaan,

    I am trying to get a custom theme working. It works, but I get an error (see below). It seems I need your help again. I can not figure out how to fix this myself.

    Thanks!

    Firefox:

    a("recaptcha_response_field") is null
    http://www.google.com/recaptcha/api/js/recaptcha.js
    Line 19

     

    IE:

    Webpage error details
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30729; .NET CLR 3.5.21022; .NET CLR 3.5.30729)
    Timestamp: Tue, 5 Oct 2010 18:54:27 UTC
    Message: Object required
    Line: 19
    Char: 234
    Code: 0
    URI: http://www.google.com/recaptcha/api/js/recaptcha.js 
  • Vacheslav 1 post 22 karma points
    Jan 01, 2011 @ 15:42
    Vacheslav
    1

    Hi West!

    Try to move div id="recaptcha_widget" closing tag after  </noscript>. So "recaptcha_response_field" gets wrapped in "recaptcha_widget" div.

    It works for me.


    Like this:

     <script type="text/javascript">
     
    var RecaptchaOptions = {
        theme
    : 'custom',
        custom_theme_widget
    : 'recaptcha_widget'
     
    };
    </script>

     
    <div id="recaptcha_widget" style="display:none">

       
    <div id="recaptcha_image"><!-- --></div>
       
    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

       
    <span class="recaptcha_only_if_image">Enter the words above:</span>
       
    <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

       
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

       
    <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
       
    <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
       
    <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

       
    <div><a href="javascript:Recaptcha.showhelp()">Help</a>

     
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=your_public_key"><!-- --

    ></script>
     
    <noscript>
       
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key" height="300" width="500" frameborder="0"></iframe><br />
       
    <textarea name="recaptcha_challenge_field" rows="3" cols="40">
       
    </textarea>
       
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
     
    </noscript></div>

  • Sebastiaan Janssen 5044 posts 15475 karma points MVP admin hq
    Jan 02, 2011 @ 13:35
    Sebastiaan Janssen
    0

    Excellent suggestion Vacheslav, thanks for helping out! :-)

Please Sign in or register to post replies

Write your reply to:

Draft