Recaptcha - Настройка формы

Question

Кто-нибудь знает, можно ли полностью настроить recaptcha без рамки по умолчанию. Мне нужно, чтобы изображение recaptcha было только определенной ширины, а также поле ввода. Кто-нибудь делал это раньше с успехом.

Answer 1

Вы можете указать пользовательскую разметку, используя опцию 'custom' theme, добавив что-то вроде этого на свою страницу:

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

Затем вы создаете div на странице, чтобы соответствовать идентификатору custom_theme_widget, например:

<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 следующим образом:

#recaptcha_image img {
    width: 200px;
}

... но имейте в виду, что это изменит размер изображения в браузере и может привести к тому, что капча станет нечитаемой, поэтому я не рекомендую это делать. Ввод recaptcha_response_field также может быть стилизован так, как вам нравится.

См. Раздел «Настройка внешнего вида» здесь , чтобы получить дополнительные примеры того, что вы можете (и должны) делать в пользовательской теме.

Answer 2

Вы можете создать собственную тему , которая должна помочь вам с полем ввода, но я думаю, вам не повезло с размером изображения - он установлен на 300 x 57 (вы можете, конечно, изменить размеры, но это приведет к еще более искаженному и, возможно, совершенно нечитаемому изображению)

Answer 3

http://risingofsilversurfer.blogspot.com/2009/10/customize-recaptcha-theme.html

это работает для Firefox, хотя и не уверен в других браузерах, если вам нужно, чтобы он работал в ie6, я не думаю, что он принимает изменение размера изображения CSS, поэтому он будет выглядеть совершенно неуместно.

Answer 4

Все, что я сделал, это обновил стили reCAPTCHA.

Следующий CSS изменяет ширину и высоту изображения и контейнера. Размеры изначально определены Google, но могут быть перезаписаны добавлением новых стилей на вашу страницу.

<style type="text/css">
#recaptcha_image img{
    height:46px;
    width:230px;
    margin: 0px;
    padding: 0px;
}
#recaptcha_container {
    margin: 0px;
    padding: 0px;
    width: 230px;
}
</style>

Просто помните, что чем меньше изображение, тем сложнее будет его прочитать пользователям.