Всплывающая форма обратной связи на contact form 7 +защита от спама

eForm Builder

EForm Builder — это премиальный плагин для WordPress, который значительно облегчит создание форм и анкет для вашего веб-сайта.

Создание форм может быть утомительным, особенно если вы новичок в плагине, который используете. С eForm Builder создание плагинов WordPress стало проще благодаря встроенному конструктору перетаскивания. Просто выберите элементы и контейнеры, которые вы хотите добавить в форму, и поместите их на место. Навыки программирования не требуются. eForm Builder также включает в себя 25 различных тем. Так что вам просто нужно выбрать цвет кожи, который лучше всего подходит для вашего сайта (но вы всегда можете настроить его немного CSS).

Еще одна отличная особенность — встроенные опции отчетности. Пользователи заполняют ваши формы, опросы и тесты, вы можете запускать подробные отчеты прямо из вашей панели администратора WordPress. Просматривайте результаты своей анкеты, используя параметры для круговых диаграмм, гистограмм, столбчатых диаграмм или табличных данных. Кроме того, в eForm Builder также есть возможность получать электронные письма при отправке новых форм, чтобы вы могли быть в курсе своих результатов.

Другие функции плагина включают управление пользователями, поддержку мультимедиа (так что вы можете добавлять изображения, слайд-шоу и многое другое в свои формы), складные контейнеры, поддержку условной логики, полностью готовый дизайн для сетчатки, пользовательские перенаправления и все остальное, перечисленное ниже. eForm Builder — отличный построитель форм с поддержкой Ajaxed, который вы обязательно должны рассмотреть для своего следующего веб-сайта или проекта WordPress.

Заключение лучших плагинов контактной формы для WordPress

Простая в использовании контактная форма может помочь вам связаться с посетителями вашего сайта. Но вам нужно уметь легко управлять формой и ее отправками.

В приведенном выше списке мы предоставили широкий спектр плагинов для контактных форм, которые подходят для различных сценариев. Вы должны быть в состоянии найти плагин контактной формы, который соответствует вашим потребностям, поэтому, если у вас его нет, разместите форму на своем сайте сегодня, чтобы начать получать отзывы от ваших посетителей!

Используете ли вы какие-либо из этих плагинов контактной формы на вашем сайте? Мы хотели бы услышать ваш опыт использования вышеуказанных плагинов контактной формы, так что поделитесь комментариями ниже! Мы знаем, что есть еще много плагинов, которые мы не рассмотрели, поэтому обязательно сообщите нам все, что, по вашему мнению, мы пропустили.

Ninja Forms

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

Базовая версия Ninja Forms бесплатна. Ее можно установить
сразу на несколько сайтов в любом количестве. Однако, базовая версия имеет
ограниченный функционал.

Достоинства плагина:

простота настройки, благодаря встроенному
конструктору перетаскивания;
конечный контроль созданных полей;
мультиязычные настройки — работать с контактной
формой можно на русском, английском и других языках.

Премиум-версия стоит $499 в год. Ее достоинства:

качественная поддержка клиентов, быстро
реагирующая на запросы;
дополнительные функции, такие как уведомления по
СМС, мониторинг и другие.

Цена стартовой версии для ВордПресс, с которой вы сможете
покупать дополнения — $29 в год. Она актуальна, если вам не нужны все функции
премиум-плана, но нужны какие-то возможности, отсутствующие в бесплатном.
Расширений на рынке много и от сторонних разработчиков, и от создателей Ninja
Forms. Однако, они довольно дорогие, в сравнении с аналогами для других
плагинов.

Настраиваем всплывающее окно для формы

Для того чтобы получить доступ к настройкам плагина Easy FancyBox

Нам нужно перейти к стандартным настройкам медиафайлов WordPress.

Заходим в пункт меню «Настройки» => «Медиафайлы».

Сверху мы видим блок стандартных настроек WordPress медиафайлов и уже ниже приписываются наши настройки плагина Easy FancyBox. По умолчанию у нас здесь стоит активация всплывающего окна при нажатии на изображение.

Нам необходимо снять эту галочку, так как если на Вашем сайте стоит какой-либо плагин, который так или иначе связан с созданием каких-то всплывающих эффектов, например «WooCommerсе», плагин галереи, плагин для открытия изображений во всплывающих окнах и т.д. то ваши изображения будут открываться во всплывающем окне дважды

