ГлавнаяВёрстка WordPress › HTML форма обратной связи для сайта на WordPress!


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


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

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

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

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

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

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

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

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

Итак.

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



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


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

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

<meta http-equiv='refresh' content='5; url=http://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='http://sozdaiblog.ru/'>SOZDAIBLOG.RU</a>";}
else {echo "Ошибка, сообщение не отправлено!";}

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



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

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

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

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

$address = "sozdaiblog@yandex.ru";


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

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

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

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

<h2>Форма обратной связи.</h2>
<form name="MyForm" action="http://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, которая будет исправно работать и не от кого не зависеть.

ДЕМО СКАЧАТЬ

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




48 комментариевА что думаете Вы?

  1. Павел

    Денис, не знаю как сказать. У меня Сын... Короче. Послезавтра свадьба свадьба. И кстати, интернет (вернее люди) помогли мне добраться с наименьшим вложением денег (до Тюмени из Новосибирска). Всем спасибо!

    [Ответить]

    Денис Черников ответил:

    Поздравляю Вас, Павел! Желаю Вам всего наилучшего! Думаю, что к моему поздравлению присоединятся все посетители!

    [Ответить]

    Ильгиз ответил:

    не понятно как сделать стиль CSS формы...

    [Ответить]

    Денис Черников ответил:

    Смотрите в настройках!

    [Ответить]

  2. Татьяна

    Красивая :) Сейчас буду пробовать. Решила, Денис, как только что-то нужное для себя у Вас публикуется, так сразу приступать к осуществлению у себя в блоге. А заметила, что если откладывать, то потом жалею очень. Вот, например, с мобильной версией сайта, пролетела. Сервис уже ограничил такую возможность, видимо.

    [Ответить]

    Денис Черников ответил:

    Рад, что Вам понравилось, Татьяна! На счёт мобильной версии не знаю, мне кажется они просто дизайн сменили, а так всё вроде работает.

    [Ответить]

  3. Сергей Москвитин

    Денис привет!Классная форма мне понравилась надо заменить свою на твою. Фишка понравилась — Зачет.

    [Ответить]

    Денис Черников ответил:

    Привет, Сергей! Спасибо, за одобрение! Если не получится, обращайтесь.

    [Ответить]

    Сергей Москвитин ответил:

    Хорошо. Спасибо Денис.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста!

    [Ответить]

  4. Настя

    Здравствуйте, Денис! Как же я рада, что когда-то нашла ваш блог)) Спасибо огромное за подробную инструкцию! Установила себе такую форму, все работает замечательно! ))

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Настя! Спасибо, за тёплые слова и столь лестный отзыв. Рад, что моя инструкция Вам помогла!

    [Ответить]

  5. Настя

    Денис, подскажите, как сделать, чтобы вокруг полей «Имя», «Электронная почта» и «Тема» тоже была рамочка, как вокруг поля «Текст сообщения».

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Настя ответил:

    Буду очень признательна, если подскажите)) А то у меня эти поля полностью сливаются с фоном ((

    [Ответить]

    Денис Черников ответил:

    Так поменяйте цвет полей или фона, или букв!

    [Ответить]

  6. Настя

    Эх, да если б я еще знала как поменять фон)) Пробовала, что-то совсем ничего не выходит.

    [Ответить]

    Денис Черников ответил:

    Учитесь, Настя! Изучайте HTML и CSS.

    [Ответить]

  7. Павел

    Доброго времени.

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Павел! Пожалуйста! На счёт сайта, не пробовал!

    [Ответить]

  8. Павел

    надо будет поэкспериментировать...Не против если Вам потом пришлю?

    [Ответить]

    Денис Черников ответил:

    Да нет, пожалуйста!

    [Ответить]

    Павел ответил:

    добавил в mail.php

    mail ( «magazintranzit@gmail.com», «Письмо с сайта ......»,

    $message, $headers );

    вроде работает :)

    [Ответить]

    Денис Черников ответил:

    Замечательно!

    [Ответить]

  9. Светлана

    А у меня не получилось! Форма появилась, но письма не приходят и после нажатия кнопки отправить, вместо фразы «Сообщение отправлено, через 5 секунд Вы будете направлены на главную страницу,где сможете продолжить просмотр» появляются вопросительные знаки.

    [Ответить]

    Денис Черников ответил:

    Вы кодировку не соблюли!

    [Ответить]

    Светлана ответил:

    Это как? Делала все как написано.

    [Ответить]

    Денис Черников ответил:

    Это когда при копировании и сохранении любого документа ставится кодировка UTF-8! Пока Вы её не поставите так и будут знаки вопросов вместо русских букв.

    [Ответить]

  10. Юрий

    Здравствуйте! спасибо за код, но рамки очень маленькие можно увеличить? если да, то подскажите в каком месте нужно подправить.

    [Ответить]

  11. Юрий

    Еще почему-то перебрасывает на твой блог, хотя я менял в mail.php. + письма не приходят(

    [Ответить]

  12. Юрий

    А все подправил, мой косяк)

    [Ответить]

    Денис Черников ответил:

    Отлично, Юрий!Рад, что Вы справились без моей помощи.

    [Ответить]

  13. Даниля

    Спасибки!!!!!!!!!!!!!Супер!!!!!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, заходите ещё!

    [Ответить]

  14. Евгений

    Все сделал как написано, сообщение отправляет, но выдает сообщение: Вы заполнили не все поля, необходимо вернуться назад! В чем может быть проблема?

    [Ответить]

    Денис Черников ответил:

    Значит не все или крокозябры вписали! Пишите нормальным языком и всё должно быть хорошо!

    [Ответить]

  15. Евгений

    Спасибо, Денис! Форма работает на «отлично», но есть потребность в плавающей форме обратной связи...Может быть подскажете какое-нибудь решение? Заранее спасибо!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Евгений!

    Что значит плавающей?

    [Ответить]

  16. Сергей Субботин

    Для сайта-одностраничника сделал форму обратной связи, сделал и установил обработчик mail.php как у Вас описано (все проверял). При проверке отправки письма выдается сообщение -письмо отправлено, однако письма на почтовый ящик «администратора» сайта НЕ ПОСТУПАЮТ. Почему и что сделать, чтобы письма приходили. Сайт, правда, на бесплатном хостинге Hostinger.

    [Ответить]

    Денис Черников ответил:

    Если всё сделано правильно, то должны приходить 100%! У меня эта форма на других сайтах стоит и всё приходит. Да и тест тоже работает! Смотрите внимательнее! На счёт хостинга не знаю, не проверял!

    [Ответить]

  17. Ирина

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

    Если мы вставляем файл mail.php в нашу тему, то необходимо прописывать полный путь к этому файлу? Можно пример?

    [Ответить]

    Денис Черников ответил:

    Вы работаете через FTP клиента?

    [Ответить]

    Ирина ответил:

    Да, я работаю через Filezilla

    [Ответить]

    Денис Черников ответил:

    Когда в Filezilla Вы доходите до необходимого файла то там в верхней строке можно увидеть этот путь, как в Windows, добавляете в конце название самого файла, а в начале отсекаете всё лишнее до доменного имени! Это и будет адрес до картинки. Только не забудьте в начале http прописать, как у всех ссылок!

    [Ответить]

  18. Антон

    А есть возможность добавить отсылку файла с формой?

    [Ответить]

    Денис Черников ответил:

    Не в этой форме!

    [Ответить]

  19. Eva

    Спасибо, идея понравилась, хочу попробовать.

    Скажите, а это форму можно будет потом вставлять на любые страницы сайта?

    И можно ли сделать так, чтобы на почту приходило уведомление с какой страницы был отправлен запрос?

    Например, форма обратной связи будет установлена на странице №1, №2, №5.

    И вот когда на почту администратора приходит запрос, то, чтобы администратор видел с какой страницы (1,2,5) было отправлено это письмо.

    Спасибо!

    P.S. сегодня утром нашла Ваш блог, весь день не могу оторваться, т.к. пишете очень полезную информацию, а ко всему прочему ещё и русским языком, а не программистским ) приятно!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Стараюсь! Форму можно ставить на любые страницы! А на счёт с какой, сомневаюсь!

    [Ответить]

Оставить комментарий!

Вверх