Форма обратной связи на PHP с отправкой на e-mail
На этом уроке мы познакомимся с функцией mail (), на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла — forma.php и mail.php. В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form — кнопка «Отправить» и атрибут action, который ссылается на обработчик — mail.php, именно к нему обращаются данные из формы при нажатии кнопки «Отправить». В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php». На этой странице прописан скрипт на PHP, который обрабатывает данные формы :
<form action=»./mail.php» method=»post»>
Данные формы отправляются методом POST (обрабатывается как $ _POST). $ _POST — это массив переменных, переданных текущему скрипту через метод POST.
Ниже вы видите содержимое файла forma.php, поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name, значения мы прописываем сами, исходя из логики.
<!DOCTYPE html>
<html>
<head>
<title>Форма обратной связи на PHP с отправкой на почту</title>
</head>
<body>
<h2>Форма обратной связи на PHP</h2>
<!—Данные введенные пользователем обрабатываются кодом в mail.php—>
<form action=»./mail.php» method=»post»>
<!—Тег используется для группировки связанных элементов в форме—>
<fieldset>
<!—Тег задает заголовок для групповых элементов—>
<legend>Оставьте сообщение:</legend>
Ваше имя:
<!—Устанавливает однострочное текстовое поле ввода:—>
<input type=»text» name=»name»>
<!—Используется для полей ввода, которые должны содержать адрес электронной почты.—>
E-mail:
<input type=»text» name=»email»>
Номер телефона:
<input type=»text» name=»phone»>
Сообщение:
<!—Тег разрешает многострочный ввод текста.—>
Текстовая область может содержать неограниченное количество символов—>
<textarea rows=»10″ cols=»45″ name=»message»></textarea>
<!—Устанавливает кнопку для отправки данных формы в обработчик формы.—>
<input type=»submit» value=»Отправить сообщение»>
</fieldset>
</form>
</body>
</html>
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php. Придумываем сами имена для переменных. В PHP переменная начинается со знака $, а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы — значение name.
<?php
$to /cdn-cgi/l/email-protection» data-cfemail=»50293f25223d31393c10373d31393c7e333f3d»>[email protected]»; // емайл получателя данных из формы
$tema = «Форма обратной связи на PHP»; // тема полученного емайла
$message = «Ваше имя: «.$_POST['name'].»<br>»;//присвоить переменной значение, полученное из формы name=name
$message .= «E-mail: «.$_POST['email'].»<br>»; //полученное из формы name=email
$message .= «Номер телефона: «.$_POST['phone'].»<br>»; //полученное из формы name=phone
$message .= «Сообщение: «.$_POST['message'].»<br>»; //полученное из формы 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 с Нуля до Гуру».
Код простой формы обратной связи для сайта на HTML и PHP
Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.
Почему используется HTML и PHP?
Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» — ненужных стилей и скриптов. Так как эти плагины все равно выдают в результате тот же код HTML, то предлагаю использовать простую, но полноценно функциональную форму, которую можно изменить под свои нужны, например, под обратный звонок с сайта.
Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.
Структура кода реализации обратной связи для сайта
Далее приведен алгоритм работы обратной связи:
- Код HTML формы, вставленный на страницу + CSS стили для его оформления.
- PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.
В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.
Код формы обратной связи на HTML
Вначале приведем исходный код простой формы обратной связи для сайта на HTML:
Сама форма находится между HTML тегами <form></form> . Тегу <form> присвоен 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 у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими параметрами после «?», что приведет к дублям страниц.
Далее внутри тега <form> находится контейнер <div> с CSS классом class="form-zvonok" , он отвечает за компоновку полей ввода и подписей к ним.
Внутри этого контейнера, находятся другие div содержащие теги подписей <label></label> и полей ввода <input> . А в самом конце размещено поле <input type=’submit’ value=’Послать заявку’> — кнопка «Отправить» , при нажатии на которую происходит отправка данных формы браузером
Обратите внимание, что имена полей формы должны быть уникальны на странице, так как через них передаются параметры формы. Различные трюки и фишки, связанные полями формы будут раскрыты в другой статье, которая сейчас готовится к выходу.
Отправка письма PHP скриптом
Приведем код простого скрипта для отправки письма
Чтобы отправить письмо на нужный email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение. $headers — шапка письма, в ней указывается тип письма, например HTML, а также: кодировка, от кого доставлено письмо и на какой emal отправлять ответ.
Простой скрипт обработки данных формы HTML в PHP скрипте
Приведем сначала исходный код:
проверяем или используется метод POST
Далее проверяем или были высланы данные с полей ввода
Обратите внимание, что в конструкции $_POST["username"] название поля совпадает с именем поля username в форме <input type=’text’ name=’username’ required> . Поэтому на одной странице названия полей должны быть уникальны, иначе они будут переписывать друг друга.
Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.
Функция trim() удаляет пробелы в начале и в конце строки. Далее формируем письмо и все что подготовили отправляем функцией mail() .
Оформление формы обратного звонка для сайта CSS
Приведем код CSS оформления для формы обратной связи сайта.
Разберем подробнее код.
Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px , если шире, то форма HTML выглядит растянутой:
Что бы упорядочить поля и кнопку «Отправить» , обертываем их в div , отображение ставим в flex и направление отображения столбцом column . Для красоты добавляем отступы сверху и снизу на 20px:
Подпись и поле ввода обернуты в контейнер div :
Для этого дива присвоим отступы сверху и снизу:
Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:
Аналогично для подписей и полей ввода:
Настраиваем красивый внешний вид подписей и полей ввода:
Звездочку делаем красной:
Оформляем кнопку «Отправить» :
При наведении на кнопку настраиваем изменение цвета:
Обратите внимание, что иногда эти стили могут быть переопределены другими, которые имеют больший приоритет. Что бы усилить приоритет, просто присвойте форме имя через id , например id="obratnuj-zvonok" и в CSS файлах тогда обращение идет не через точку, как к классам, а через решетку # , например #obratnuj-zvonok . Тогда достаточно добавить к селекторам в CSS файлах в начало #obratnuj-zvonok , что бы повысить приоритет правил.
Скачать исходный код формы обратной связи
Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.
3 способа. Как сделать форму обратной связи на html?
Форма обратной связи — используется, как не странно, для связи пользователя сайта с администратором. В ней пользователь может сообщить о каких то ошибках на сайте или спросить о чем-либо разработчика.
Существует несколько способов реализовать данную фичу у себя. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.
- Способ №1. Форма обратной связи на html + css + php (функционален, расширяем, относительно сложный способ)
- Способ №2. Форма обратной связи только на html от стороннего сервиса (простота установки, функционален)
- Способ №3. Форма для связи, реализованная по средствам ссылки для почтового клиента. При клике по ней открывается ваша почта, в которой уже вписан нужный email для связи. (просто, но и нет ни каких функций или возможностей)
Способ №1. Форма обратной связи html + php.
Данный способ подойдет вам, если необходимо максимально расширяемое решение. Данную форму можно сделать какую угодно. Запрашивать любые данные у пользователей, которые вам необходимы. Можно сделать отправку файлов, капчу, отправку фото, адресов страниц от куда была совершена отправка и многое, многое другое.
Для данной формы вам потребуется:
- Хостинг с поддержкой PHP
- Знания HTML+ CSS
- Знания PHP
Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.
Далее давай те напишем HTML код формы
Ну и конечно же файл CSS, что-бы все облагородить)
Вот, что получилось в итоге.
Способ №2. Сервис для формы обратной связи.
Сервисов форм достаточно много, мы разберем форму от яндекса. Сервис позволяет составить свою форму практически с любыми полями. Настроить тему, почту, уведомления. А так-же, все это, можно сделать без знаний программирования так как у таких сервисов есть конструктор, с помощью которого можно собрать все визуально, перетаскивая блоки и настраивая параметры.
Для данного способа вам понадобиться:
- Хостинг HTML
- Знание HTML приветствуется
У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.
Я собрал вот такую форму на сервисе Яндекса.
Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту
После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.
Способ №3. Ссылка для отправки email.
Самый простой способ реализовать связь разработчика и пользователя. Оставить свою почту на сайте. Но мы ведь любим упрощать жизнь пользователям. Поэтому разместим не просто адрес, а ссылку адрес. Выглядит такая ссылка вот так:
Такую ссылку можно усложнить и задать сразу еще и тему к примеру
При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение. Также саму ссылку можно украсить с помощью CSS стилей, но это уже совсем другая история.
Формы и поля в HTML. Все о HTML формах
В HTML для создания форм используются теги группы form. К ним относятся:
-
— контейнер формы; — элементы формы (поля) различных типов; — кликабельная кнопка; — выпадающий список, список с множественным выбором; — пункт списка; — группа пунктов; — список предопределенных вариантов; — текстовая область; — подпись, метка поля; — группа полей; — название группы полей; — результат вычислений.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете, нажав по названию тега.
На этой странице описана практика создания и работы с HTML формами с примером исходного кода и описанием на русском языке.
Создание формы в HTML
Для того чтобы создать простую HTML форму, нужно поместить в код страницы тег <form> и разместить внутри него элементы формы.
Тег <form> является корневым элементом HTML формы. Все элементы формы должны находиться внутри тега <form> , либо быть связанными с формой при помощи атрибута form , содержащего идентификатор формы (значение атрибута id тега <form> ).
Элементы формы (другое название — поля) формируются с помощью тегов группы form. Основные типы элементов описаны ниже на этой странице. Подробное описание всех типов полей форм находится на страницах тегов соответствующих элементов.
Для примера создадим форму обратной связи. Стандартная форма обратной связи HTML содержит следующие элементы: список выбора тематики, текстовые поля для ввода имени, контакта (например, email) и текстовую область для ввода сообщения.
Пример HTML формы обратной связи
HTML код формы обратной связи
Рассмотрим подробно код формы.
Родительским элементом является тег <form> . Атрибут class определяет название CSS класса для стилизации формы, name — имя формы; method=»POST» означает, что данные введенные пользователем будут переданы в теле HTTP запроса.
Существует 2 метода передачи данных формы на сервер: GET и POST. Используя метод GET, данные будут переданы в виде пар «имя-значение» в URL адресе обработчика. В случае использования метода POST данные передаются скрыто. Их можно увидеть только с помощью специальных инструментов, открыв HTTP запрос. Подробное описание методов GET и POST и о том, когда нужно использовать каждый из методов читайте в статье: Методы GET и POST: использование и отличия.
Атрибут action содержит URL обработчика формы — по этому адресу будет отправлена форма после наступления события submit (submit — событие отправки формы).
Внутри тега <form> , помимо текстовых элементов, находятся элементы формы: <select> — список, <input> типов text и email — поля ввода, <textarea> — текстовая область и <input type=»submit»> — кнопка отправки формы.
Каждый элемент cодержит атрибут name . При отправке формы, значения введенные пользователем будут переданы в переменных с именами указанными в этом атрибуте. Атрибут type определяет тип элемента <input> . Атрибут required делает элемент обязательными для заполнения. Форма не будет отправлена, пока пользователь не заполнит все обязательные элементы.
Стилевое оформление формы
Для оформления формы обратной связи, приведенной выше, были использованы несколько стилей CSS. Оформление не влияет на работу формы, однако, если вы хотите чтобы ваша форма выглядела также как форма из примера, воспользуйтесь CSS правилами, приведенными ниже.
Код CSS для базового оформления HTML формы обратной связи из примера выше:
Элементы (поля) формы html. Основные типы полей
В таблице ниже представлены основные типы элементов формы (полей). Подробную информацию о каждом элементе вы можете просмотреть на отдельной странице тега.
По умолчанию текстовое поле может принимать любые текстовые значение. Дополнительные ограничения могут быть установлены в теге (атрибут pattern), либо с помощью JavaScript.
С помощью тега <datalist> к полю можно добавить список предопределенных вариантов.
Браузеры обычно отображают возле поля календарь, с помощью которого можно заполнить поле.
Существует несколько типов полей, содержащих данные о дате и времени:
- date — дата (число, месяц, год);
- datetime-local — дата и время (число, месяц, год, часы, минуты);
- month — месяц конкретного года (например: январь, 2004г);
- week — неделя конкретного года (например: неделя 32, 2001г).
Поле для ввода пароля:
В поле типа password введенное значение будет заменено символьной маской.
Поле для ввода чисел:
В поля из этой группы можно вводить только подходящее к типу поля содержимое.
Поля с указанным типом содержимого:
- email — поле для ввода адреса электронной почты;
- number — поле для ввода чисел;
- password — поле для ввода пароля;
- search — поле для ввода поискового запроса;
- tel — поле для ввода номера телефона;
- url — поле для ввода URL адреса.
Текстовая область может принимать в виде значения многострочный текст.
Чек-бокс представляет собой поле, в котором можно сделать отметку.
Элемент «переключатель» позволяет выбрать один из доступных вариантов.
При клике на список пользователю откроются доступные для выбора варианты.
Пользователь может выбрать сразу несколько вариантов из этого списка.
С помощью этого элемента пользователь может прикрепить к форме файл.
Для создания кликабельной кнопки можно использовать тег <input> либо тег <button>.
Отличие в возможности формировать название кнопки, сделанной тегом <button>, с помощью HTML тегов.
Типы кнопок (определяются атрибутом type):
- button — простая кнопка. Действие, которое будет выполнено при нажатии кнопки, определяется через JavaScript;
- submit — кнопка отправки формы;
- reset — кнопка очистки полей формы.
Обработка HTML формы на сервере
После отправки формы данные передаются на сервер в виде параметров запроса.
Дальнейшая обработка формы осуществляется с помощью программного кода обработчика, указанного в атрибуте action формы.
Для создания обработчика понадобится один из доступных языков программирования. Распространенным вариантом является использование PHP обработчиков.
В случае использования PHP обработчика данные формы будут доступны в суперглобальных массивах $_GET и $_POST . Например, данные поля с именем «message», отправленные методом POST, будут доступны как $_POST[‘message’] .
Работа с формами на сервере — это отдельная обширная тема. Об обработке HTML форм на сервере читайте в справочнике по выбранному языку программирования.
Ниже представлен простейший PHP обработчик для формы обратной связи, приведенной выше. Данный обработчик отправляет данные формы на указанный email.