Sozdaiblog.ru
Назад

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

Опубликовано: 27.05.2013
Время на чтение: 9 мин
48
215

 

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=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, которая будет исправно работать и не от кого не зависеть.

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

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

Поделиться
Похожие записи
  • Павел
    Опубликовано: 26.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 26.06.2013 Ответить на сообщение

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

      • Ильгиз
        Опубликовано: 25.03.2014 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 25.03.2014 Ответить на сообщение

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

  • Татьяна
    Опубликовано: 26.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 26.06.2013 Ответить на сообщение

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

  • Сергей Москвитин
    Опубликовано: 26.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 26.06.2013 Ответить на сообщение

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

      • Сергей Москвитин
        Опубликовано: 26.06.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 26.06.2013 Ответить на сообщение

          Пожалуйста!

  • Настя
    Опубликовано: 27.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.06.2013 Ответить на сообщение

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

  • Настя
    Опубликовано: 27.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.06.2013 Ответить на сообщение

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

      • Настя
        Опубликовано: 27.06.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.06.2013 Ответить на сообщение

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

  • Настя
    Опубликовано: 27.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.06.2013 Ответить на сообщение

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

  • Павел
    Опубликовано: 02.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.07.2013 Ответить на сообщение

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

  • Павел
    Опубликовано: 02.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.07.2013 Ответить на сообщение

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

      • Павел
        Опубликовано: 02.07.2013 Ответить на сообщение

        добавил в mail.php
        mail ( «magazintranzit@gmail.com», «Письмо с сайта ......»,
        $message, $headers );
        вроде работает

        • Денис Черников
          Опубликовано: 02.07.2013 Ответить на сообщение

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

  • Светлана
    Опубликовано: 22.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.07.2013 Ответить на сообщение

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

      • Светлана
        Опубликовано: 22.07.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 22.07.2013 Ответить на сообщение

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

  • Юрий
    Опубликовано: 17.08.2013 Ответить на сообщение

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

  • Юрий
    Опубликовано: 17.08.2013 Ответить на сообщение

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

  • Юрий
    Опубликовано: 17.08.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 17.08.2013 Ответить на сообщение

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

  • Даниля
    Опубликовано: 22.09.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.09.2013 Ответить на сообщение

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

  • Евгений
    Опубликовано: 01.11.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 01.11.2013 Ответить на сообщение

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

  • Евгений
    Опубликовано: 16.11.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.11.2013 Ответить на сообщение

      Пожалуйста, Евгений!
      Что значит плавающей?

  • Сергей Субботин
    Опубликовано: 28.11.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 29.11.2013 Ответить на сообщение

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

  • Ирина
    Опубликовано: 19.01.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

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

      • Ирина
        Опубликовано: 27.01.2014 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.01.2014 Ответить на сообщение

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

  • Антон
    Опубликовано: 12.09.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 12.09.2014 Ответить на сообщение

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

  • Eva
    Опубликовано: 23.01.2015 Ответить на сообщение

    Спасибо, идея понравилась, хочу попробовать.
    Скажите, а это форму можно будет потом вставлять на любые страницы сайта?
    И можно ли сделать так, чтобы на почту приходило уведомление с какой страницы был отправлен запрос?
    Например, форма обратной связи будет установлена на странице №1, №2, №5.
    И вот когда на почту администратора приходит запрос, то, чтобы администратор видел с какой страницы (1,2,5) было отправлено это письмо.
    Спасибо!
    P.S. сегодня утром нашла Ваш блог, весь день не могу оторваться, т.к. пишете очень полезную информацию, а ко всему прочему ещё и русским языком, а не программистским ) приятно!

    • Денис Черников
      Опубликовано: 23.01.2015 Ответить на сообщение

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