Recaptcha - 表单定制

Question

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

Answer 1

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

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

然后,您在页面上创建一个div来匹配custom_theme_widgetid,如下所示:

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

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

#recaptcha_image img {
    width: 200px;
}

...但请记住,它会调整浏览器中较大图像的大小,并可能导致验证码变得不可读,所以我不一定会建议这样做.在recaptcha_response_field你喜欢的输入也可以称呼.

有关您可以(以及应该)在自定义主题中执行的操作的更多示例,请参阅此处的"外观和感觉自定义"部分.