Адаптивная reCAPTCHA

Стандартная ширина капчи от Google reCAPTCHA имеет ширину 302 пикселя.

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

Лечится это очень простым JS кодом с библиотекой jQuery

$(function() { 
	var reCaptchaWidth = 302;
	var containerWidth = $('.container').width(); 
	if(reCaptchaWidth > containerWidth) {
		var reCaptchaScale = containerWidth / reCaptchaWidth;
		$('.g-recaptcha').css({
			'transform':'scale('+reCaptchaScale+')',
			'transform-origin':'left top'
		});
	}				
});

$(function() {

var reCaptchaWidth = 302;

var containerWidth = $('.container').width();

if(reCaptchaWidth > containerWidth) {

var reCaptchaScale = containerWidth / reCaptchaWidth;

$('.g-recaptcha').css({

'transform':'scale('+reCaptchaScale+')',

'transform-origin':'left top'

});

}

});

Остается только поместить саму капчу в блок с классом container

Работает все очень просто: определяется ширина блока, в котором расположена капча, и если она ее меньше, то происходит масштабирование.

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 19.03.2017
Рубрики: Формы
Метки: jQuery
20550 просмотров

Небольшой скрипт Autosize.js для автоматической настройки высоты текстовой области textarea.

Запоминание данных формы

Запоминание введенных данных в элементах формы

Сдвигающийся плейсхолдер

Замена атрибута placeholder тегом label и последующая манипуляция им

Добавить комментарий:

Ваш комментарий отправлен!

var captchasAr = document.querySelectorAll(".g-recaptcha");
        captchasAr.forEach(function (captcha) {
            var reCaptchaWidth = 304;
            var containerWidth = captcha.parentNode.offsetWidth;
            if (reCaptchaWidth > containerWidth) {
                captcha.parentNode.style.transform = 'scale(' + (containerWidth / reCaptchaWidth) + ')';
                captcha.parentNode.style.transformOrigin = 'left top';
                captcha.parentNode.style.width = (reCaptchaWidth / containerWidth) * 100 + '%';
            }
        });

Ответить

Дмитирй: 18.08.2017 в 23:05

Написал разработчикам чтобы сделали ее responsive ё-маё. 21 век за окном.

Ответить
- Alexander: 19.08.2017 в 08:29
  
  Невидимая сейчас вроде новая самая, только я ее не ставил ни разу, и такая пойдет 🙂
  
  Ответить
Дмитирй: 18.08.2017 в 23:00

Нарыл вот еще что. Капча бывает 2 размеров стандартный и компактной.
Чтобы сделать капчу компактной
Контактные формы - Редактировать контактную форму - [recaptcha size:compact]
Ну а еще ей можно задать класс или размер
Подробности здесь
https://contactform7.com/recaptcha/

Ответить
Дмитирй: 10.08.2017 в 11:01

Отлично. Спасибо Вам большое. Вот небольшое дополнение,....

function changeCapthaSize() {
var reCaptchaWidth = 302;
var containerWidth = $('.класс дива в котором капча').width();
if(reCaptchaWidth > containerWidth) {
var reCaptchaScale = containerWidth / reCaptchaWidth;
$('.g-recaptcha').css({
'transform':'scale(' reCaptchaScale ')',
'transform-origin':'left top'
});
}
};

$(window).ready(function(){
changeCapthaSize();
});
$(window).resize(function(){
changeCapthaSize();
});

Ответить
- Alexander: 10.08.2017 в 17:26
  
  Спасибо, хорошее дополнение!
  
  Ответить
Сергей: 11.07.2017 в 21:39

Здравствуйте! А куда эту часть кода вставлять?

Ответить
- Alexander: 13.07.2017 в 22:58
  
  Можно в шапку сайта, можно в файл с другой жавой
  
  Ответить
  - Сергей: 15.07.2017 в 17:29
    
    Вставил этот код в файл стилей жавы но результата нет. Разрешение экрана 480*800. Адрес страницы сайта https://computerseo.ru/contact.php
    
    Ответить
    - Alexander: 17.07.2017 в 09:37
      
      Сергей, у вас капча более старая.
      Попробуйте как нибудь так
      (код вынес в отдельный файл, т.к. в комменте он портится
      Еще не забудьте, что зум происходит после загрузки страницы. Т.е. если вы открыли капчу на большом экране, а потом сузили, размер не поменяется. Нужно обновить страницу.
      
      Ответить
Андрей: 07.04.2017 в 14:54

Дай Бог Вам здоровья )

Ответить

Смотрите также:

Добавить комментарий:

Комментарии: