How to Make Recaptcha Smaller
reCAPTCHA is a free CAPTCHA service offered by Google. CAPTCHA stands for "Completely Automated Public Turing test to tell Computers and Humans Apart." It is a series of letters and numbers meant to be manually entered on forms to ensure they are submitted by actual people and not spam-sending computers. Google reCAPTCHA is ready to use with several plugins available for you to apply it to your site's forms. Its customizable themes also allow you the freedom to personalize the CAPTCHA to suit your site's design and change its color and size.
Other People Are Reading
Instructions
-
-
1
Open the Web form where you want to place reCAPTCHA, in a text editing program such as Notepad.
-
2
Add the following JavaScript Code within in the <head> section of your HTML. This tells reCAPTCHA to use a custom theme :
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script> -
-
3
Paste the following code inside the <form> tags where you want reCAPTCHA to appear:
<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=enter_your_public_key_here">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=enter_your_public_key_here"
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> -
4
Replace "enter_your_public_key_here" with your own reCAPTCHA public key. If you do not have a reCAPTCHA key, create one at google.com/recaptcha.
-
5
Change the section "height=300 width=500" with the height and width you want your reCAPTCHA to be. You can also resize the text field by changing the values of "rows" and "cols" in the section <textarea name="recaptcha_challenge_field" rows="3" cols="40">.
-
6
Save your HTML file. Open and test it in a Web browser.
-
1
Tips & Warnings
reCAPTCHA can only be resized to the width of the CAPTCHA image supplied by Google. The minimum width is 300px.
References
- Photo Credit Comstock/Comstock/Getty Images
