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

Здравствуйте! Сегодня будем делать форму обратной связи без использования плагинов, для сайта на 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, или же задать их непосредственно в коде вывода формы.

0 0 голоса
Рейтинг статьи
36 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Артем
10 лет назад

Приветствую! Прошу не обижаться, но так статьи для новичков не пишут.
Попробовал поставить ваше решение формы обратной связи. В итоге, сначала не открывалась страница, но это ладно. Но потом, начал смотреть внимательнее код, оказалось, требуется кроме адреса главной страницы (что не указано вами в статье) изменить адрес получения писем на свой, что опять же не указано в вашей статье.
Дальше интереснее, при установке и внесении нужных данных оказывается что форма не работает. Выдается, что сообщение отправлено и меня перебрасывает на главную. Но пи этом страница не отображается. Письмо приходит, но с пустыми полями от непонятного адресата.
Я вижу что у вас это форма работает, тогда где может быть ошибка. Решение интересное и если это ваш код, то требуется доработать. И еще, а как решается проблема спама? И как применить стили? Как они называются?
Можете не пропускать мой комментарий, но статью переработайте. Удачи!

Артем
10 лет назад
Ответить на  Сергей

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

Людмила
10 лет назад

Сережа, этим твои советом я тоже воспользовалос. Уже проверила — все работает. Только вот страница, созданная мною для вставки формы отображается только если читать запись или в архиве. На главной её нет. Может я чего не так вставила?

Людмила
10 лет назад
Ответить на  Сергей

Уже все работает как надо. Просто на момент вставки я еще код php в темку не вставила. А сейчас все красиво. Пасибки 😉

Alex
Alex
10 лет назад

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

Vasilionis
10 лет назад

Спасибо за пример! Главное, что реализация формы обратной связи делается без плагина. Все доходчиво изложено в статье как раз для тех, кто не сильно разбирается в сайтостроении. Сделал все, как описано — работает! Правда как описано выше в комментарии, есть недочет как отправление пустой формы. Думаю, глобальной проблемой это не является, по крайней мере, для меня 🙂

Екатерина
10 лет назад

Здравствуйте, Сергей! Спасибо Вам огромное за отличную статью. 🙂 Все получилось с первого раза.

С уважением.

Екатерина
10 лет назад
Ответить на  Сергей

😮 Добавила Ваш блог в избранное, спасибо еще раз.

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

Екатерина
10 лет назад
Ответить на  Сергей

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

Вячеслав
10 лет назад

Сергей,спасибо огромное за статью
с вчерашнего дня бился,пытаясь собрать эту «Форму обратной связи»
и ничего не получалось….
сегодня наткнулся на твою инфу,и о чудо,все заработало
Респект !!!:cool: .

Вячеслав
10 лет назад

Хм…а ведь не все так гладко однако
Сергей,подскажите как сделать что бы форма не разъезжалась при добавлении текста над ней
ну и ,разжуйте «чайнику» как все таки по колдовать над стилями,что бы форма приняла подобие вашей ?

Вячеслав
10 лет назад

Сергей,спс
буду разбираться.

Вячеслав
10 лет назад

Сергей,никак не разберусь с последней (нижней колонкой)
не получается применить стили.в пунктах
8
9
10
не мог бы ты выложить этот конец кода ?

Елена
10 лет назад

Сделала по Вашему описанию, всё работает! СПАСИБО!

Денис
Денис
10 лет назад

При нажатии на отправить выдает
Not Found
The requested URL /mail.php was not found on this server.

Денис
Денис
10 лет назад
Ответить на  Сергей

Нам сайт делали и такой папки нет. Можно как то по другому сделать?

Игорь
9 лет назад

Здравствуйте, спасибо все получилось.
Не против, если я перепечатаю статью у себя в блоге со ссылкой на оригинал статьи?

Владька
8 лет назад

у меня круче 😈
———————-
«Ссылку я перенес в урл»

Виктор
Виктор
7 лет назад

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

36
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
Send this to a friend