Дизайн reCAPTCHA от Google под Ваш сайт

Доброго времени суток!

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

Стандартные темы reCAPTCHA

У рекаптчи от гугла по умолчанию установлена красная тема, но как вы могли видеть на некоторых сайтах, у неё есть еще несколько встроенных тем, таких как белая(white), черная(blackglass) и прозрачная тема(clean), вот как они выглядят:

redwhiteblackglassclean
 

Как же установить одну из этих тем??? Да очень просто, нужно перед PHP функцией recaptcha_get_html создать переменную javascript, содержащею массив формата JSON:

<script type="text/javascript">
 var RecaptchaOptions = { theme : 'название темы' }; 
 </script>

Внимание: Переменную «RecaptchaOptions» необходимо указывать до функции recaptcha_get_html

Собственная тема для reCAPTCHA

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

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

Удалить функцию recaptcha_get_html и вместо неё добавить HTML-код:

<div id="recaptcha_widget" style="display:none">
    <div id="recaptcha_image"></div>
    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Не правильно пожалуйста попробывать снова</div>
    <span class="recaptcha_only_if_image">Введите слова с картинки:</span>
    <span class="recaptcha_only_if_audio"> Введите цифры, которые вы слышите:</span>
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
    <div>
        <a href="javascript:Recaptcha.reload()">Обновить CAPTCHA</a>
    </div>
    <div class="recaptcha_only_if_image">
        <a href="javascript:Recaptcha.switch_type('audio')">Режим аудио CAPTCHA</a>
    </div>
    <div class="recaptcha_only_if_audio">
        <a href="javascript:Recaptcha.switch_type('image')">Визуальный режим CAPTCHA</a>
    </div>
    <div>
        <a href="javascript:Recaptcha.showhelp()">Помощь</a>
    </div>
</div>
<script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ">
</script>
<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ" height="300" width="500" frameborder="0"></iframe><br />
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
</noscript>

И при помощи каскадной таблицы стилей(css-правил) создать свой дизайн для reCAPTCHA.

Внимание: Функцию «recaptcha_get_html» или HTML-код обязательно нужно размещать внутри тега FORM.

Опции RecaptchaOptions:
Ключ Возможные значения Значение по умолчанию Описание
theme ‘red’ | ‘white’ | ‘blackglass’ | ‘clean’ | ‘custom’ ‘red’ Устанавливает тему для reCAPTCHA. Темы ‘red’, ‘white’, ‘blackglass’ и ‘clean’ являются предопределенными, где reCAPTCHA предоставляет пользовательский интерфейс. В теме ‘custom’ Вы сами определяете внешний вид с помощью CSS правил.
lang Любой поддерживаемый код языка. ‘en’ Устанавливает, какой язык используется в интерфейсе для предопределенных тем. Поддерживаются следующие языки:

Язык Код
Английский en
Голландский nl
Французский fr
Немецкий de
Португальский pt
Русский ru
Испанский es
Турецкий tr

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

custom_translations Пользовательский перевод null Используйте это, чтобы определить пользовательский перевод в предустановленных темах reCAPTCHA.
custom_theme_widget Строка с ID элемента DOM null При использовании пользовательской темы, значение этого ключа также должно быть указанно тегу DIV, который содержит виджет, в качестве идентификатора. Смотрите раздел Собственная тема для reCAPTCHA.
tabindex Целое число 0 Атрибут tabindex определяет последовательность перехода между элементами формы при нажатии на клавиши Tab. Смотрите спецификацию HTML.
Пользовательский перевод

Если потребовался собственный перевод интерфейса предустановленных тем reCAPTCHA, Вам необходимо в переменную «RecaptchaOptions» добавить следующие значения:

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Введите слова:",
                        instructions_audio : "Расшифруйте, что вы слышите:",
                        play_again : "Воспроизведение звуковой дорожки",
                        cant_hear_this : "Скачать трек в формате MP3",
                        visual_challenge : "Визуальный режим",
                        audio_challenge : "Аудио режим",
                        refresh_btn : "Обновить текст на картинке или звуковую дорожку",
                        help_btn : "Подробные инструкции",
                        incorrect_try_again : "Неправильно. Попробуйте еще раз."
                },
                theme : ' white' 
        };
</script>


К записи 4 комментария

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

//—echo PhocaGuestbookHelperReCaptcha::recaptcha_get_html($this->tmpl[‘recaptcha_publickey’]);—//

если я все удаляю и ставлю HTML код из статьи, то выводить ошибка в том месте где должна была быть капча: Input error: k: Format of site key was invalid.

возможно я не так делаю что то, может поможете?

Удаление PHP функции не принципиально!
Просто, разместите её после HTML кода для собственного дизайна, но обязательно внутри того же тега FORM.

Подскажите пожалуйста!! Где и как изменить цвет текста вводимого в окне ввода? (желательно подробно в каком файле это всё меняется, так как я сам не нашел)
Проблема такая: сайт черный и по всей видимости у reCaptcha окошко прозрачное, а вводимые буквы — черные, и при наборе их не видно (можно увидеть только при выделении набранного).
Заранее Огромное спасибо!!

Цвет текста можно поменять при помощи CSS стилей используя id этого поля ввода.



Оставить комментарий

Чтобы оставить комментарий Вам необходимо авторизоваться.