Форма обратной связи для WordPress

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

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

  1. Форма обратной связи без плагинов
  2. Плагин Contact Form 7

Форма обратной связи без использования плагинов

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

  1. Имя;
  2. E-mail;
  3. Тема письма;
  4. Поле для текста.

Шаг 1

Подключаемся к хостингу и заходим в папку темы, которую сейчас используете на WordPress. Задача — создать в ней новый php-файл. Название — любое. Я сделаю «feedback.php».

feedback.php

Шаг 2

Открываем созданный файл в текстовом редакторе и вставляем в него код:

<meta http-equiv='refresh' content='0; url=http://ВАШСАЙТ/'>
<meta charset="UTF-8" />
<?php
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

Страница feedback

В админке WordPress создаём новую страницу (не запись), называем её, к примеру, «Обратная связь» (1), даём название ссылке, по которой будут переходить пользователи (2) и в тело (в режиме html-редактора) вставляем код (3) :

<form action="/wp-content/themes/ПАПКА-ВАШЕЙ-ТЕМЫ/feedback.php" method="post" name="MyForm">
<p><input class="input" name="name" type="text" /> Ваше имя</p>
<p><input class="input" name="email" type="text" /> Электронная почта</p>
<p><input class="input" name="sub" type="text" /> Тема сообщения</p>
<p>Текст сообщения:
<textarea cols="1" name="body" rows="5"></textarea></p>
<input type="submit" value="Отправить" />
</form>

Обратная связь

Если хотите изменить внешний вид — просто пропишите в CSS-файле темы то, что хотите при помощи элементов, задействованных в форме:

form {
};

input[type=text]{
};

textarea{
};

input[type="submit"]{
};

К примеру, небольшое изменение стилей в form{}

Оформленная страница

Плагин Contact Form 7

Хотелось найти конкурентов этому варианту, но так и не удалось.

  1. Поддержка большого количества полей (в том числе Капча и Прикрепление файлов, об этом чуть ниже);
  2. Наличие русского языка;
  3. Поддержка AJAX (отправка сообщения происходит без перезагрузки страницы);
  4. Простота в редактировании форм.

Всё это — лишь те достоинства, которые бросились в глаза сразу после установки.

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

Есть альтернатива капче — это поле вопрос-ответ: вы сами придумываете любое количество проверочных вопросов и ответов, а плагин будет выводить их в случайном порядке. Мы рассмотрим оба способа.

Шаг 1. Установка.

Скачать CF7 | Скачать Really Simple CAPTCHA

В админке WP зайдите в раздел «Плагины» -> «Добавить новый». На этой странице найдите кнопку «Загрузить плагин», после чего выберите скачанный выше архив, загрузите его и активируйте.

Загрузить плагин

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

Первая форма

Шаг 2. Настройка формы.

Изначально у нас простая форма вроде той, которую создали вручную. Но при нажатии на «Сгенерировать тег» раскрывается список со всеми функциями. Рассмотрим на примере капчи и вопроса-ответа.

Капча

Напомню ещё раз, что для работы этой опции понадобится сторонний плагин. После его установки выбираем пункт «CAPTCHA» и получаем окно с настройками.

CAPTCHA

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

Защита от спама

Вопрос-Ответ

Этот способ работает без дополнительных установок, прямо «из коробки».

Вопрос-Ответ

Каждый вопрос-ответ пишется с новой строки, ответ отделяется знаком ‹‹|››. Выбор вопроса происходит рандомно.

Форма с вопросом

Единственный минус такого способа в том, что он чувствителен к регистру: если в нашем примере кто-то напишет фамилию не так, как мы указали (С маленькой, а не с большой буквы), то ответ будет считаться некорректным.

Отправка файлов

Отправка файлов

Существует возможность задать ограничение на размер файла (указывается в байтах, поэтому советую воспользоваться конвертером величин) и возможность указать типы файлов, разрешённые к отправке (через запятую, с маленькой буквы: zip,rar,doc и т.д.).

Настройка шаблона письма и уведомлений

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

Тег

Настройка уведомлений (сообщения об успешной отправке и т.д.) — это дело личное; надписи по умолчанию вполне понятны.

Шаг 3. Создание страницы обратной связи.

Остаётся только создать новую страницу (в примере формы без плагинов этот процесс уже описан) и в режиме html-редактора вставить тег вашей формы (он указан в Шаге 1). Задаём странице адрес, по которому её найдут пользователи, после чего нажимаем на «Опубликовать». Готово!

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

Добавить комментарий

Ваш e-mail не будет опубликован.