Найти тему
LineDev

Создаем простую форму обратной связи на PHP/HTML/CSS

Всем привет! Сегодня мы создадим простую форму обратной связи с использованием PHP/HTML/JS.

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

Что-ж, давайте приступим к написанию кода.

Верстка

Для начала сверстаем простенькую форму с тремя полями: поле "Имя", поле "Email" и поле "Телефон". Обычно этих полей бывает достаточно. И конечно добавляем кнопку <submit> для отправки данных формы на сервер.

В каждом теге <input> атрибуту name присваиваем значение соответствующее имени поля. Атрибуту type для полей "Имя" и "Телефон" указываем значение "text", а полю "Email" - "email". В атрибуте placeholder будет указано имя поля. И не забываем добавить для полей атрибут required, для того чтобы отправка формы не могла произойти в том случае, если пользователь не указал данные в каком-либо из полей. В теге <form> указываем атрибут method со значением "POST" и action, значение которого будет путь к файлу на сервере в котором будет происходить обработка данных пришедших с формы. В атрибуте action можно ничего не указывать, тогда данные будут отправляться на текущую страницу.

-2

Теперь добавим немного стилей:

-3

И посмотрим на результат:

-4

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

Обработчик формы

Отправленные с формы данные будут приходить в наш обработчик в виде массива $_POST. Это глобальная переменная, существующая в PHP, которая хранит в себе ассоциативный массив данных, переданных с помощью метода POST (если хотите подробнее узнать о работе с $_POST и другими предопределенными переменными в PHP, пишите под статьей в комментах).

Для отправки письма на почту используем функцию mail(). Функция принимает 4 параметра:

  1. Email получателя (адрес нашей почты)
  2. Тема письма
  3. Текст письма
  4. Строка заголовков, которые будут вставлены в конец отправляемых заголовков письма.

Строка заголовков должен иметь в себе как минимум заголовок From - это email отправителя. Без указания этого заголовка, при отправке письма будет сгенерировано сообщение об ошибке: "Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing".

Как email отправителя используем адрес почты, который будет именем сайта + gmail.com. Но так как данного почтового ящика реально не существует, это может обернуться попаданием письма в спам. Поэтому если письма должны приходить во вкладку "Непрочитанные" и не откладываться в спам, необходимо использовать существующий адрес почты.

После получим такой обработчик:

-5

В начале обработчика стоит проверка на наличие массива $_POST, для защиты от случайного перехода в файл и соответственно получения ошибок. Если массива не существует, в таком случае переходим на страницу с формой, используя функцию header() и прекращаем выполнение текущего кода с помощью функции exit(). Если массив $_POST к нам пришел, тогда формируем параметры для передачи в функцию mail(), вызываем эту функцию и проверяем отправку. Если письмо успешно отправилось, переходим на страницу, которая показывает сообщение об успехе используя всю ту же функцию header() и прекращаем выполнение кода с помощью функции exit().

Страница успеха:

-6
-7

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

Ссылка на исходники

#linedev #разработка #php #html #css