Теперь нам необходимо установит галочку возле пункта «Inline content»

И теперь нажимаем на кнопку «Сохранить изменения».

В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.

Бесплатные и платные решения для создания потрясающих веб-форм

С бесплатными конструкторами форм вы сталкиваетесь с ограничениями, такими как количество показов форм или количество форм, которые вы можете создать. Несмотря на эти ограничения, вы получите бесплатно удивительное множество функций.

Если у вас бизнес и вы готовы платить за конструктор веб-форм, то вы гораздо реже будете сталкиваться с ограничениями. Тем не менее, не все платные планы являются неограниченными, поэтому стоит проверить, что именно вы получаете, прежде чем оформить подписку. Иначе вы можете быстро обнаружить необходимость дополнительных вложений!

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

Наши рекомендации

Если вы блоггер с ограниченным бюджетом и ищете 100% бесплатный конструктор форм, тогда Google Forms станет отличным выбором. Вы можете добавить дополнительные функции с помощью надстроек Google, и вы не найдете никаких функций, скрытых за платным планом.
Если вы владелец малого бизнеса, который ищет лучший бесплатный конструктор форм, который вы можете обновить по мере роста вашего бизнеса, Zoho Forms вам определенно подойдет. Он дает вам больше ежемесячных показов, чем другие формы, а также интегрируется с приложениями Zoho, что сделает управление бизнесом более упорядоченным.
Если у вас есть сайт на основе WordPress, то мы рекомендуем Ninja Forms.
Вы можете купить годовой план или выбрать из диапазона различных дополнений, доступных для покупки.
Если у вас более крупный бизнес или вы хотите увеличить свой доход, формы JotForm ориентированные на конверсию, превосходны и могут помочь вам быстро повысить коэффициент конверсии.

Бесплатный конструктор веб-форм	Интеграция	Что вы получаете после перехода на платную версию	Основная особенность
Google Forms	Google Sheets, 30+ дополнений	Нет данных	100% бесплатно
Wufoo	Только на платных планах	Дополнительные показы форм и до 13 дополнительных функций	Построение форм происходит быстрее при использовании предопределенных вариантов
Zoho Forms	Все приложения Zoho, G Suite, Salesforce, Zapier	Неограниченное количество форм и тысячи ежемесячных показов	Получайте до 500 показов каждый месяц
JotForm	Платежные шлюзы, Adobe Doc Cloud, eSign, Google Docs	Больше показов форм и опций оплаты	Выбор из более чем 10 000 бесплатных шаблонов
Typeform	Google Analytics, 500 + приложений через Zapier	Неограниченное количество вопросов и показов форм	Ориентированный на пользователя опрос, один вопрос за раз, современный стиль форм
123FormBuilder	Wix, WordPress, e-Signatures	HTML-блоки, дополнительные материалы, SSL-шифрование	Убедитесь, что отправленные формы не пропускаются из-за системы множественных уведомлений
Formsite	Только на платных планах	Дополнительные показы, функции рабочего процесса, соответствие требованиям безопасности	Приоритет безопасности с шифрованием текстовых полей

Платный конструктор веб-форм	Интеграция	Ценообразование	Основная особенность
Leadformly	1000+ с Zapier	$$ – $$$	50 + лучших практик улучшения конверсии, включенных в конструктор
Ninja Forms	Зависит от плана (Zapier включен в планы более высокого уровня)	$ – $$	Выберите свои дополнения, не привязываясь к годовому плану
Paperform	Платежи, Zapier, прямая интеграция с Google Sheets и многое другое	$ – $$	Создавайте формы, которые выполняют функцию целевых страниц, не понимая ни одной строки кода

Шаг 6: Добавление контактной формы WordPress в сайдбар

Плагин WPForms поставляется с встроенным виджетом формы обратной связи, который вы можете добавить в сайдбар или любую другую область на сайте (например в подвал).

Для этого нам нужно перейти в раздел «Внешний Вид» (Appearance)-> Виджеты (Widgets). Там вы увидите предустановленный виджет плагина формы в левой части. Просто берем и обычным перетаскиванием задаем порядок отображения в нужной области в сайдбаре.

Следующим шагом указываете название виджета и сохраняете. Переходите на сайт и смотрите результат.

На этом обзор нашего плагина формы обратной связи WPForms завершен. Но, специально для вас я подготовил еще обзор одного бесплатного плагина, с помощью которого мы можем сделать всплывающую форму обратной связи и все те же фишки, что и в предыдущем. Называется он Contact Form 7. Он реально очень мощный и козырь его в том, что он полностью БЕСПЛАТЕН!

Его можно также сделать адаптивным, т.е форма обратной связи будет приспосабливаться к размерам экрана вашего устройства.

Так, на всякий случай, чтобы вы знали, что они естьJ

BuddyForms

BuddyForms — это плагин для создания форм для WordPress и BuddyPress. Это автоматизация и поддержка всего процесса генерации контента в сообществе, сети или пользователях. После того, как плагин установлен, он экономит вам массу времени на разработку и дает полный контроль над пользовательским контентом.

Цель BuddyForms — обеспечить простую настройку и удобный интерфейс, позволяющий любому пользователю за считанные минуты создать контактную и расширенную формы. Все без необходимости знания кодирования. Это также позволяет любому взаимодействовать, привлекать и писать контент для веб-сайта непосредственно из интерфейса, без необходимости изучать WordPress или BuddyPress.

BuddyForms также имеет возможность модерирования в очереди, которая сохраняет исходное сообщение в реальном времени, пока изменения ждут отзывов от администратора. Это позволяет администраторам создавать отличный рабочий процесс и иметь полный контроль над отправленным и опубликованным контентом на своем веб-сайте.

С помощью дополнений, которые поставляются с BuddyForms, его можно расширять с помощью других плагинов, таких как WooCommerce, BuddyPress, ACF, Ultimate Member и многих других!

Плагин Popup Maker wordpress

Не буду пытаться сохранять интригу и сразу скажу, что на мой взгляд лучший плагин это pop up maker wordpress. Ниже опишу почему этот плагин я считаю лучшим.

Плагин бесплатный
Позволяет создавать неограниченное количество поп ап окон с любым содержимым
Поддерживает интеграцию с contact form 7, ninja forms, mail chimp, woocommerce и другими популярными плагинами
Есть шесть шаблонов всплывающих окон и редактор настроек
Имеется настройка для скрытия и показа pop up окон на страницах и постах блога
Есть настройка триггеров кликов по элементам меню, кнопкам, изображениям
Можно сделать временную задержку показа модального окна
Плагин имеет более 400 000 активных установок, постоянно обновляется и есть платные расширения.

Плагин popup maker wordpress

Как встроить Google Forms в WordPress

Теперь, когда мы посмотрели, насколько впечатляет этот простой инструмент для создания форм, продолжайте читать, чтобы узнать, как создать и встроить форму Google в WordPress. Для использования форм Google вам необходим аккаунт Google. Так что, либо войдите в свой текущий аккаунт, либо создайте новый.

Шаг 1: сделать форму

Чтобы начать, нажмите на эту ссылку, чтобы перейти непосредственно к панели инструментов Google Forms. Вы должны увидеть страницу, чтобы начать с пустой формы или выбрать шаблон. В этом руководстве мы будем использовать шаблон обратной связи с клиентами, но не стесняйтесь создавать свой собственный с нуля.

Независимо от того, выберете ли вы шаблон или нет, вам будет предложено ввести название и описание. Вы можете изменить эти предварительно заполненные вопросы в соответствии с вашим брендом.

Модуль справа имеет опции для:

Добавления новых вопросов
Импорта вопросов
Изменения названия и описания
Добавления изображения или видео
Добавления раздела.

Есть кнопка выпадающего списка для выбора различных типов вопросов, таких как «Dropdowns» или «Multiple Choice».

Шаг 2. Создание кода для встраивания

После того как вы настроили форму, вам нужно сгенерировать код для встраивания, чтобы вы могли встраивать Google Forms в WordPress. Чтобы получить доступ к встраиваемому коду, вы можете нажать на кнопку «Отправить». Если вы еще не исследовали область «Настройки», вы также должны сделать это, прежде чем создавать код для встраивания.

После того, как вы нажмете кнопку «Отправить», вы увидите несколько разных вариантов отправки формы. Чтобы получить доступ к встраиваемому коду, нажмите на вкладку <>.

Если вы хотите изменить размер вашей формы, вы можете отредактировать поля «Ширина» и «Высота» по мере необходимости (вы всегда можете изменить их позже, когда увидите, как форма выглядит на вашем сайте). Затем нажмите ссылку «Копировать», чтобы скопировать код встраивания Google Forms.

Шаг 3. Добавьте код встраивания Google Forms в WordPress.

