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

Главная » Создание блога » Обходимся без плагинов » Готовая форма обратной связи на PHP без плагинов

Готовая форма обратной связи на PHP без плагинов

2014-01-26 автор: Виталий Кириллов

Здравствуйте уважаемые читатели блога seo-mayak.com. Хотел у Вас спросить, на Вашем сайте есть форма обратной связи? Глупый вопрос наверное, но я не зря его задал.

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

Я же хочу предложить Вам готовую форму обратной связи на PHP без использования каких-либо плагинов и сервисов. Чисто «ручная» работа.

forma obratnaya svyazi

Я понимаю, что у многих веб-мастеров при слове PHP, поднимается давление, а в памяте всплывают моменты неприятного знакомства с этим языком программирования.

Ребята, не стоит боятся! Не такой он страшный этот PHP, как кажется!

Не так давно я понятия не имел, что это за «зверь» такой и как многие опасался иметь с ним дело. Ведь он при малейшей оплошности, «рушит» WordPress без всякого сожаления.

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

Так вот, без применения php, о качественном Юзабилити можно забыть. Конечно, многого можно добиться средствами HTML и CSS, но основной функционал WordPress строиться все-таки на php. Ведь не зря большинство файлов шаблона имеют соответствующее расширение.

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

Процесс внедрения формы связи, для удобства восприятия, я разделил на 5 этапов. Поехали!

Этап №1. PHP обработчик сообщений и его функции

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

Первое, что нам надо будет сделать — это создать новый php файл. Для выполнеия сей задачи, запускаем текстовый редактор Notepad++, жмем на вкладку «Файл» и выбираем пункт «Новый»:

obratnaya svyaz'1

Далее, копируем в созданный файл код обработчика сообщений.

Вот сам код:

<title>Сообщение успешно отправлено</title>
<?php
/*** Функция проверки переменных, введенных в форму. Если таких нет, то они создаются.
   Если формой были переданы пустые значения, то функция их удаляет ***/
if (isset($_POST['MayakSend'])){
if (isset($_POST['from_whom'])) {$from_whom = $_POST['from_whom']; if ($from_whom == '') {unset($from_whom);}}
if (isset($_POST['postal_address'])) {$postal_address = $_POST['postal_address']; if ($postal_address == '') {unset($postal_address);}}
if (isset($_POST['topic'])) {$topic = $_POST['topic']; if ($topic == '') {unset($topic);}}
if (isset($_POST['the_message'])) {$the_message = $_POST['the_message']; if ($the_message == '') {unset($the_message);}}

/*** Сбор дополнительной информации об отправителе сообщения ***/
$date=date("d.m.Y"); // число.месяц.год
$time=date("H:i"); // часы:минуты:секунды

/*** Функция проверки заполнения полей ***/
if (isset($from_whom) && isset($postal_address) && isset($topic) && isset($the_message))
{

/*** Данная функция удаляет все пробелы и преобразует HTML теги в символы ***/
$from_whom = htmlspecialchars(trim($from_whom));
$postal_address = htmlspecialchars(trim($postal_address));
$topic = htmlspecialchars(trim($topic));
$the_message = htmlspecialchars(trim($the_message));

/*** Формирование сообщения ***/
$address = "Ваш email-адрес"; // Сюда вписываем свой е-mail!!!!
$sub = "Сообщение с блога";
$message = "Автор назвался: $from_whom \nОставил такой E-mail: $postal_address \nIP автора: \nБраузер отправителя: \nДата отправки: $date \nВремя отправки:$time \nIP адрес отправителя:\nСообщение на тему: $topic \nТекст сообщения: \n $the_message";

/*** Отправка сообщения ***/
$verify = mail ($address,$sub,$message,"Content-type:text/plain; charset = UTF-8\r\nFrom:$from_whom");
      if ($verify == true)
    {
       echo "<body bgcolor='609df9'>
<div style='margin-top: 30px'><table border='1' width='450' align='center' cellpadding='20' cellspacing='6' bgcolor='white'>
<tr>
<td>
<div style='margin'><div align='center'>Ваше сообщение успешно отправлено! <p>Вернуться на <a href='URL Вашего сайта'><font size='+1'>Название Вашего сайта</font></a></div>
<img src='http://img-fotki.yandex.ru/get/6408/135756646.0/0_636aa_9c2e9632_L.jpg'>
<p><div align='center'>Я обязательно прочту Ваше сообщение, и постараюсь ответить как можно быстрей!</div>
<p><div align='right'><i><b>C уважением, Ваше Имя</b></i></div>
</tr>
</td>
</table></div>";
      }
      else
      {
      echo "Сообщение не отправлено!";
      }
      }
     else
{
echo "Вы заполнили не все поля!";
}
}
?>

