Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Recaptcha - Form Customization

Does anyone know if recaptcha can be fully customize without the default frame. I need the recaptcha image to only be a certain width as well as the input field. Has anyone done this before with success.

like image 873
kbrin80 Avatar asked Nov 11 '09 14:11

kbrin80


People also ask

Can I customize reCAPTCHA?

Custom theming allows you to control exactly how the reCAPTCHA image appears. (Here is a demo of custom theming.) In order to use custom theming, you must first set the theme property of the RecaptchaOptions to 'custom'. This tells reCAPTCHA that it should not create a user interface of its own.

How do I add a reCAPTCHA to a form?

Add Google reCAPTCHA to a formClick the pencil icon or Edit on the form or newsletter block. In the Storage tab, click Google reCAPTCHA. Switch the Use Google reCAPTCHA toggle on. Repeat these steps for all form blocks on your site where you want to add a reCAPTCHA.

How do I change my reCAPTCHA settings?

Settings Navigate to the settings category. Security & Membership -> Protection Under , select a . CAPTCHA settings Control to use Save the settings. When you change the CAPTCHA type, all web parts and features that have CAPTCHA enabled use the new type.

How do I add a custom Google reCAPTCHA?

- Save file changes; - Go to the "Settings" tab on the plugin settings page (Admin Dashboard -> reCaptcha); If everything is OK, you will see your form in 'Enable reCAPTCHA for' => 'Custom Forms' (with labels which you specified in the "gglcptch_add_custom_form" hook call function).


1 Answers

You can specify custom markup using the 'custom' theme option by including something like this on your page:

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

You then create a div on the page to match the custom_theme_widget id like this:

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

The image will be inserted into the recaptcha_image div, so you could limit its width using CSS like this:

#recaptcha_image img {
    width: 200px;
}

...but keep in mind that it will resize the larger image in the browser and may cause the captcha to become unreadable, so I wouldn't necessarily recommend that. The recaptcha_response_field input could also be styled however you like.

See the "Look and Feel Customization" section here for more examples of what you can (and should) do in a custom theme.

like image 144
Rudism Avatar answered Sep 28 '22 22:09

Rudism