Просто, быстро и по пунктам — всё для того, чтобы добавить статью в закладки, через год открыть, скопировать-вставить кусок кода и наслаждаться жизнью вместо сбора информации по всему рунету, как это делал я.
(Это вторая статья про очевидные вещи, от которых у присутствующих гуру начинается пригорание. И вновь сообщаю — мне нравится разжёвывать новичкам очевидные вещи. )
Делать будем на примере формы отправки сообщений.
Код вызова 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 — тут задаём параметры капчи
Получаем ключи в Гугле
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 — смотря какую ошибку поймали
А как же апи?
И, конечно же, надо сказать Гуглу, что мы используем его апи.Разместите вызов на сайте
<script src="https://www.google.com/recaptcha/api.js"></script>Всё работает.
Размер reCAPTCHA
Если у вас маленькая и аккуратненькая форма, то вы с удивлением узнаете, что даже при size=compact минимальный размер капчи — 304 пикселя. Поправить можно довольно простым CSS:.g-recaptcha {
transform: scale(0.80);
transform-origin: 0 0;
}Подбирая значение scale, спокойно вписываем капчу в дизайн.
А как сделать всё без перезагрузки?
Про аякс и FormLister я уже писал. Просто чуть-чуть js и плагин на 404 событие. Способ спорный, но вполне рабочий.P.S.: Enjoy! =)
Комментарии (0)