Далее, в редакторе Notepad++ выбираем «файл» -> «Сохранить как»:

obratnaya svyaz'2

Называем файл contacts.php и сохраняем в любое удобное место на своем компьютере, например в специально созданной папке «Форма обратной связи»:

obratnaya svyaz'3

В пояснениях к коду многое уже было объяснено и я уже не буду повторятся, но на кое-какие строчки все же обращу Ваше внимание.

Строчка №26. Вписываем email-адрес, на который будут доставляться сообщения.

Строчка №38. В местах, где я написал «URL Вашего сайта» и «Название Вашего сайта», вписываем соответственно URL и название Вашего проекта.

Строчка №39. Я уже подготовил для Вас изображение, не если Вы хотите вставить свое, то пропишите путь до картинки с расширением .png,.png,.gif, максимальная ширина которого не должна превышать 400px. Высота может быть любой.

Строчка №40. Если не нравиться мой вариант обращения к автору сообщения, придумайте что-то свое и замените текст.

Далее, сохраняем изменения и запускаем FTP клиент FileZilla. В левом окне программы находим сохраненный файл contacts.php, а в правом окне отрываем папку с названием своего шаблона (темы).

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

obratnaya svyaz'4

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

Этап №2 Функция формы обратной связи с математической капчей

На втором этапе нам не надо будет совершать столько действий, но внимательности потребуется не меньше, так как редактировать мы будет файл functions.php.

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

Итак, открываем для редактирования файл funttions.php и в самый конец, перед знаком ?> вставляем такую функцию:

function mayak_form($attr, $content = null){
return
'<div class="contact">
<form  action="Путь до файла contacts.php" method="post" >
<h4>Форма связи с администратором</h4>
<table>
<body>
<tr>
<td><input type="text" name="from_whom" title="Введите Имя" placeholder=" Имя"/></td>
<td><input type="text" name="postal_address" id="postal_address" pattern="|^[-0-9A-Za-z_\.]+@[-0-9A-Za-z^\.]+\.[a-z]{2,6}$|i" title="Введите правильный email-адрес" placeholder=" E-mail"/></td>
<td><input type="text" name="topic" title="Введите тему" placeholder=" Тема" /></td>
</tr>
</body>
</table>
<input type="text" name="MayakSend" style="display:none;" value="1" />
<textarea  cols="60" rows="15" name="the_message" title="Введите текст сообщения"  placeholder=" Введите текст"></textarea><br />
<p><label for="text"></p>Сколько будет 20 - 10 ?</label>
<input class="capcha" type="text" name="example" id="example" style="width:80px;" title="Введите число"  onchange="mayak_example_cap()();" /><input type="button" style="background:#FFD39B;" value=" Проверить " onclick="mayak_example_cap()();" />
<div id="resultcap"></div>
<p><input style="display:none; margin: 5px auto; background:#9F79EE;" type="submit" value="Отправить" id="submit" class="submit" /></p>
</form>
</div>';
}
add_shortcode('contact-form', 'mayak_form');

Вставляем функцию в самое начало файла после знака <?php.

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

Строчка №4. Здесь надо прописать путь до файла contacts.php.

Строчка №16. Здесь прописаны html атрибуты для текстового поля:

cols="60" — Данный атрибут задает ширину текстового поля. Значение 60 рассчитывается относительно числа символов одинаковой ширины, помещающихся в одну строчку. Изменяя данное значение, мы можем регулировать ширину текстового поля.

rows="15" — Задает высоту текстового поля. Его значения рассчитывается также, как для атрибута сols.

Строчка №17. В данной строчке нет стилей, но там прописан пример для капчи:

