Добавляем на сайт WordPress форму обратной связи WPForms. Вы спросите, почему не Contact Form 7? — проще подключить реально работающую форму обратной связи, больше настроек, легче интегрировать Гугл Капчу, меньше требований к версии WP (на момент написания 4.9 против 5.3 у Contact form 7), плюс оценка пользователей на самом WordPress.
[frame src=»/wp-content/uploads/2020/10/wpf_vs_cf7.jpg» width=»100%» lightbox=»on» title=»Оценки форм обратной связи WPForms и Contact Form 7 «]
Приступим..
1. Установка плагина WPForms
Скачиваем с сайта WordPress архив плагина WPForms для установки формы обратной связи, для этого переходим по ссылке ниже и жмем Скачать.
2. Активация WPForms в админке WordPress
Жмем Плагины → Добавить → Загрузить плагин → Выбрать файл и указываем путь к локальной папке, где сохранился архив. Запускаем установку и активируем новый плагин.
[frame src=»/wp-content/uploads/2020/10/124.png» width=»100%» lightbox=»on» title=»Активация WPForms в админке WordPress»]
3. Настройка формы обратной связи
Переходим на вкладку WPForms в нижней части главного меню админки WP. В настройках ставим чекбокс GDPR улучшения. Это согласие для обработки персональных данных. Сохраняем настройки.
Нажимаем пункт меню Новая форма, чтобы создать новую контактную форму. После загрузки плагина в поле «Название формы» задаем произвольное имя. Выбираем наиболее подходящий для нашего случая шаблон «Простая контактная форма», в него уже включены стандартные поля контактной формы: Имя, Мейл, Комментарий. Если форме не присвоить имя, она так и сохранится «Простой контактной формой».
Если хотите, можно добавить новые Стандартные поля (красная рамка ниже). Плагин позволяет создавать ну очень разные формы. Сложные поля и маркетинговые инструменты (зеленые рамки) — за доп. плату, пока не рассматриваем.
На вкладке «Параметры поля» можно изменить название каждого поля, подсказку внутри поля, значение по умолчанию, сделать поле обязательным для заполнения и выполнить ряд других дополнительных настроек.
На вкладке Настройки можно изменить адрес Email и текст уведомления на вашу почту при отправке формы, а также текст подтверждения автору комментария.
Жмем Сохранить. Форма практически готова.
4. Подробнее про контактный Email
А куда будут приходить письма? — спросите вы, и почему не требуется подтверждение Email? Переменная {admin_email} в двух полях на картинке выше подтягивается из начальных установок вашего WordPress сайта (гл. меню → Настройки → Общие → Адрес e-mail), ваш контактный e-mail указан именно там. Обязательно проверьте.
Плагин, говорят, сделан так, что в поля {admin_email} можно ввести и другой адрес, или доп. адреса через запятую. Не проверял, может и так. Также ходят слухи, что иногда переменная {admin_email} в двух указанных полях не срабатывает, тогда пропишите адрес почты явно.
Важный момент. Лучше для почты использовать gmail.com (проверяйте в нём папку Спам!) или по-взрослому зарегистрировать на хостинге сайта свой почтовый сервер. Например, у меня на mail.ru письма с данного плагина в принципе отказались приходить — ни в спам, ни куда-либо ещё.
5. Подключаем форму
Я разместил форму на странице Контакты, вы можете сделать это где угодно, в любом месте любой страницы.
Чтобы форма обратной связи появилась в нужном месте нужной страницы, скопируйте туда строку с кодом, который сформировал плагин WPForms при сохранении формы. Заходим в меню «WPForms → Все формы» и копируем код, в моем случае это:
Новый виджет WPForms теперь появится в классическом меню визуального редактора WordPress,
[frame src=»/wp-content/uploads/2020/10/wpform1.jpg» width=»100%» lightbox=»on» title=»виджет WPForms в меню визуального редактора WordPress»]
нажав «Добавить форму», вы увидите выпадающее меню с перечнем всех созданных на сайте с помощью виджета WPForms форм,
[frame src=»/wp-content/uploads/2020/10/wpform2.jpg» width=»100%» lightbox=»on» title=»Попап меню виджета WPForms в редакторе WordPress»]
однако вставка скопированного шорткода в нужное место страницы выглядит, на мой взгляд, проще и нагляднее.
Сохраняем изменения и заходим на обновленную страницу и смотрим, что получилось. Результат этой инструкции можно посмотреть на странице Контакты. Далее пишем тестовое письмо и проверяем, пришло ли оно на контактный мейл. Всё, что осталось — защититься Гугл-капчей от вонючих скунсов и назойливых спамеров:
6. Добавляем Google reCAPTCHA в контактную форму WPForms сайта WordPress
Google reCAPTCHA — это бесплатный инструмент защиты от спама, предоставляемый компанией Google. Есть три типа reCAPTCHA: V2 Checkbox reCAPTCHA, v2 Invisible reCAPTCHA и v3 reCAPTCHA. Здесь мы выбираем первый из них.
Идем админку сайта WPForms → Настройки. Затем переходим на вкладку reCAPTCHA.
В новом окне логинимся в вашем аккаунте Google (достаточно зайти в вашу почту Gmail, если её у вас нет, создайте новый п/я Gmail), далее переходим по ссылке https://www.google.com/recaptcha/ и настраиваем reCAPTCHA, чтобы получить необходимые ключи. Здесь нажмите кнопку консоли администратора в правом верхнем углу.
Далее указываем название домена (без WWW и внутренних адресов) и выбираем тип Гугл рекапчи.
Указываем тот же контактный Email, что и ранее для формы обратной связи, принимаем условия и жмем Отправить.
Получаем два ключа, которые НЕ закрывая окно Google reCAPTCHA нужно скопировать в соответствующие поля формы WPForms → Настройки→ reCAPTCHA (картинка чуть выше) и далее сохранить настройки WPForms.
Также в интерфейсе Гугл рекапчи можно задать дополнительные настройки:
• сообщение об ошибке: текст, который будет отображаться пользователю, не прошедшему тест проверки reCAPTCHA.
• порог оценки (только для reCAPTCHA v3): это оценка, при которой вы хотите, чтобы пользователи не прошли проверку reCAPTCHA v3. Оценки могут варьироваться от 0.0 (очень вероятно, что бот) до 1.0 (очень вероятно, что человек).
• режим без конфликтов: если reCAPTCHA загружается на сайт более одного раза (например, при загрузке через WPForms и другие плагины вашего шаблона WordPress), это может помешать правильной работе reCAPTCHA.
Обязательно сохраните настройки Google reCAPTCHA в нижней части страницы.
Теперь открываем в админе WPForms → Все формы → Простая контактная форма (или как вы её назвали) и переходим на вкладку Поля → reCAPTCHA. Справа должен появиться значок рекапчи.
Если всё ок — тестируем форму на сайте и проверяем, приходят ли письма.
На этом все. Теперь вы можете добавлять контактную форму в любом месте сайта, а reCAPTCHA защитит вас от спама. Подробности по Гугл рекапче для контактной формы WPForms можно найти здесь.