Плагин Contact Form 7 для Wordpress настройка внешнего вида и защита от спама

Популярный и что главное бесплатный плагин 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/).

После установки этого плагина в Шаблоне формы появляется новый генератор тега: Маска ввода. Этот тег мы используем вместо встроенного тега Телефон.

Комментарии