How to Style Custom Recaptcha Widget Using Ambethia Ruby Gem?

Question

I'm not sure how to go about styling a custom theme Recaptcha widget using

http://github.com/ambethia/recaptcha

I want to resize the widget to fit in a form in a sidebar.

If I do

<%= recaptcha_tags :display => {:theme => 'custom', :custom_theme_widget => 'recaptcha_widget'} %>

and add

<div id="recaptcha_widget">
    <div id="recaptcha_image"></div>
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
</div>

as per

http://stackoverflow.com/questions/1715575/recaptcha-form-customization

I only get the response input field, and an error message in the source attribute of the img tag

src="http://optim.coral.cs.cmu.edu/error/TypeError_Result_of_expression___recaptcha_response_field__null_is_not_an_object_"

Has anyone found a good way to custom theme the Recaptcha widget using the Ambethia gem?

Answer 1

I did it like this without the helpers..it works if i passed the public key in script tag, but not in environment.rb:

    #recaptcha_container
      %label{ :for => "recaptcha_response_field" }
        Enter the two words below:
      %input#recaptcha_response_field.text{ :name => "recaptcha_response_field", :type => "text" }
      #recaptcha_image
      %p
        Choose captcha format:
        %a{ :href => "javascript:Recaptcha.switch_type('image');" }
          Image
        or
        %a{ :href => "javascript:Recaptcha.switch_type('audio');" }
          Audio
      %input#recaptcha_reload_btn{ :type => "button", :value => "Get new words", :onclick => "Recaptcha.reload();" }
    %script{ :src => "http://api.recaptcha.net/challenge?k=INSERT_KEY_HERE", :type => "text/javascript" }
    %noscript
      %iframe{ :src => "http://api.recaptcha.net/noscript?k=INSERT_KEY_HERE" }
        height="300" width="500" frameborder="0">
      %textarea{ :name => "recaptcha_challenge_field", :rows => "3", :cols => "40" }

Answer 2

I had the same problem. But if you place html code of recaptcha_widget before recaptcha_tags, everything is ok.