Важная составляющая сайта – наличие связи с его автором. WordPress позволяет реализовать этот момент различными методами, каждый из которых по-своему удобен. Способы установки и настройки, преимущества и недостатки каждого из них мы сегодня и рассмотрим.
Для того, чтобы сделать удобную форму обратной связи, мы возьмём на заметку пару вариантов. Если хотите максимально снизить нагрузку, которую даёт WordPress, для вас — решение без использования плагинов. Если же нужен расширенный функционал, то выбор в пользу CF7.
Форма обратной связи без использования плагинов
Преимущество такого решения в том, что оно не создаёт дополнительную нагрузку. Мы создадим базовую форму фидбэка с четырьмя полями:
- E-mail;
- Тема письма;
- Поле для текста.
Шаг 1
Подключаемся к хостингу и заходим в папку темы, которую сейчас используете на WordPress . Задача — создать в ней новый php-файл. Название — любое. Я сделаю «feedback.php».
Шаг 2
Открываем созданный файл в текстовом редакторе и вставляем в него код:
if (isset($_POST["name"])) {$name = $_POST["name"]; if ($name == "") {unset($name);}}
if (isset($_POST["email"])) {$email = $_POST["email"]; if ($email == "") {unset($email);}}
if (isset($_POST["sub"])) {$sub = $_POST["sub"]; if ($sub == "") {unset($sub);}}
if (isset($_POST["body"])) {$body = $_POST["body"]; if ($body == "") {unset($body);}}
if (isset($name) && isset($email) && isset($sub) && isset($body)){
$address = "ВАШ E-MAIL";
$mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if ($send == "true")
{echo "ВЫВОД СООБЩЕНИЯ ОБ УСПЕШНОЙ ОТПРАВКЕ";}
else {echo "СООБЩЕНИЕ ОБ ОШИБКЕ";}
}
else
{
echo "СООБЩЕНИЕ-ОШИБКА, ЕСЛИ НЕ ЗАПОЛНЕНЫ ВСЕ ПОЛЯ";
}
?>
То, что выделено жирным — переписываем под свои нужды, после чего сохраняем файл.
Шаг 3
В админке WordPress создаём новую страницу (не запись), называем её, к примеру, «Обратная связь» (1), даём название ссылке, по которой будут переходить пользователи (2) и в тело (в режиме html-редактора) вставляем код (3) :
Если хотите изменить внешний вид — просто пропишите в CSS-файле темы то, что хотите при помощи элементов, задействованных в форме:
Input{
};
Textarea{
};
Input{
};
К примеру, небольшое изменение стилей в form{}
Плагин Contact Form 7
Хотелось найти конкурентов этому варианту, но так и не удалось.
- Поддержка большого количества полей (в том числе Капча и Прикрепление файлов, об этом чуть ниже);
- Наличие русского языка;
- Поддержка AJAX (отправка сообщения происходит без перезагрузки страницы);
- Простота в редактировании форм.
Всё это — лишь те достоинства, которые бросились в глаза сразу после установки.
Скажу сразу, что если вы хотите включить ввод капчи при отправке сообщения, то понадобится установить ещё один плагин. Если же нет — качайте только сам CF7. Пожалуй, это условие — единственный минус данной формы обратной связи.
Есть альтернатива капче — это поле вопрос-ответ: вы сами придумываете любое количество проверочных вопросов и ответов, а плагин будет выводить их в случайном порядке. Мы рассмотрим оба способа.
Шаг 1. Установка.
В админке WP зайдите в раздел «Плагины» -> «Добавить новый». На этой странице найдите кнопку «Загрузить плагин», после чего выберите скачанный выше архив, загрузите его и активируйте.
По умолчанию для вас уже будет создана первая форма, которую можно отредактировать. Этим и займёмся.
Шаг 2. Настройка формы.
Изначально у нас простая форма вроде той, которую создали вручную. Но при нажатии на «Сгенерировать тег» раскрывается список со всеми функциями. Рассмотрим на примере капчи и вопроса-ответа.
Капча
Напомню ещё раз, что для работы этой опции понадобится сторонний плагин. После его установки выбираем пункт «CAPTCHA» и получаем окно с настройками.
Вставляем код, оформляем его, сохраняем форму и на выходе получаем рабочую защиту от спама:
Этот способ работает без дополнительных установок, прямо «из коробки».
Каждый вопрос-ответ пишется с новой строки, ответ отделяется знаком ‹‹|››. Выбор вопроса происходит рандомно.
Единственный минус такого способа в том, что он чувствителен к регистру: если в нашем примере кто-то напишет фамилию не так, как мы указали (С маленькой, а не с большой буквы), то ответ будет считаться некорректным .
Существует возможность задать ограничение на размер файла (указывается в байтах, поэтому советую воспользоваться конвертером величин) и возможность указать типы файлов, разрешённые к отправке (через запятую, с маленькой буквы: zip,rar,doc и т.д.).
Настройка шаблона письма и уведомлений
Шаблон — это то, в каком виде вы будете получать письмо, отправленное через форму обратной связи. Если вы добавляли те или иные поля, то проверьте: возможно, вам нужно будет добавить пару тегов в шаблон. Например, в случае с отправкой файлов появляется тег, который необходимо поместить в шаблон, чтобы до вас дошли загруженные файлы:
Настройка уведомлений (сообщения об успешной отправке и т.д.) — это дело личное; надписи по умолчанию вполне понятны.
Шаг 3. Создание страницы обратной связи.
Остаётся только создать новую страницу (в примере формы без плагинов этот процесс уже описан) и в режиме html-редактора вставить тег вашей формы (он указан в Шаге 1). Задаём странице адрес, по которому её найдут пользователи, после чего нажимаем на «Опубликовать». Готово!
На своих сайтах я чаще использую вариант без плагинов, т.к. расширенный функционал мне не нужен: большая часть вопросов решается прямо в комментариях. Если ведёте блог – считаю, что «лёгкого» метода хватит. Если же нужно получать более полную обратную связь – Contact Form 7 вне конкуренции как в этом споре, так и в сравнении с аналогичными плагинами.
Форма обратной связи присутствует на каждом сайте, это что-то вроде неотъёмная часть веб-ресурса. Поскольку она служит обращением к администратору с каким-либо предложением или претензией в области своих интересов. А такие случаи бывают часто, тем более, если вы являетесь фирмой, организацией или просто частным предприятиям выпускающий какой-то продукт.
Для создания формы обратной связи на 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 форма обратной связи будет в шаблоне страниц. За вывод отвечает файл page.php в папке темы.
Предупреждаю сразу, шаблоны разные у всех, поэтому вывод страниц может осуществляться посредством другого файла.
Находится в папке с вашей активной темой, надо открыть его в любом редакторе, буду показывать наглядно здесь. Для начала покажу содержимое своего page.php.
Страница:
()
