Форма обратной связи html css шаблон

Код простой формы обратной связи для сайта на HTML и PHP

2019.08.11 Viktar Haurylavets

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему используется HTML и PHP?

Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» — ненужных стилей и скриптов. Так как эти плагины все равно выдают в результате тот же код HTML, то предлагаю использовать простую, но полноценно функциональную форму, которую можно изменить под свои нужны, например, под обратный звонок с сайта.

Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.

Структура кода реализации обратной связи для сайта

Далее приведен алгоритм работы обратной связи:

1. Код HTML формы, вставленный на страницу + CSS стили для его оформления.
2. PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.

В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.

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

Вначале приведем исходный код простой формы обратной связи для сайта на HTML:

 
 Имя * Номер телефона (с кодом) * Сообщение 
 

Сама форма находится между HTML тегами . Тегу присвоен CSS класс class=»form-zvonok» , который используется для реализации отображения через CSS стили.

Рассмотрим атрибуты формы

• autocomplete=»off» — автозаполнение формы отключено, при повторном заходе на страницу все поля ввода будут обнулены. Рекомендуется автозаполнение отключать, так как при включенном иногда возникали проблемы, что при изменении значений полей формы отправлялись на сервер старые значения.
• Атрибут action=’email.php’ , в нём указан адрес скрипта, в данном случае PHP, который вызывается и которому передаются данные формы после нажатия кнопки «Отправить» . Если указан не полный путь к скрипту, как здесь, то обращение будет с адреса, на котором размещена форма. Например форма находится по этому адресу http://site.com/feed-back , тогда обращение будет http://site.com/feed-back/email.php . Так же это может быть любой путь, по которому обрабатывается запрос.
• Атрибут method=’post’ , в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод GET отправляет данные формы через адресную строку. В этом случае после адреса строки появляется вопросительный знак «?» после которого идут название поля, его значение, что является небезопасным способом отправлять данные формы. Так, учитывая SEO оптимизацию сайта, данные формы обратной связи для сайта лучше отправлять методом POST, так как данные передаются скрытно, а в случае метода GET у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими параметрами после «?», что приведет к дублям страниц.

Далее внутри тега находится контейнер с CSS классом class=»form-zvonok» , он отвечает за компоновку полей ввода и подписей к ним.

Внутри этого контейнера, находятся другие div содержащие теги подписей и полей ввода . А в самом конце размещено поле — кнопка «Отправить» , при нажатии на которую происходит отправка данных формы браузером

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

Отправка письма PHP скриптом

Приведем код простого скрипта для отправки письма

Чтобы отправить письмо на нужный email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение. $headers — шапка письма, в ней указывается тип письма, например HTML, а также: кодировка, от кого доставлено письмо и на какой emal отправлять ответ.

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

 if(isset($_POST["usernumber"])) < $number = trim(strip_tags($_POST["usernumber"])); >if (isset( $_POST["question"])) < $question = trim(strip_tags($question)); >// Формируем письмо $message = ""; $message .= ""; $message .= "Телефон: ".$number; $message .= "
"; $message .= "Имя: ".$name; $message .= "
"; $message .= "Вопрос: ".$question; $message .= ""; $message .= ""; // Окончание формирования тела письма // Посылаем письмо mail ($to, $subject, $message, $headers); > else < exit; >?> 

$_SERVER["REQUEST_METHOD"] == "POST"

проверяем или используется метод POST

Далее проверяем или были высланы данные с полей ввода

Обратите внимание, что в конструкции $_POST[«username»] название поля совпадает с именем поля username в форме . Поэтому на одной странице названия полей должны быть уникальны, иначе они будут переписывать друг друга.

Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.

Функция trim() удаляет пробелы в начале и в конце строки. Далее формируем письмо и все что подготовили отправляем функцией mail() .

Оформление формы обратного звонка для сайта CSS

Приведем код CSS оформления для формы обратной связи сайта.

 .obratnuj-zvonok < width: 100%; max-width: 350px; >.form-zvonok < width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; >.form-zvonok div < padding: 15px 0; >.bot-send-mail < box-sizing: border-box; width: 100%; >.form-zvonok label,.form-zvonok input < display: block; width: 100%; box-sizing: border-box; >.form-zvonok label < margin-bottom: 5px; font-weight: bold; >.form-zvonok input < padding: 10px 15px; margin-top: 10px; >.form-zvonok label span < color: red; >.form-zvonok .bot-send-mail < padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; >.form-zvonok .bot-send-mail:hover

Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px , если шире, то форма HTML выглядит растянутой:

Что бы упорядочить поля и кнопку «Отправить» , обертываем их в div , отображение ставим в flex и направление отображения столбцом column . Для красоты добавляем отступы сверху и снизу на 20px:

Подпись и поле ввода обернуты в контейнер div :

Для этого дива присвоим отступы сверху и снизу:

Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:

Аналогично для подписей и полей ввода:

.form-zvonok label,.form-zvonok input

Настраиваем красивый внешний вид подписей и полей ввода:

.form-zvonok label < margin-bottom: 5px; font-weight: bold; >.form-zvonok input

Оформляем кнопку «Отправить» :

При наведении на кнопку настраиваем изменение цвета:

.form-zvonok .bot-send-mail:hover

Обратите внимание, что иногда эти стили могут быть переопределены другими, которые имеют больший приоритет. Что бы усилить приоритет, просто присвойте форме имя через id , например id=»obratnuj-zvonok» и в CSS файлах тогда обращение идет не через точку, как к классам, а через решетку # , например #obratnuj-zvonok . Тогда достаточно добавить к селекторам в CSS файлах в начало #obratnuj-zvonok , что бы повысить приоритет правил.

Скачать исходный код формы обратной связи

Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.

Источник

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

Также как и форма регистрации, практически на любом сайте присутствует форма обратной связи. Она предназначена для связи с администрацией сайта, чтобы любой пользователь смог обратиться к администрации и высказать свою просьбу/жалобу/предложение. И в этом уроке мы создадим каркас такой формы и придадим вид с помощью CSS3. Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

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

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

Если вы изучали прошлые статьи, то в данном HTML коде ничего нового вы не увидите:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

div class="cover"> h2 class="contact">Напишите мне/h2> form id="contactform"> p class="contact">label for="name">Имя/label>/p> input id="name" name="name" placeholder="Ваше имя" required="" tabindex="1" type="text"> p class="contact">label for="email">Email/label>/p> input id="email" name="email" placeholder="example@sitehere.ru" required="" tabindex="2" type="text"> p class="contact">label for="Subject">Тема/label>/p> input id="subject" name="subject" placeholder="Тема сообщения" required="" tabindex="2" type="text"> p class="contact">label for="comment">Сообщение/label>/p> textarea name="comment" id="comment" tabindex="4">/textarea> br> input name="submit" id="submit" tabindex="5" value="Отправить" type="submit"> /form> /div>

CSS часть формы обратной связи

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

.cover { background:#CCC; width:700px; margin:auto; padding-left:60px; } h2.contact { padding-left: 125px; font-size: 66px; color: #ff5400; height: 105px; background: url(images/contact.png) no-repeat -10px -10px; font-family: sans-serif; } p.contact { font-size: 24px; margin-bottom: 15px; line-height: 36px; font-family: sans-serif, Arial; color: #4b4b4b; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } #contact { margin-bottom: 0px; } input[type="text"] { width: 400px; } textarea { width: 600px; height: 275px; } label { color: #ff5400; } input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 5px solid rgba(122, 192, 0, 0.15); padding: 10px; font-family: Keffeesatz, Arial; color: #4b4b4b; font-size: 24px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: -10px; } input:focus, textarea:focus { border: 5px solid #ff5400; background-color: rgba(255, 255, 255, 1); } input[type="submit"] { border: none; cursor: pointer; color: #fff; font-size: 24px; background-color: #7ac000; padding: 5px 36px 8px 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6); background: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #619702), color-stop(0.62, #7ac000) ); background: -moz-linear-gradient( center bottom, #619702 23%, #7ac000 62% ); } input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #c34000), color-stop(0.62, #ff5400) ); background: -moz-linear-gradient( center bottom, #c34000 23%, #ff5400 62% ); } input[type="submit"]:active { top: 1px; }

Вывод

На этом всё. Форма обратной связи HTML готова к использованию! :).

Источник