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

Ответ 1

Вы можете указать настраиваемую разметку с помощью опции темы "custom", включив что-то подобное на вашей странице:

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

Изображение будет вставлено в div recaptcha_image, поэтому вы можете ограничить его ширину с помощью CSS следующим образом:

#recaptcha_image img {
    width: 200px;
}

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

Смотрите раздел "Look and Feel Customization" здесь для получения дополнительных примеров того, что вы можете (и должны) делать в пользовательской теме.

Ответ 2

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

Ответ 3

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

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

Ответ 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>

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