Чтобы добавить код Google Forms в WordPress, откройте редактор WordPress для поста или страницы, где вы хотите включить свою форму. Затем добавьте новый пользовательский блок HTML:

Вставьте код встраивания Google Forms в область HTML. Затем либо сохраните, либо опубликуйте страницу.

Теперь вы должны увидеть форму. Поздравляем!

Если вам не нравится форма, вы всегда можете вернуться и изменить цвета и/или размер. Например, глядя на скриншот выше, было бы неплохо сделать форму немного шире, чтобы было меньше пустого пространства.

Как вставить url и заголовок товара (страницы) в форму обратной связи на wordpress

Больше не придется просить клиентов заполнять поле «Название товара»

Есть очень простое решение Contact Form 7 + Dynamic Text Extension

От слов к делу:

Скачиваем и устанавливаем плагин Contact Form 7 и Contact Form 7 — Dynamic Text Extension
Переходим в настроки контактой формы во вкладку «Шаблон формы»
Генерируем тег «Dynamic hidden»
Добавляем к тегам дополнительные параметры для передачи сведений о странице, в итоге у Вас должно получиться примерно так:
Можете скопировать код и поменять в нем идентификаторы на свои
Переходим во вкладку «Письмо». Указываем свои теги

Вот и всё! Передача url и заголовка в письме обратной формы настроена, можно наслаждаться результатом!

Знаю человека, который сделал сотню однообразных форм для товаров, лишь бы узнать с какой именно страницы пришел заказ.

Это решение непременно понравится новичкам в сфере создания сайтов. Кроме того, все проведенные манипуляции не заметны для пользователя. А то, что мы знаем больше информации о заявках, облегчит жизнь как покупателям так и менеджерам. Информация о заказе даст нам возможность конструктивно провести диалог или переписку и не даст нам потратить зря драгоценное время.

Шаг 5: Добавление контактной формы WordPress на страницу

На данном шаге, когда вы построили и настроили форму обратной связи, нужно создать для нее отдельную страницу «Контакты», куда вы сможете ее поместить. Либо вы создаете новую, либо редактируете уже существующую страницу, где вы можете ее добавить.

Мы будем использовать простой шорткод для вставки формы на страницу. Просто кликните на кнопку «Add form» и выберите название вашей формы, чтобы вставить ее на страницу.

Отлично. Теперь сохраняете и страницу и открываете предпросмотр, чтобы увидеть изменения.

Вот как примерно будет выглядеть форма на простой WordPress странице:

Если вы хотите просто добавить форму на страницу, то поздравляю вас. Все шаги сделано успешно. Если вы хотие добавить ее в виде виджета в сайдбар, то продолжение ниже.

Дополнение

В качестве дополнения, стоит упомянуть одну очень хорошую особенность в Contact Form 7 для WordPress, с помощью которой можно фильтровать большие потоки писем от посетителей. Бывают ситуации, когда их действительно очень много, поэтому быстро ответить на все невозможно, а фильтровать вручную очень долго. Конечно, в таком случае, можно использовать метки и фильтры непосредственно в почтовом ящике, но это тоже потребует много времени. Гораздо проще будет осуществить фильтрацию еще на стадии отправки, воспользовавшись тегом «select» в Contact Form 7, отображающим раскрывающийся список

В этом списке можно предоставить пользователю выбор категории сообщения, чтобы по ней определять важность приходящей корреспонденции

Создайте новое поле, выбрав «drop-down menu», и установите ему обязательное заполнение. Затем, добавьте в строку «Options» несколько вариантов категорий для сообщений, в зависимости от направления деятельности вашего сайта (например, «Общие вопросы», «Отзывы по работе компании», «Верните мои деньги»). Каждая категория должна начинаться с новой строки. Также, желательно поставить галочку на «Insert a blank item as the first option», чтобы первым пунктом списка была пустая строка, и пользователю пришлось выбирать подходящую причину, а не оставлять первый вариант.

Теперь, нажмите «Insert Tag» и скопируйте его название. Затем, перейдите в раздел «Письмо», и вставьте скопированное в строку «Тема», обязательно перед «». Готово, теперь в теме каждого пришедшего письма будет значиться выбранная пользователем категория, что значительно облегчит фильтрацию.

Ninja Kick: WordPress Contact Form

