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

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

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

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

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

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

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

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

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

Alex
Alex
9 лет назад

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

Vasilionis
9 лет назад

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

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

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

С уважением.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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