FormLister и Google reCaptcha MODX Evo ✈ Evolution CMS

3148

FormLister и Google reCaptcha MODX Evo ✈ Evolution CMS

Код вызова FormLister

[!FormLister?
&formid=`myform`
&rules=`{
	"name":{"required":"Введите имя"},
	"comment":{"required":"Напишите сообщение"}
}`
&formTpl=`form_tpl`
&to=`получятель`
&from=`отправитель`
&errorClass=` error`
&requiredClass=`error`
&messagesOuterTpl=`@CODE: <div class="alert alert-danger">[+messages+]</div>`
&errorTpl=`@CODE: <span class="help-block">[+message+]</span>`
&subject=`Новое сообщение с сайта`
&reportTpl=`@CODE: <p>Имя: [+name.value+]</p><p>Сообщение: [+comment.value+]</p>`
&successTpl=`@CODE: Спасибо!`
&captcha=`reCaptcha`
&captchaParams=`{
	'siteKey': 'ключ сайта',
	'secretKey': 'секретный ключ',
	'errorCodeFailed': 'Нажмите галочку "Я не робот"',
	'width': 'normal'
}`
&captchaField=`g-recaptcha-response`
!]

Разберём происходящее:

  • &formid – уникальный id FormLister. Произвольный текст, латиница.
  • &rules – правила валидации полей. Подробности в документации.
  • &formTpl – шаблон самой формы.
  • &to – куда прислать письмо
  • &from – от кого прислать письмо. Можно оставить пустым, но я всегда делаю тут ящик типа robot@имядомена.ru. Так меньше вероятности, что письмо окажется заблокированным.
  • &errorClass – css класс для ошибки в поле
  • &requiredClass – css класс для пустых полей
  • &messagesOuterTp – темизуем сообщения об ошибках
  • &errorTpl – то же.
  • &subject – тема письма
  • &reportTpl – шаблон письма на почту. Можно подставлять плейсхолдеры тех полей, которые нужны.
  • &successTpl – шаблон сообщения, которое выведет форма после отправки.
  • &captcha – подключаем капчу
  • &captchaField – обязательное поле, ничего менять не надо.
  • &captchaParams – тут задаём параметры капчи

Разберём подробнее &captchaParams

Получаем ключи в Гугле

  1. Перейти сюда.
  2. Ввести название сайта и домен.
  3. Скопировать «Ключ» и «Секретный ключ», выданные Гуглом.
  4. Вернуться на сайт и отредактировать &captchaParams
  5. По желанию можно добавить параметры типа errorCodeFailed, width и т.д.

Список параметров находится в документации. Из интересных я бы отметил callback и expired_callback. Это 2 параметра, в которых можно задать js-функции на события угадывания капчи.

Пример кода в FormLister:

&captchaParams=`{
	'siteKey': '.....',
	'secretKey': '....',
	'errorCodeFailed': 'Нажмите галочку "Я не робот"',
	'callback': 'recaptcha_valid',
	'expired_callback': 'recaptcha_exp'
}`

А вот такой в коде сайта:

<script>
	function recaptcha_valid(){
		alert("Капча угадана");
	}
	function recaptcha_exp(){
		alert("Истекло врем ожидания");
	}	
</script>

Как видите, заданные значения параметров и имена функций одинаковы.

Никто не мешает вместо алертов скрывать кнопку отправки либо иным способом стилизовать форму, давая понять пользователю, что пока он не нажмёт тырчик, отправки сообщений не будет.

Также обратите внимание на параметр errorCodeFailed. Это текстовое сообщение об ошибке валидации капчи.

Шаблоны

Сам код формы довольно стандартен, но есть маленький ньюанс, который стоил мне час потерянного времени. А именно – как вывести сообщение о неверно пройденной капче? Почему-то в документации этот вопрос не фигурировал.

Вот более-менее стандартная форма на Bootstrap.

<form class="form" method="post">
	<input type="hidden" name="formid" value="myform">
	<div class="form-group [+name.errorClass+] [+name.requiredClass+]">
		<label for="" class="control-label">Name</label> 
		<div class="input-group">
			<span class="input-group-addon">@</span> 
			<input type="text" name="name" value="[+name.value+]" class="form-control" placeholder="Представьтесь">
		</div>
		[+name.error+]
	</div>
	<div class="form-group [+comment.errorClass+] [+comment.requiredClass+]">
		<label for="" class="control-label">text</label>
		<textarea name="comment" class="form-control" placeholder="Текст отзыва">[+comment.value+]</textarea>
		[+comment.error+]
	</div>

	<div class="form-group col-md-6 [+g-recaptcha-response.errorClass+] [+g-recaptcha-response.requiredClass+]" >
		[+captcha+]
		[+g-recaptcha-response.error+]
	</div>
	<div class="form-group col-sm-6">
		<button type="submit" class="btn btn btn-success">отправить</button>
	</div>

	[+form.messages+]
</form>

Обратите внимание на несколько вещей.

  • Вверху input name="formid" value="myform". Вот этот myform – это тот самый уникальный &formid из вызова FormLister'а.
  • [+g-recaptcha-response.error+] – это плейсхолдер, где будет выведено сообщение о некорректно заполненной капче
  • [+captcha+] – это место, где будет сама капча
  • [+g-recaptcha-response.errorClass+] и [+g-recaptcha-response.requiredClass+] – это плейсхолдеры, где будет написаны &errorClass или &requiredClass – смотря какую ошибку поймали

Не забываем подключить Google API

	<script src="https://www.google.com/recaptcha/api.js"></script>

Размер reCAPTCHA

Если у вас маленькая и аккуратненькая форма, то вы с удивлением узнаете, что даже при size=compact минимальный размер капчи – 304 пикселя. Поправить можно довольно простым CSS:

/*Подбирая значение scale, спокойно вписываем капчу в дизайн.*/
.g-recaptcha {
    transform: scale(0.80);
    transform-origin: 0 0;
}