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

StackOverflow https://stackoverflow.com/questions/1715575

  •  19-09-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

<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 входные данные также могут быть оформлены так, как вам нравится.

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

Другие советы

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

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

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

Все, что я сделал, это обновил стили 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>

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top