Самая оригинальная контактная форма из всей подборки. Отличается тем, что выводится в виде отдельной панели — слайдера в левой или правой стороне сайта. Выглядит крайне эффектно. Имеет множество настроек, но по большей части — относительно своего внешнего вида. Настройка самих полей тут минимальна. Впрочем можно ставить шорткод от популярной Contact Form 7 и это будет работать.

Интересный плагин и сама форма. Подробнее можете прочитать в этом обзоре.

Подводим итог

Теперь самое время выбрать правильное расширение для вашего сайта. Contact Form 7 или FormCraft — Form Builder – это вероятно наилучшие решения для обычного блога, а для больших сайтов предлагающих разные сервисы и услуги, я бы посоветовал использовать — Gravity Forms или Ninja Forms. Любителям «выделится» великолепно подойдет — Ninja Kick: Contact Form.

FormCraft

Изначально плагин FormCraft был создан и развивался только в премиум варианте. Относительно недавно авторы сделали отдельную, бесплатную версию — FormCraft — Form Builder.

Как и в премиум варианте, FormCraft — Form Builder позволяет легко и быстро конструировать разные формы в специальном и очень удобном drag & drop редакторе. Возможностей тут естественно поменьше, но для обычных пользователей вполне хватит.

Премиум версия FormCraft может похвастать настройкой скриптовой логики, авто сохранением, более чем 20+ дополнительными, настраиваемыми полями, popup и fly-in формами, експортом в CSV и прочими радостями.

Один из лучших плагинов на сегодняшний день как в премиум, так и в бесплатном варианте.

Ajax обработчик формы

function send_mail() {

  /* Забираем отправленные данные */
  $client_fio = $_POST;
  $client_mail = $_POST;
  $client_quest = $_POST;

  /* Отправляем нам письмо */
  $emailTo = '[email protected]';
  $subject = 'Test mail рассылки!';
  $headers = "Content-type: text/html; charset=\"utf-8\"";
  $mailBody = "$client_fio <br/><br/> $client_mail <br/><br/> $client_quest";

  wp_mail($emailTo, $subject, $mailBody, $headers);

  /* Создаем новый пост-письмо */
  $post_data = array(
   'post_title'    => $client_fio,
   'post_content'  => $client_quest . '<br/>' .$client_mail,
   'post_status'   => 'publish',
   'post_author'   => 1,
   'post_type' => 'mail',
  );

  wp_insert_post( $post_data );

  /* Завершаем выполнение ajax */
  die();
  
}

add_action("wp_ajax_send_mail", "send_mail");
add_action("wp_ajax_nopriv_send_mail", "send_mail");

Все. Обработчик формы готов, теперь смело заходим на наш локальный сайт, заполняем или не заполняем поля, кликаем по отправке, дозаполняем поля, чтобы форма отправилась, кликаем еще раз отправить… и все готово. Форма отправлена, можем отправить еще раз если сильно охота, переходим в админку и видим что у нас появилась новая запись с информацией отправленного письма. Ура!)

Сознание новой формы

Для того, чтобы приступить к созданию новой контактной формы, нужно нажать кнопку «Добавить новую». Перед вами откроется окно, в котором, первым делом, нужно дать ей название. Ниже, вы увидите содержание текущего шаблона, в нем уже будет вставлено несколько тегов, чтобы дать вам общее представление о том, как это должно выглядеть. Вы можете использовать любые другие теги, такие как:

Текстовое поле, адрес электронной почты (text, email);
Ссылка (url);
Номер телефона, диапазон чисел, дата (tel, number, date);
Текстовое поле в несколько строк (textarea);
Флажки, переключатели и выпадающее меню (checkbox, radio, select);
Проверка капчей (captchac и captchar);
Проверка контрольным вопросом (quiz);
Флажок согласия (acceptance);
Прикрепление файлов (file);
Кнопка отправки (submit).

Кроме того, для каждого из них можно задать определенные параметры, например, сделать поле обязательным для заполнения, указать значение по умолчанию, а также добавить идентификатор или класс для того, чтобы воспользоваться им при оформлении через CSS стили.

В качестве примера, можно добавить к готовому шаблону такие поля, как: никнейм, номер телефона, текстовый вопрос для защиты от спама. Это будет самая простая форма отправки сообщения администратору сайта. Для ее создания понадобятся теги (text, tel, quiz).

