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

Здравствуйте! Сегодня будем делать форму обратной связи без использования плагинов, для сайта на WordPress.

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

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

Валидный код — это код страницы сайта, который соответствует неким правилам и требованиям.

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

 

Создание формы обратной связи

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

Выглядит она следующим образом:

Создайте файл с названием mail.php (Можете создать обычный текстовый документ и переименовать его, не забудьте вместо .txt указать формат .php) и поместите его в папку с  вашей темой (Ваш.сайт/wp-content/themes/ваша тема/mail.php). Теперь можно открыть этот файл в админке блога во вкладке Внешний вид/Редактор или же используйте html редактор Notepad++ и вставьте в него следующий код:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv='refresh' content='3; url=https://uznipc.com/'></meta>
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['sub'])) {$sub = $_POST['sub'];}
if (isset($_POST['body'])) {$body = $_POST['body'];}

$address = "seregadadk@mail.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 "Сообщение отправлено, через 3 секунды вы вернетесь на главную страницу.";
}
else 
{
echo "Сообщение не отправлено, проверьте правильность заполнения полей.";
}
?>

Давайте разберем код. Строка под номером 2 отвечает за переадресацию на указанную вами страницу через 3 секунды. Время вы можете изменить, заменив число в «content=’3;» на свое.

В 9 строке укажите ваш E-mail адрес, на который будут приходить письма.

Строки 14 и 18 измените на свое усмотрение или оставьте как есть.

На этом закончим с настройками файла mail.php и перейдем к вставке его на блог.

 

Вставка формы обратной связи

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

Для ее вывода используем следующий код:

<form name="MyForm" action="/wp-content/themes/Ваша Тема/mail.php" method="post">
<p><input class="input" name="name" type="text" style="width:32%" value="  Ваше имя *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><input class="input" name="email" type="text" style="width:31%" value="  Ваш E-mail адрес *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><input class="input" name="sub" type="text" style="width:32%" value="  Тема сообщения" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></p>

<p><textarea name="body" cols="1" rows="3" style="width:98%; height: 150px;" onfocus="if(this.value=='Текст сообщения'){this.value=''};"  onblur="if(this.value==''){this.value='Текст сообщения'}" >Текст сообщения</textarea></p>
<p><input value="Отправить сообщение" type="submit" /></p>
</form>

Подкорректируйте в 1 строке путь к файлу mail.php. Редактируйте под себя названия, высоту, ширину, расположение полей. Для этого замените или добавьте стили в «style=»width:31%; Ваш стиль;»».

Если на почту вам приходят невразумительные иероглифы или квадраты, сохраните файл mail.php в кодировке UTF-8 без BOM с помощью редактора Notepad++.

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