Делаем форму обратной связи на сайте
Говорят, что если программист может написать форму обратной связи, он может написать всё.
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
- сервер, который умеет работать с PHP-скриптами,
- страница, где разместим форму,
- скрипт на PHP — он будет отвечать за отправку сообщения.
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Сервер для PHP можно запустить на вашем компьютере, но без дополнительной настройки он будет виден только лично вам. Это нормальная ситуация при разработке продукта, но для реальной боевой задачи нужно будет поднять сервер где-то в интернете.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :
/*Задаём общие параметры для всей страницы: шрифт и отступы*/ body < /*text-align: center;*/ margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/* Настраиваем внешний вид полей ввода*/ input < display: inline-block; margin: 10px auto; border: 2px solid #eee; padding: 10px 20px; font-family: Verdana, Arial, sans-serif; font-size: 16px; >textarea
Чтобы сделать форму на странице, мы будем использовать такие теги:
— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом — он мысленно собирает наши поля в одну форму и помогает управлять ими из одного места. У каждой формы есть свой метод, по которому она работает с данными. Форма может или отправлять данные (post), или получать их (get). Так как нам надо отправить сообщение в PHP-скрипт, будем использовать метод post. Сразу пропишем путь к скрипту на сервере — по этому адресу мы зальём нужный файл на следующем этапе. Этот скрипт, который мы позже напишем, и есть обработчик формы.
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
- Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
- В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
- Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.
Логика работы PHP-программы будет такая:
- получаем значения переменных из тех данных, которые получил обработчик;
- готовим сообщение, где укажем все поля в форме;
- отправляем это сообщение и смотрим на результат выполнения функции отправки;
- если письмо ушло по нужному адресу — пишем, что всё хорошо, если нет — говорим, что что-то не так;
- через 10 секунд после вывода сообщения автоматически переходим на сайт «Кода» 🙂
Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную $email в функции send() на свой настоящий адрес, чтобы самим получать письма из формы.
// Если письмо не ушло — выводим сообщение об ошибке else ?>Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.
- Например, сейчас, если не заполнить поле с темой или адресом, то будет ошибка и письмо не уйдёт. При этом пользователь не будет знать, что же именно он сделал не так. Можно организовать проверку на заполнение полей и выводить нужные сообщения, если что-то не заполнено.
- Всегда можно улучшить безопасность и защитить скрипт от многократных запросов — чтобы никто не абьюзил сервис и не делал из нас спамеров.
- А ещё при отправке мы переходим на страницу обработчика, а потом вообще на другой сайт. Чтобы сделать как у всех, чтобы форма отправлялась без перезагрузки страницы, можно использовать Ajax. Когда-нибудь доберёмся и до него. Подписывайтесь, чтобы не пропустить.
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Форма обратной связи на PHP с отправкой на e-mail
На этом уроке мы познакомимся с функцией mail (), на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла — forma.php и mail.php. В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form — кнопка «Отправить» и атрибут action, который ссылается на обработчик — mail.php, именно к нему обращаются данные из формы при нажатии кнопки «Отправить». В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php». На этой странице прописан скрипт на PHP, который обрабатывает данные формы :
Данные формы отправляются методом POST (обрабатывается как $ _POST). $ _POST — это массив переменных, переданных текущему скрипту через метод POST.
Ниже вы видите содержимое файла forma.php, поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name, значения мы прописываем сами, исходя из логики.
Форма обратной связи на PHP
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php. Придумываем сами имена для переменных. В PHP переменная начинается со знака $, а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы — значение name.
$to /cdn-cgi/l/email-protection» data-cfemail=»ccb5a3b9bea1ada5a08caba1ada5a0e2afa3a1″>[email protected]»; // емайл получателя данных из формы
$tema = «Форма обратной связи на PHP»; // тема полученного емайла
$message = «Ваше имя: «.$_POST[‘name’].»
«;//присвоить переменной значение, полученное из формы name=name
$message .= «E-mail: «.$_POST[’email’].»
«; //полученное из формы name=email
$message .= «Номер телефона: «.$_POST[‘phone’].»
«; //полученное из формы name=phone
$message .= «Сообщение: «.$_POST[‘message’].»
«; //полученное из формы name=message
$headers = ‘MIME-Version: 1.0’ . «\r\n»; // заголовок соответствует формату плюс символ перевода строки
$headers .= ‘Content-type: text/html; charset=utf-8’ . «\r\n»; // указывает на тип посылаемого контента
mail($to, $tema, $message, $headers); //отправляет получателю на емайл значения переменных
?>
Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail. Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.
Как видите создавать форму обратной связи на PHP с отправкой на e-mail не так и сложно. Хотите узнать как сохранить данные, полученные из формы в файл или в базу данных? Этому научит вас мой видеокурс «PHP и MySQL с Нуля до Гуру».
Создано 10.08.2017 11:52:15
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 9 ):
Я как-то давно посмотрел видео из курса от Михаила Русакова. Там была форма, которая регистрировала пользователей. С тех пор я сам дошел до представленной выше конструкции, хотя посмотрел совсем другой урок.)
так и должно быть при обучении, если встречаются: хороший учитель и усердный ученик.
Так точно! вот я например никогда не создавал интернет магазины, а сделал за неделю
Привет, в этой форме при нажатии кнопки «Отправить сообщение» будет перебрасывать на файл mail.php? А можно как-то сделать, чтобы он не открывался?
У меня тоже проблема, форма отправляется пустой как только на нее перейти. Как можно перейти на нее без преждевременной отправки формы?
Добрый день! По строке скрипта: $message = «Номер телефона: «.$_POST[‘phone’].»
«; выдаёт ошибку syntax error, unexpected ‘$message’ (T_VARIABLE) Помогите пож. не вижу что не так. Это вторая команда в скрипте $message, пробовал и $message ., как в примере, и $message2, всё равно выдаёт ошибку.
я честно не мучаюсь и использую сайт https://formfor.site, пока не жалуюсь. Сообщения уходят в telegram и почту.
smineral — обработка и интеграция без конструктора форм даже. чем этот сервис лучше например qform24.com ? где всё тоже самое только 1. бесплатно полностью. 2. есть конструктор форм и так же подключение обработчика к готовой форме 3. есть кабинет по работе с заявками внутри сервиса, а не только экспорт в мессенджеры и все остальные функции что там заявлены тоже есть.
Отличный мини проект формы) все что нужно есть. Только подскажите пожалуйста как сделать сообщение об успешном отправлении сообщения? а то кидает на файл mail.php, может даже просто в виде модального окна — но чтобы не кидало на файлик. отправка работает — письмо пришло молниеносно)
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.