Сперва добавим новое поле для никнейма автора сообщения, с именем «Ваш никнейм», как написано в других готовых полях (можно просто скопировать). Теперь, в разделе «Шаблон формы» выбираем «text» и задаем нужные параметры. Например, можно сделать обязательное заполнение, поставив галочку на «Required field». В качестве альтернативы, можно сделать это поле обязательным для заполнения просто добавив звездочку (text*).

Имя поля можно оставить по умолчанию или задать любое другое, например, «your-nickname». Чтобы поле имело содержание по умолчанию, которое поможет пользователю сориенироваться быстрее, нужно добавить его в строчку «Значение по умолчанию». Если поставить галочку на «Use this text as the placeholder of the field», то это содержание будет исчезать при нажатии. Далее, можно задать атрибуты «ID» или «Class», чтобы использовать их для оформления поля через CSS стили. Теперь остается только нажать «Insert Tag», и сгенерированный тег появится в содержимом. Он должен выглядеть так:

Аналогичные действия нужно провести и при добавления остальных полей (tel, quiz). Только, в случае с вопросом для защиты от спама (quiz), нужно будет написать вопрос и ответ одной строкой, через разделитель «|». Это должно выглядеть примерно так (Сколько будет 2+3?|5)

Обратите внимание, что очередность тегов в содержании шаблона определяет расположение полей на сайте

Теперь, остается только нажать кнопку «Сохранить», после чего, наверху появится сгенерированный шорткод для вставки в пост, страницу, или текстовый виджет. Если все сделано правильно, то готовая форма отобразиться на вашем сайте WordPress там, где вы вставили этот шорткод.

Как сделать всплывающую форму обратной связи на wordpress

Для создания всплывающей формы необходимо установить плагины Contact Form 7 (если он еще не установлен) и Easy FancyBox
Активируем плагины и настраиваем Contact Form 7 (смотрите выше). Плагин Easy FancyBox настраивать не нужно.
Устанавливаем код в всплывающей формы в нужном месте
1. Код всплывающей формы обратной связи при клике по тексту:
```
<a class="fancybox" href="#contact_form_pop">Написать письмо</a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">ШОРТКОД</div>
</div>
```
2. Код всплывающей формы обратной связи при клике на картинку:
```
<a class="fancybox" href="#contact_form_pop"><img src="/wp-content/uploads/2016/11/call.png" alt="" /></a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">ШОРТКОД</div>
</div>
```
  В некоторых случаях, если при клике на ссылку возникают проблемы и форма отсутствует (The requested content cannot be loaded.), тогда нужно заменить класс «fancybox» на «fancybox-inline».
  Также не забываем вставить свой шорткод формы обратной связи
Поздравляю! Всплывающая форма обратной связи в связке двух плагинов Contact Form 7 + Easy FancyBox готова.

Как защитить контактную форму от спама

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

Защита Contact Form 7 с помощью reCAPTCHA

Если вы когда-либо отправляли форму в Интернете, вы, вероятно, уже знакомы с reCAPTCHA , технологией, разработанной Google для определения автоматического поведения ботов. В более старых версиях reCAPTCHA (V2) пользователи должны были пройти головоломку или испытание.

Последняя версия reCAPTCHA (V3) не требует взаимодействия со стороны пользователей. Вместо этого она прозрачно отслеживает активность пользователей в фоновом режиме, чтобы различать посетителей-людей и ботов. Поскольку Contact Form 7 поддерживает reCAPTCHA V3, мы рекомендуем использовать эту последнюю версию, поскольку она обеспечивает лучший пользовательский интерфейс для посетителей.

Чтобы настроить reCAPTCHA, вам сначала нужно сгенерировать ключ API. Для этого войдите в свою учетную запись Google и перейдите на страницу настройки reCAPTCHA . Пройдите через регистрационную форму, чтобы создать reCAPTCHA.

Ярлык — укажите ярлык по вашему выбору.
Тип reCAPTCHA — Контактная форма 7 поддерживает reCAPTCHA v3, поэтому выберите эту версию.
Домены. Если ваш сайт использует корневой домен, добавьте версию своего домена без www и www. Если ваш сайт использует субдомен, просто добавьте субдомен.
Владельцы — адрес электронной почты, связанный с вашей учетной записью Google, будет добавлен в качестве владельца по умолчанию. При необходимости вы можете добавить дополнительные адреса электронной почты.

После того, как вы заполнили все параметры, нажмите « Отправить» . Затем вам будут представлены «ключ сайта» и «секретный ключ» вашего сайта. Обязательно сохраните эти ключи, потому что вам нужно будет добавить их в контактную форму 7.

