Форма обратной связи — лучшие WP плагины. Контактная форма для wordpress — обзор лучших плагинов Плагин формы wp

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

Форма обратной связи WordPress плагином Contact Form 7

Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:

• Адрес почты
• По желанию телефон
• Текст сообщения
• Капча

Добавить капчу reCaptcha

Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.

CF7 в поиске

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

Ссылка на рекапчу

Перебросит в сервис, настраиваем пункты как на скриншоте, правильно вводим домен, внизу нажимаем отправить.

Привязка captcha к сайту

Копируем данные для капчи, оба ключа.

Ключи доступа

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Интеграция

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

Сохранение настроек

Создание формы

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

Стираем стандартные надписи

Вводим название нового проекта и нажимаем кнопку Текст, потому что имя будут вводить текстом без правил.

Поле текст

Появиться всплывающее окно, настраиваем по потребностям.

1. Тип определяет обязательно ли посетителю заполнять поле, я поставил да
2. Имя не меняем это уникальный идентификатор
3. Значение по умолчанию, ввел фразу, которую увижу внутри
4. Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
5. Не советую пользоваться полем Akismet
6. Для добавления стилей вводим class или id, сделал pole-imya
7. Вставляем тег в общее поле

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

Генератор почты

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

Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

Кнопки телефон и текстовая область

Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод помещаем под остальными элементами.

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

Кнопка отправить

В результате получился такой код.

Финальный код CF7

Настройка отправки письма

Изменение параметров письма

1. Теги полей созданные ранее
2. Адрес почты куда будут приходить письма
3. От кого и тема, заполняйте по желанию
4. Дополнительные заголовки, полностью очищаем
5. Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.
6. Внизу нажимаем Сохранить

Сохранение

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

Вставка формы на сайт

Вверху страницы сформировался шорт код, копируем его.

Шорткод

Идем в любую запись и вставляем.

Помещаем shortecode в страницу

После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.

Финальный вариант

Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы , читайте по ссылке.

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

Сделать поля горизонтально в строчку

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

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Оборачиваем в div

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

Flex-form{display:flex;} @media only screen and (max-width: 655px){.flex-form{display:block;}}

Прописываем стили

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

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

Положительно на приеме заявок действуют от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце. В дополнение из той статьи.

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Поиск элемента в elementor

Элементор обработал запрос

Используем настройку темы

В большинстве шаблонов WordPress нет инструментов для создания в автоматическом режиме обратной связи. Но наши темплейты от WPShop имеют встроенную функцию, которая выводится с помощью шорткода. Разберем на примере Root . Перехожу в создание страницы, далее смотрим на снимок.

Надстройка в ROOT

• Прописываем текст [ contactform ] (без пробелов внутри скобок)
• Жмем предпросмотр

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

ROOT работа встроенной функции

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

Используем виджет текст

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

Форма в виджете

Обратная связь без плагина

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

Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться .

/*код обратной связи*/ add_shortcode("art_feedback", "art_feedback"); function art_feedback() { ob_start(); ?>

Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.

Заходим в создание страницы в панели WordPress, пишем , нажимаем на просмотреть.

В гутенберге в любой текстовый блок вставляете строку.

Вносим вывод в запись

Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан PHP обработчик.

Плохой внешний вид

Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.

#add_feedback { margin: 20px 0 0; position: relative; } #art_name, #art_email, #art_subject, #art_comments { padding: 10px 5px; display: inline-block; width: 49.548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em; } #art_subject { width: 100%; margin: 5px 0; } #art_comments { width: 100%; } #add_feedback .button { border: none; padding: 10px 20px; color: #fff; font-size: 1em; display: inherit; margin: 10px 0 0 0; border-radius: 3px; background-color: #2f94ce; } #add_feedback input:focus, #add_feedback input:focus, #add_feedback input:focus, #add_feedback textarea:focus { color: #444; box-shadow: 0 0 3px rgba(68, 68, 68, 0.2); } .error-text { background: #F59E9E; padding: 15px 0px; text-align: center; color: #fff; } .error-name, .error-email, .error-comments { display: inline-block; font-size: 11px; position: absolute; top: -30px; color: white; border: 1px solid red; padding: 5px 10px; line-height: 1.1; background: red; box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3); } .error-name:after, .error-email:after, .error-comments:after { content: ""; position: absolute; left: 20px; bottom: -10px; border: 5px solid transparent; border-top: 5px solid red; } .error-comments { top: 16%; left: 0; } .error-name { left: 0; } .error-email { right: 4%; } .message-success { background: rgba(0, 128, 0, 0.5); color: #fff; padding: 20px; text-align: center; margin: 20px auto; border-radius: 3px; } #add_feedback .error { border: 1px solid red; } #add_feedback .required:after { content: "*"; position: absolute; left: 20px; bottom: -10px; } #art_name:focus::-moz-placeholder, #art_name:focus:-moz-placeholder, #art_name:focus:-ms-input-placeholder, #art_email:focus::-webkit-input-placeholder, #art_email:focus::-moz-placeholder, #art_email:focus:-moz-placeholder, #art_email:focus:-ms-input-placeholder, #art_comments:focus::-webkit-input-placeholder, #art_comments:focus::-moz-placeholder, #art_comments:focus:-moz-placeholder, #art_comments:focus:-ms-input-placeholder, #art_subject:focus::-webkit-input-placeholder, #art_subject:focus::-moz-placeholder, #art_subject:focus:-moz-placeholder, #art_subject:focus:-ms-input-placeholder { color: transparent }

Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.

Сверстанный блок

Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.

JQuery(document).ready(function ($) { var add_form = $("#add_feedback"); // Сброс значений полей $("#add_feedback input, #add_feedback textarea").on("blur", function () { $("#add_feedback input, #add_feedback textarea").removeClass("error"); $(".error-name,.error-email,.error-comments,.message-success").remove(); $("#submit-feedback").val("Отправить сообщение"); }); // Отправка значений полей var options = { url: feedback_object.url, data: { action: "feedback_action", nonce: feedback_object.nonce }, type: "POST", dataType: "json", beforeSubmit: function (xhr) { // При отправке меняем надпись на кнопке $("#submit-feedback").val("Отправляем..."); }, success: function (request, xhr, status, error) { if (request.success === true) { // Если все поля заполнены, отправляем данные и меняем надпись на кнопке add_form.after("

Папка js на сервере

Теперь загружаем вторую часть кода в function.php.

/*вторая часть*/ add_action("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts() { // Обработка полей wp_enqueue_script("jquery-form"); // Подключаем файл скрипта wp_enqueue_script("feedback", get_stylesheet_directory_uri() . "/js/feedback.js", array("jquery"), 1.0, true); // Задаем данные объекта ajax wp_localize_script("feedback", "feedback_object", array("url" => admin_url("admin-ajax.php"), "nonce" => wp_create_nonce("feedback-nonce"),)); } add_action("wp_ajax_feedback_action", "ajax_action_callback"); add_action("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback() { // Массив ошибок $err_message = array(); // Проверяем nonce. Если проверка не прошла, то блокируем отправку if (! wp_verify_nonce($_POST["nonce"], "feedback-nonce")) { wp_die("Данные отправлены с неправильного адреса"); } // Проверяем на спам. Если скрытое поле заполнено или снят чек, то блокируем отправку if (false === $_POST["art_anticheck"] || ! empty($_POST["art_submitted"])) { wp_die("Это спам"); } // Проверяем полей имени, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_name"]) || ! isset($_POST["art_name"])) { $err_message["name"] = "Пожалуйста, введите ваше имя."; } else { $art_name = sanitize_text_field($_POST["art_name"]); } // Проверяем полей почты, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_email"]) || ! isset($_POST["art_email"])) { $err_message["email"] = "Пожалуйста, введите адрес вашей электронной почты."; } elseif (! preg_match("/^[[:alnum:]]*@+\.{2,4}$/i", $_POST["art_email"])) { $err_message["email"] = "Адрес электронной почты некорректный."; } else { $art_email = sanitize_email($_POST["art_email"]); } // Проверяем полей темы письма, если пустое, то пишем сообщение по умолчанию if (empty($_POST["art_subject"]) || ! isset($_POST["art_subject"])) { $art_subject = "Сообщение с сайта"; } else { $art_subject = sanitize_text_field($_POST["art_subject"]); } // Проверяем полей сообщения, если пустое, то пишем сообщение в массив ошибок if (empty($_POST["art_comments"]) || ! isset($_POST["art_comments"])) { $err_message["comments"] = "Пожалуйста, введите ваше сообщение."; } else { $art_comments = sanitize_textarea_field($_POST["art_comments"]); } // Проверяем массив ошибок, если не пустой, то передаем сообщение. Иначе отправляем письмо if ($err_message) { wp_send_json_error($err_message); } else { // Указываем адресата $email_to = ""; // Если адресат не указан, то берем данные из настроек сайта if (! $email_to) { $email_to = get_option("admin_email"); } $body = "Имя: $art_name \nEmail: $art_email \n\nСообщение: $art_comments"; $headers = "From: " . $art_name . " <" . $email_to . ">" . "\r\n" . "Reply-To: " . $email_to; // Отправляем письмо wp_mail($email_to, $art_subject, $body, $headers); // Отправляем сообщение об успешной отправке $message_success = "Сообщение отправлено. В ближайшее время я свяжусь с вами."; wp_send_json_success($message_success); } // На всякий случай убиваем еще раз процесс ajax wp_die(); }

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

Заполняем и отправляем письмо

Такое письмо приходит на почту с обратной связи.

Что приходит после отправки

Отлично, справились, смогли сделать форму обратной связи в WordPress, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!

Мне нравится Не нравится

Три самых важных страницы на бизнес-сайте: «Описание сайта », «Услуги » и «Контакты ».

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

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

Если вы думаете, что-то вроде: Pochta (собака) gmail (точка) com смог уклониться от спам-ботов, то вы не правы! Сегодня спам-боты стали намного умнее – они адаптировались и обучились этим маленьким хитростям. Таким образом, важно использовать контакт, не выкладывая ваш контактный адрес электронной почты.

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

Лучшие бесплатные плагины с контактной формой для wordpress

CONTACT FORM 7

Наверное, лучший бесплатный плагин с контактной формой для WordPress, скачанный на WordPress.org более 16 миллионов раз. Его основные функции включают в себя флажки, радиокнопки, функции загрузки файлов и анти-спам функции, такие как капча.

Он также имеет специальные поля, в которые можно ввести телефонные номера, адреса электронной почты, данные и др.

JETPACK

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

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

Контактная форма Contact Form для Wordpress

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

Не беспокойтесь, у вас также есть традиционные формы вхождения в записи – на боковой панели с помощью виджетов.

FAST SECURE CONTACT FORM

Fast Secure Contact Form выпускается в двух версиях – как плагин для WordPress и PHP-код для интеграции в другие сайты. Уникальной особенностью этого плагина является возможность автоматически блокировать все спамеры. Это значительно уменьшает спам в комментариях. Имеет обычные инструменты – чекбоксы, радио-кнопки и модули резервного копирования/восстановления.

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

NINJA FORMS

Ninja Forms – плагин, имеющий разнообразный функционал и интерфейс с возможностью перетаскивания. Он имеет множество функций, включая необязательный AJAX обработчик, надежные анти-спам модули и возможность импорта/экспорта данных. И это только в бесплатной версии.

Расширения превращают Ninja Forms в игровой модуль. Modal Forms является одним из самых популярных расширений. Другие полезные расширения включают в себя среди прочих PayPal, Stripe, MailChimp, Mad Mimi и Constant Contact integration.

VISUAL FORM BUILDER

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

Премиум-версия на $20 включает в себя модуль проектирования электронной почты, аналитики и условной логики. На мой взгляд, однако, вам лучше пользоваться для этого специальным продуктом, таким, как MailChimp.

FORMIDABLE FORMS

Этот плагин использует фремиум вариант оплаты. Для базового использования имеет многочисленные функции. Formidable Forms использует интерфейс с функцией перетаскивания и включает рекапчу и Akismet для борьбы со спамом.

Премиум-версия по цене $47 включает в себя потрясающие дополнительные функции, такие как интеграция с PayPal и управление электронной почтой, а также возможность регистрации для посетителей. К сожалению файл загрузки, который является бесплатным для большинства плагинов, здесь является платным.

CONTACT FORM

Это очень простой и лёгкий в использовании плагин с контактной формой для WordPress, имеющий более 2 миллионов закачек. Он интегрируется с плагином Captcha для борьбы со спамом. Его профессиональная версия, доступная за $15 включает в себя дополнительные функции, такую, например, как валидация ввода – она является бесплатной в Contact Form 7.

Лучшие премиум плагины с контактной формой для WordPress

GRAVITY FORMS

Первое название, которое приходит на ум, когда речь заходит о премиум плагинах с контактной формой для WordPress, это Gravity Forms. Начиная с $39 для одного веб-сайта, существуют две другие модели ценообразования: за $99 для трёх веб-сайтов и $199 за лицензию разработчика.

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

Плагин Gravity Forms – другой источник удивления для этого плагина. Помимо интеграции с сервисом электронной почты, он также интегрируется с платёжными системами, такими, как Authorize.net, Striple, PayPal и бухгалтерским программным обеспечением, таким, как FreshBooks.

QUFORM

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

FORMCRAFT

Оправдывая своё название («Умелая форма»), этот плагин для WordPress имеет многомерную форму и в розничной торговле стоит $35. С помощью этого плагина можно создать различные типы форм, включая форму информационного бюллетеня, опросов и анкет.

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

ЗАКЛЮЧЕНИЕ
Если вы только начинаете работу с вашим веб-сайтом, не обязательно сразу покупать премиум версию. Однако контактная форма является строгой необходимостью. Будь это простой сайт, блог или даже корпоративный сайт, там должна быть возможность обратиться к владельцу сайта.

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

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

Форма обратной связи присутствует на каждом сайте, это что-то вроде неотъёмная часть веб-ресурса. Поскольку она служит обращением к администратору с каким-либо предложением или претензией в области своих интересов. А такие случаи бывают часто, тем более, если вы являетесь фирмой, организацией или просто частным предприятиям выпускающий какой-то продукт.

Для создания формы обратной связи на WordPress вам не придется самому писать код или заказывать у специалиста его написание. Это уже реализовано и даже неоднократно, все что нужно сделать лишь подобрать плагин, отвечающий вашим требованиям. В статье рассматривается 5 более популярных плагинов, которые пользуются спросом на должном уровне.

Одним из наиболее широко используемых плагинов для создания форм обратной связи является Contact form 7. Он быстро набрал популярность благодаря своей простоте в настраивание содержимым формы. Плюс поддерживает фильтрацию спама и позволяет установить CAPTCHA с помощью дополнительного плагина Really Simple CAPTCHA. Также плагин поддерживает технологию Ajax, что в обработке выполнения запроса веб-страница не перезагружается.

После установки и активации Contact form 7 в панели управления появиться новая вкладка для управления форм. Чтобы найти с ним общий язык долго возиться не придётся, плагин мультиязычный и русский имеется в том числе. Контактная форма стилизуется в зависимости от установленной вами темы, но со знаниями CSS возможно отредактировать на свой вкус.

Пример формы.

2. Form Maker

Form Maker является современным и продвинутым инструментом для быстрого создания форм связи. Он предлагает множество типов полей, установка капчи, шаблоны готовых форм, открытый код для правки стилей и результат можно сразу увидеть в предварительном просмотре. При обретении коммерческой версии будет доступна интеграция с Google Maps, а также поле загрузки файлов. Плагин поддерживает большое количество языков.

Пример формы.

3. Fast Secure Contact Form

Простая и в то же время мощная форма обратной связи имеет ряд положительных функций и настроек. Вам не придется беспокоиться о наводнении спама, потому что плагин поддерживает Akismet и позволяет установить CAPTCHA. Также есть возможность экспорта и импорта настроек, переадресация пользователя после отправки письма на любой адрес, отправка файлов, редактирование стилей и многое другое. Частичный русский перевод.

Пример формы.

4. Visual Form Builder

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

Окно настроек.

Пример формы.

5. Slick contact forms

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

Пример формы.

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

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

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

Contact Form 7 – это наиболее популярный (сейчас насчитывается более чем 12 тысяч скачиваний, и эта цифра продолжает расти) WordPress-плагин контактной формы. Плагин может похвастаться AJAX-отправкой, встроенной , Akismet-спам-фильтром и возможностью загружать файлы. Плагин совершенно бесплатный и легко кастомизируется с помощью простого HTML

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

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

Fast Secure Contact From – это еще один популярный плагин, который уже был скачан более 3.5 миллионов раз. Он позволяет владельцам блогов легко создавать и добавлять контактные формы на WordPress-сайты. Вы так же можете использовать форму, чтоб посылать запросы-приглашения к обычному или видео-звонку.

У плагина есть админ-интерфейс, с помощью которого вы можете создать неограниченное количество форм и посматривать их привью. Используя капчу и Akismet Fast Secure form, блокирует атаки, основанные на наиболее популярных спамерских тактиках.

Плюсы: В отличие от других подобных плагинов Fast Secure form не дает пользователям возможности зарегистрировать профиль, но он может предложить другие великолепные функции, среди которых возможность создания графика, онлайн-встречи, поддержка нескольких email-адресов и т. п.

Минусы: В текущей версии плагина отсутствует простой интерфейс, но автор плагина недавно выпустил бета-версию, в которой дела с интерфейсом обстоят гораздо лучше. Таким образом, проблема интерфейса стоит не столь остро.

Contact Form by Contact ME

Contact Form – это бесплатный в базовом функционале плагин, но он обязывает вас зарегистрироваться на сайте contactme.com. Регистрация совершенно бесплатная и не требует от вас никаких усилий. Разработчики плагина заявляют, что он на порядок лучше многих популярных плагинов контактной формы, включая contact form 7!

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

Минусы: Для того, чтоб использовать плагин вам придется создать профиль на сайте Contact Me. Даже не смотря на то, что регистрация простая и бесплатная, все-таки это не радует, когда вас к чему-то принуждают.

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

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

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

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

Интерфейс Visual Form Builder приятно удивит вас, так как плагин позволяет создавать и управлять всем видами форм на вашем сайте из одного места. В один клик вы можете добавлять новые поля, реорганизовывать уже существующие, применить антиспам решение. Для того, чтоб изменить порядок полей вы можете воспользоваться технологией drag & drop.

Плюсы: Хоть Visual Form Builder и схож с другими плагинами контактной формы, перечисленными здесь, у него есть свои интересные «фишки» — возможность изменить порядок элементов простым перетаскиванием, экспорт вводимых данных в файле CSV, настраиваемые сообщения с подтверждением, форма отправки, которая поддерживает ввод множества email’ов.

Минусы: Если ваш WordPress-сайт – очень крупный, вам лучше использовать другой плагин, так как этот хранит вводные данные формы в базе данных вашего WordPress.

nForms – WordPress Form Builder

Drag and Drop Builder предоставляет вам простой многоколоночный шаблон контактной формы, с Ajax отправкой и валидацией. Вы даже можете показывать форму, используя плагин, выводящий popup-окна. Есть возможность отобразить форму с помощью шорткода, обычной функции PHP или виджета.

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

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

Плюсы: Gravity Forms может предложить вам совершенно эксклюзивную функциональность, которая недоступна в других подобных плагинах, например, опцию для создания форм заказов (включая калькуляцию в режиме реального времени), зависимые поля для того, чтоб срыть или показать поля, секции, страницы или даже кнопку отправки по выбору пользователей.

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

Mapped Contact Form Pro WordPress использует другой алгоритм для показа формы на вашем веб-сайте. Это великолепное решение для бизнеса или компании, так как он может быть использован для обозначения на местности филиалов или офисов. Так же плагин идеален для тех, кто использует на своих сайтах карты .

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

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

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

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

Ninja Kick: WordPress Contact Form

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

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

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

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

Я люблю простые и красивые вещи. Мне понадобилась красивая форма обратной связи для моего WordPres- блога, но те формы (contact forms), которыми я пользовался (это самая популярная Contact Form 7 и Jetpack Contact Form), к сожалению, некрасивы. А тратить время на их дизайн совсем не хочется. Поэтому я решил найти готовую стильную форму обратной связи и чтобы обязательно с капчей, иначе завалят спамом. Таким образом, у меня была очень простая цель — найти форму обратной связи WordPress, которая удовлетворяет следующим требованиям:

• наличие капчи,
• бесплатность,
• стильная, красивая.

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

WpForms Lite

Популярная, бесплатная, понятная, но некрасивая форма обратной связи, слишком простая, а дополнительных готовых дизайнов нет. Есть Recapcha Google. Платная версия, которая стоит от $49, позволяет интегрировать контактную форму в сервисы почтовых рассылок, подобных Aweber, позволяет принимать платежи и многое другое. Эту контактную форму американский , но я бы так не сказал.

Caldera Forms

Сложнее в настройке, чем WpForms, но симпатичнее. Есть капча, но она не отображалась у меня. Дизайн формы обратной связи средний.

Jetpack Contact Form

Форма обратной связи от создателей WordPress, при активации в редакторе появляется кнопка Add Contact Form. Нет капчи, приходит очень много спама! Некрасивая.

Contact Form 7

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

Fast Secure Contact Form

Эта форма обратной связи мне не понравилась дизайном — некрасивая!

Form Maker by WD

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

Некрасивая форма обратной связи! Очень ограниченный функционал — ничего нет…

Contact Form by BestWebSoft

Некрасивая! Очень ограниченный функционал формы обратной связи — ничего нет…

Ninja Forms

Это обычная форма обратной связи со стандартным дизайном, но что-то в ней меня зацепило, если не найду ничего приличного, то можно попробовать использовать ее. Есть интеграция ReCaptcha Google.

Huge-IT Forms

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

Formidable Forms

В этой форме обратной связи нет стильных дизайнов, но базовый дизайн более или менее приемлемый, поэтому я стал использовать ее.

Таблица с обзором плагинов форм обратной связи WordPress

Результаты моих поисков формы обратной связи сведены в таблице ниже.

Выводы: лучшая форма обратной связи WordPress

Честно сказать, я не нашел то, то что искал. Из одиннадцати рассмотренных самых популярных форм обратной связи только две контактные формы имеют красивые шаблоны дизайнов: Form Maker by WD и Huge-IT Forms . Но на первом у меня не установилась капча, а на втором расползалась верстка в админке. Похоже, разработчиков не беспокоит дизайн и поэтому все остальные формы обратной связи идут без дизайна, и поэтому некрасивые, и вам придется самостоятельно настраивать дизайн, правя CSS.

Тем не менее я выбрал форму обратной связи Formidable Forms , так как она все-таки имеет хоть базовый (чуть-чуть разработчик подправил!), но стильный дизайн, имеет reCaptcha и бесплатна. У меня все заработало сразу же!

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