First you'll need to use a custom theme. Add the following before the form element:
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
Next add the HTML for the custom widget where you want it to show up inside the form.
<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>
</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>
This is standard code from the reCAPTCHA documentation up to this point. The trick I used to make the img and div tags smaller is to set the width in CSS with the !important flag. Add this CSS to your page.
#recaptcha_image,
#recaptcha_image img
{
width: 200px !important;
cursor: pointer;
}
#recaptcha_image img:hover
{
position: absolute;
width: 300px !important;
}
.recaptcha_only_if_image,
.recaptcha_only_if_audio
{
display: block;
}
This will make the reCAPTCHA fit in a space a little over 200px wide. I've added an img:hover style to make the image full size when the mouse rolls over it. The :hover style doesn't work on older browsers though so the next step would be to use jQuery to make the image bigger on hover or click. I'll leave that up to you to figure out. ;)
, due to always removing it when parked because I try not advertise I have stuff in my car and I think it's technically illegal in MN to have one, I decided I'd like my iPhone mounted on the dash. Well I think I found a pretty decent spot. See the slide show below for how it was made or if you don't have flash