<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.

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="." />

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 

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>

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

is working on a reply...