Recaptcha-表格定制 [英] Recaptcha - Form Customization

问题描述

没有人知道Recaptcha是否可以在没有默认框架的情况下完全自定义.我需要Recaptcha图像以及输入字段只有一定的宽度.以前有人成功做到过吗?

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.

推荐答案

您可以使用自定义"主题选项来指定自定义标记，方法是在页面上包含以下内容:

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>

然后您在页面上创建一个div以匹配custom_theme_widget id，如下所示:

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>

图像将插入到recaptcha_image div中，因此您可以使用CSS来限制其宽度，如下所示:

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;
}

...但是请记住，它将在浏览器中调整较大图像的大小，并可能导致验证码变得不可读，因此我不一定推荐这样做. recaptcha_response_field输入也可以根据需要设置样式.

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

这篇关于Recaptcha-表格定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！