Сколько будет 20 — 10 ?

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

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

Строчка №18. Ближе к концу строчки вы найдете такой стиль:

style="background:#FFD39B;"

Это не что иное, как цвет кнопки «Проверить». Если потребуется, то его можно поменять на любой другой.

Строчка №20. В этой строчке прописаны такие стили:

style="display:none; margin: 5px auto; background:#9F79EE;"

Селектор display со значением none скрывает кнопку «Отправить» до того момента, пока пример не будет решен правильно.

Селектор margin и его значения, устанавливают внешние отступы от копки «Отправить».

background:#9F79EE; — это цвет кнопки, который также можно изменить

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

Сохраняем изменения и переходим к следующему этапу установки.

Этап №3. Подключение скрипта-обработчика капчи к форме обратной связи

На сомом деле скрипт к форме уже подключен, его лишь надо вставить в нужное место.

В текстовом редакторе Notepad++ открываем для редактирования файл footer.php и в самый конец, после закрывающего тега:

</body>

Вставляем следующее:

<script>function mayak_example_cap() {var TitleResuly = document.getElementById("resultcap");var number =
document.getElementById("example").value;var submity = document.getElementById("submit");if (number != "10")
{TitleResuly.innerHTML = "Вы не верно решили пример";submity.style.display = "none";} else {TitleResuly.innerHTML =
"";submity.style.display = "block";}};</script>

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

Хочу обратить Ваше внимание на две строчки данного обработчика:

Строчка №3. Ищем участок кода, что находиться в самом конце строки:

if (number != "10")

Где цифра 10 — правильный ответ на математический пример. Понятно, если изменить сам пример, то и правильный ответ указать надо будет соответствующий.

Строчка №4. В данной строчке прописывается сообщение, которое будет появляться, при неправильном решении математической задачки. Текст можете придумать сами.

Идем дальше.

Этап №4. Подключение стилей к форме обратной связи

Опять же, с помощью Notapad++ открываем для редактирования файл style.css и в самый конец вставляем следующее:

.contact form{              /* Общие стили */
   width: 530px;            /* Длина формы */
   margin: 10px auto;       /* Внешние отступы до краев таблицы */
   text-align: center;      /* Положение по-центру */
   border-radius: 10px;     /* Закругленные края */
   border: 1px solid #ccc;  /* Рамка */
   background: #F5F5DC      /* Общий цвет фона */
}
.contact td {               /* Стили для полей ввода "Имя", E-mail, "Тема" */
   width: 165px;            /* Длина полей */
   margin: 10px 1px;        /* Внешние отступы */
   float: left;             /* Обтекание элементов по левому краю */
}
.contact input {
   height:25px;             /* Высота полей */
   border-radius: 6px;      /* Закругленные края */
   border: 1px solid #ccc;  /* Рамка */
}
.contact textarea{          /* Стили для текстового поля */
   border-radius: 6px;      /* Закругление краев*/
   border: 1px solid #ccc;  /* Рамка */
}
.contact table{             /* Стили для таблицы */
  margin: 0 auto;           /* Выравнивание по центру */
}
.contact h4{                /* Стили для заголовка формы */
  margin: 10px auto 0;      /* Выравнивание по центру с верхним отступом*/
}
input.capcha{               /* Стили для поля ввода ответа*/
  margin-right: 5px;        /* Внешний отступ справа*/
}
.submit input  {            /* Стили для  */
  text-align: center;       /* Положение по центру */
}

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

Теперь осталось вставить форму непосредственно на страницу.

Этап №5. Установка формы обратной свази

Создаем страницу под названием «Контакты» или «Обратная связь» и неважно в каком режиме редактора WordPress, вставляем такой шорткод:

[contact-form]

Опубликовываем страницу и вуаля, вот наша форма:

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

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

Просматривается аналогия с плагином Contact Form 7, о котором я упоминал в начале статьи.

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

Внимание! Можно расширить функцию сбора дополнительной информации об отправителе сообщения! Чтобы узнать, как это сделать, надо стать подписчиком блога seo-mayak.com и написать мне через вышеприведенную форму обратной связи.

На сегодня у меня все!

До новых встреч!

С уважением, Виталий Кириллов