Затем нажмите «Контакт» на боковой панели панели инструментов WordPress и нажмите « Интеграция» . Выберите опцию reCAPTCHA и вставьте ключ своего сайта и секретный ключ в соответствующие поля. Наконец, нажмите « Сохранить изменения», чтобы завершить интеграцию с reCAPTCHA.

После настройки reCAPTCHA в контактной форме 7 вы увидите логотип reCAPTCHA в правом нижнем углу страницы контактной формы. Это означает, что reCAPTCHA активна и защищает вашу контактную форму от спама.

Защита контактной формы с помощью Cloudflare

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

Чтобы добавить правило страницы, щелкните вкладку «Правила страницы» и используйте следующие настройки, чтобы защитить свою страницу контактов.

Если URL соответствует — * vash-domen.com / your-contact-page / *
Проверка целостности браузера — Вкл.
Уровень безопасности — высокий

Функция Cloudflare « Проверка целостности браузера » анализирует заголовки HTTP. Если он обнаруживает заголовок HTTP, который обычно используется автоматическими ботами и спамерами, он отклоняет запрос к вашему сайту. Установка «Высокого уровня безопасности» бросит вызов всем посетителям, которые проявляли злонамеренное поведение в течение последних двух недель.

Если ограничить эти настройки своей контактной страницей с помощью правила соответствия URL, другие страницы вашего сайта не будут затронуты этими правилами для страниц. Мы рекомендуем эту конфигурацию, потому что для обычных страниц вашего сайта, предназначенных только для чтения, обычно не требуется повышенный уровень безопасности.

Caldera Forms

Простой многофункциональный плагин WordPress. Отличается качественным и удобным
визуальным редактором, поэтому в процессе настройки контактной формы вы сразу
будете видеть, как на ней отражаются внесенные изменения.

Установка Caldera Forms бесплатна. Однако, как и в случае со
многими аналогами, купив платную версию за $14.99/месяц, вы получите дополнительные
функции. Среди них отсутствие ограничений на количество использований, анти-спам
фильтр и другие.

Годовой план за $74.99 ($549.99 для агентств) расширяет
функционал еще больше, добавляя возможности:

получать заявки клиентов в PDF-формате;
применять надстройки: шаблоны писем, простые
запросы, ограничитель входа;
пользоваться автоматически собираемой аналитикой
полученных данных.

Достоинством контактной формы является возможность
попробовать ее бесплатную версию, и только если плагин ВП вам понравится и
потребуются дополнительные функции, купить платную.

Оформление внешнего вида с помощью CSS

В этом примере я приведу фрагмент своего CSS файла, который отвечает за внешний вид формы обратной связи:

Вам потребуется два изображения, которые доступны в архиве с исходниками или сохраните их с этой страницы через контекстное меню по изображению «Сохранить картинку как…» и не забудьте в CSS изменить путь к этим файлам, если загружаете в иную папку.

— появляется в поле input при валидации формы; — появляется в поле input когда форма не заполнена или заполнена неверно.

Приведенный мною фрагмент стилей оформления добавьте в свой файл style.css. На свое усмотрение Вы имеете возможность менять внешний вид формы или ее отдельных элементов, применять различные стили оформления и тем самым вписать ее в любой дизайн так, чтобы смотрелось гармонично.

Итоги

Короче говоря: Contact Form 7 является отличным выбором для тех, кто хочет быстро добавить контактную форму на свой сайт WordPress бесплатно.

Вы не сможете создать такой же вид продвинутых форм, которые вы бы смогли сделать с такими инструментами, как Gravity Forms или WPForms Pro. Вы можете, однако, добавить выпадающее меню, флажки и поля вложений файлов для ваших форм. Таким образом, это, вероятно, лучше думать о Contact Form 7 в качестве строителя контактной формы, а не полное решение многофункциональных форм.

Там также нет коммерческого или премиум версии Contact Form 7. С одной стороны, это хорошо: Там нет продажи или отключенные функции. С другой стороны, однако, нет возможности обновления по мере роста потребностей, будь то вам необходимо получить доступ к более мощным функциям или более гибкой поддержки.

Тем не менее, если все, что вам нужно, это добавить простую контактную форму (бесплатно) с возможностью добавления еще несколько полей, Contact Form 7 вполне может быть только то, что вы ищете!