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

Здравствуйте, дорогие друзья и читатели – Sozdaiblog.ru!

Сегодняшний пост расскажет Вам о том, как легко и просто создаётся HTML форма обратной связи для сайта на WordPress, без каких-либо плагинов и всевозможных генераторов.

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

В тот день я получил достаточное количество отзывов, как положительных, так и отрицательных.

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

Что же касается отрицательных, то в них люди с недоверием отнеслись к стороннему сервису, который обязывает их быть привязанными к этой системе и постоянно мониторить её работоспособность.

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

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

Итак.

HTML форма обратной связи.

Чтобы сделать собственную HTML форму обратной связи Вам необходимо создать пустой текстовый документ с расширением .PHP (назовём его mail.php).

Затем открываем его для редактирования с помощью Notepad++ и вставляем следующий код:

<meta http-equiv='refresh' content='5; url=https://sozdaiblog.ru'>
<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 = "sozdaiblog@yandex.ru";
$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 "Сообщение отправлено, через 5 секунд Вы будете направлены на главную страницу,
где сможете продолжить просмотр <a href='https://sozdaiblog.ru/'>SOZDAIBLOG.RU</a>";}
else {echo "Ошибка, сообщение не отправлено!";}

}
else
{
echo "Вы заполнили не все поля, необходимо вернуться назад!";
}
?>

Давайте немного его разберём.

Первая строчка кода, после отправки сообщения автоматически перенаправляет посетителя по ссылке, которую Вы в ней укажете. Число 5 означает время (секунды), через которое должно произойти перенаправление.

Дальше идёт кодировка отображения UTF-8 и четыре строки, отвечающие за информационные поля.

Самая важная строка:

$address = "sozdaiblog@yandex.ru";

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

Всё остальное – это предупреждающая информация, которую каждый из Вас сможет настроить самостоятельно.

Закончив редактирование, с помощью FTP-клиента закидываем этот файл в папку с Вашей активной темой оформления сайта.

Теперь создаёте на своём сайте новую страницу и вставляете в неё вот такой код (режим HTML-редактора):

<h2>Форма обратной связи.</h2>
<form name="MyForm" action="https://sozdaiblog.ru/demo.js/contact/mail.php" method="post">
<p><input class="input" name="name" type="text" style="width:15%" /> Ваше имя*</p>

<p><input class="input" name="email" type="text" style="width:15%" /> Электронная почта*</p>

<p><input class="input" name="sub" type="text" style="width:15%" /> Тема сообщения</p>

<p>Текст сообщения:<br /><textarea name="body" cols="1" rows="5" style="width:30%" /></textarea></p>
<p><input  id="submit" value="Отправить" type="submit" /></p>
</form>

В этом коде Вы должны отредактировать вторую строчку, вписав в неё путь к файлу mail.php.

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

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

#submit {
font-family: sans-serif;
color: #ffffff;
font-size: 18px;
padding: 0px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ce1515), to(#8b0d0d));
background: -moz-linear-gradient(top, #ce1515, #8b0d0d);
}

#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#8b0d0d), to(#ce1515));
  background: -moz-linear-gradient(top, #8b0d0d, #ce1515)
}
#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

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

На сегодня, это всё. Надеюсь, что данный пост был Вам полезен.

С уважением, Денис Черников!