Contact Form 7
1 февраля 2021
Популярный и что главное бесплатный плагин Contact Form 7 для Wordpress – отличное решение для получения заявок от потенциальных клиентов. Установка плагина стандартна, либо из каталога плагинов в админке, либо путем загрузки архива скачанного по ссылке
https://wordpress.org/plugins/contact-form-7/
Рассмотрим наиболее востребованные настройки и дополнения для него.
Пример формы бронирования
Плагин Contact Form 7 уже содержит простую форму с полями: ФИО, email, тема, сообщение. В шаблоне форм мы можем добавить дополнительные поля с помощью генераторов тегов: телефон, выбор даты, чекбокс и т.д. Допустим, нам необходимо создать форму бронирования с выбором дат заезда и выезда. Разместим готовый код в Шаблоне формы:
<div class="booking"> <p class="newform"> Даты: </p> <div class="row2"> <div class="col-sm-6"> <label> Дата заезда </label>[date date-27] </div> <div class="col-sm-6"> <label> Дата выезда </label>[date date-79] </div> </div> <p class="newform"> Гости: </p> <div class="row2"> <div class="col-sm-9"> <span style="font-weight:600;">взрослые</span> [number number-796 min:0 max:10 "0"] </div> <div class="col-sm-9"> <span style="font-weight:600;">дети от 6ти до 16 лет</span> [number number-501 min:0 max:10 placeholder "0"] </div> <div class="col-sm-9"> <span style="font-weight:600;">дети до 6ти лет</span> [number number-393 min:0 max:10 placeholder "0"] </div> </div> <p class="newform"> Добавить оздоровительную программу: </p> <div style="text-align:center; margin-bottom:20px; font-weight:600;"> [checkbox checkbox-764 exclusive label_first "Да" "Нет"] </div> <p class="newform"> Контакты </p> <div class="row2"> <div class="col-sm-6"> <label>ФИО* </label>[text* your-name] <label>телефон* </label>[tel* phone-number] <label>e-mail* </label>[email* your-email] </div> <div class="col-sm-6"> <label> Комментарий [textarea your-message] </label> </div> </div> <div style="text-align:center;"> <label>* - поле обязательно для заполнения</label> [acceptance acceptance-306] Согласие на обработку персональных данных [/acceptance] <div> [submit "Отправить"] </div>
На странице, где требуется разместить форму, размещаем её Шорткод. Видим, что все поля формы размещены в столбик, а это нерациональное использование места на странице.
Попробуем некоторые поля формы разместить в 2 и даже в 3 колонки, для этого находим в настройках темы раздел Дополнительный код CSS или редактируем файл темы из админки: Внешний вид/Редактор тем/style.css. Размещаем следующие стили:
.booking {
max-width:700px;
margin: 0 auto;
}
.booking label {
font-size: 16px;
text-transform: lowercase;
font-weight: 600;
}
.booking p {
font-size: 16px;
}
.row2 {
display: flex;
margin-right: -15px;
margin-left: -15px;
margin-bottom: 30px;"
}
.booking .wpcf7-form-control.wpcf7-number.wpcf7-validates-as-number {
max-width: 55px;
}
.booking .wpcf7-form-control.wpcf7-date.wpcf7-validates-as-date {
max-width: 200px;
}
.booking .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
max-width: 400px;
}
.booking .wpcf7-form-control.wpcf7-textarea {
margin: 10px;
}
.booking .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
padding: 8px;
margin: 10px 0 0 0;
}
.booking .col-sm-6 {
flex: 0 0 100%;
max-width: 50%;
text-align: center;
}
.booking .col-sm-9 {
flex: 0 0 100%;
max-width: 33%;
text-align: center;
}
.newform {
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
Теперь наша форма на основе плагина Contact Form с колонками!
Recaptcha для Contact Form 7
Начиная с версии Contact Form 7 5.1 и выше в плагине предусмотрена интеграция с reCAPTCHA v3, теперь потенциальным спамерам не нужно ставить галочку «Я не робот» и выбирать велосипеды на картинках. reCAPTCHA v3 – работает, основываясь на оценках поведения пользователей вашего сайта.Для регистрации сайта нужно быть зарегистрированным пользователем сервисов google, после авторизации в google или gmail переходим по ссылке https://www.google.com/recaptcha/admin/create
Вводим название своего сайта (без www, без http:// или https://), выбираем тип reCAPTCHA v3, отправляем запрос.
На следующем шаге по очереди копируем ключ и секретный ключ
Скопированные ключи размещаем в соответствующих ячейках пункта Интеграция Contact Form 7
После сохранения изменений в интеграции, на сайте справа внизу появится значок recaptcha v3, убрать его можно средствами css.
Но вообще делать это нежелательно по условиям использования reCAPTCHA:
…В соответствии с разделом 3(d) Условий использования Google API вы соглашаетесь с тем, что, если вы используете API, вы несете ответственность за предоставление пользователям всех необходимых уведомлений, касающихся сбора данных и их отправки в Google, и за получение их согласия на эти операции…Contact Form 7 - Маска телефонного номера
Для того, чтобы телефонные номера передавались в едином формате, используется плагин Contact Form 7 - Маска телефонного номера (
https://ru.wordpress.org/plugins/cf7-phone-mask-field/).
После установки этого плагина в Шаблоне формы появляется новый генератор тега: Маска ввода. Этот тег мы используем вместо встроенного тега Телефон.
