Простейшая форма отправки данных на почту при помощи HTML и PHP. Как создать форму обратной связи с возможностью загрузки и отправки файла на почту PHP
В этой статье вы узнаете, как создать форму обратной связи (мы будем получать email пользователя), которая предоставляет пользователю возможность прикрепить и отправить на сервер свой файл. Также в этой статье вы узнаете, как проверить тип и размер загруженного файла.
Html формы с полем отправки файла
Html формы с полем отправки файла представлен ниже. При клике по кнопке " browse " пользователь получает возможность выбрать файл на своей локальной машине.
Форма будет выглядеть следующим образом:
Обратите внимание, что в атрибутах формы мы указали enctype="multipart/form-data" . Это скажет браузеру, что форма может быть использована для отправки файлов. Также мы добавили поля " name " и " email " с целью собрать как можно больше информации о пользователе. Затем идет поле отправки файла.
При клике по кнопке submit , данные, включая данные о посылаемом файле, отправятся в файл-обработчик, путь к которому мы указали в атрибуте формы action .
Получаем информацию о загруженном файле
Сперва мы проверим полученные данные, затем, в случае успешной проверки, отправим данные на электронную почту.
Всю информацию о загруженных файлах можно получить при помощи массива $_FILES .
Содержимое массива $_FILES для нашего примера приведено ниже. Обратите внимание, что значение атрибута name (у нас оно равно uploaded_file) в поле выбора файла может быть любым.
- $_FILES["uploaded_file"]["name"]
Оригинальное имя файла на компьютере пользователя. - $_FILES["uploaded_file"]["type"]
Mime-тип файла, в случае, если браузер предоставил такую информацию. Пример: "image/gif". Этот mime-тип не проверяется в PHP, так что не полагайтесь на его значение без проверки. - $_FILES["uploaded_file"]["size"]
Размер в байтах принятого файла. - $_FILES["uploaded_file"]["tmp_name"]
Временное имя, с которым принятый файл был сохранен на сервере. - $_FILES["uploaded_file"]["error"]
Код ошибки, которая может возникнуть при загрузке файла. Этот элемент был добавлен в PHP 4.2.0
Получаем имя, тип и размер загруженного файла:
//Получаем последний компонеет имени загруженного файла $name_of_uploaded_file = basename($_FILES["uploaded_file"]["name"]); // например, index.php //получаем расширение файла (без точки) $type_of_uploaded_file = substr($name_of_uploaded_file, // позиция вхождения точки + 1 strrpos($name_of_uploaded_file, ".") + 1); $size_of_uploaded_file = $_FILES["uploaded_file"]["size"]/1024; //размер в KBs
Как видите, информация о загруженном файле доступна через массив $_FILES .
Проверяем размер и тип расширения загруженного файла
Предположим, что получаемый файл должен быть изображением (" jpg ", " jpeg ", " gif ", " bmp ") и не должен превышать 100 Kb. Тогда наш код будет выглядеть так:
//Настройки
$max_allowed_file_size = 100; // размер в KB
$allowed_extensions = array("jpg", "jpeg", "gif", "bmp");
//Проверки
if($size_of_uploaded_file > $max_allowed_file_size)
{
$errors .= "\n Размер файла должен быть меньше $max_allowed_file_size";
}
//------ Проверяем расширение файла -----
$allowed_ext = false;
for($i=0; $i В вышеприведенном коде мы проверяем размер и тип файла. Максимально допустимый размер файла равен 100 KB ($max_allowed_file_size). Массив $allowed_extensions содержит названия всех допустимых расширений файла. Таким образом, расширение файла проходит проверку на соответствие значениям массива $allowed_extensions .
При обнаружении ошибок переменной $error присваивается соответствующая запись. Пришло время отправить загруженный файл на почту администратора.
//копируем временный файл в папку uploads
$path_of_uploaded_file = $upload_folder . $name_of_uploaded_file;
$tmp_path = $_FILES["uploaded_file"]["tmp_name"];
// был ли загружен файл при помощи HTTP POST
if(is_uploaded_file($tmp_path))
{
// если файл не скопирован, создаем ошибку
if(!copy($tmp_path,$path_of_uploaded_file))
{
$errors .= "\n error while copying the uploaded file";
}
}
Сперва мы должны скопировать файл в папку на сервере. (По окончанию работы скрипта, в случае, если принятый файл не был переименован или скопирован в новую папку, он будет автоматически удален из временной папки.) Копируем загруженный файл в папку " uploads ". Если вы хотите переименовать папку (uploads), обновите переменную $upload_folder . Убедитесь, что папка " uploads " имеет права доступа 777.
Файл сохранен на вашем сервере, и вы можете обратиться к нему в любой момент. Составим и отправим письмо на электронную почту администратора сайта (или кому хотите). Для отправки и компоновки письма будем использовать pear library (инструкцию по установке смотрите ниже). Pear классы PEAR::Mail и PEAR::Mail_Mime используются для отправки электронной почты с прикрепленными файлами. Для начала мы должны подключить файлы pear library для этих классов: Include_once("Mail.php");
include_once("Mail_Mime/mime.php");
Ниже приведен код компоновки и отправки письма:
$message = new Mail_mime();
$message->setTXTBody($text);
$message->addAttachment($path_of_uploaded_file);
$body = $message->get();
$extraheaders = array("From"=>$from,
"Subject"=>$subject,"Reply-To"=>$visitor_email);
$headers = $message->headers($extraheaders);
$mail = Mail::factory("mail");
$mail->send($to, $headers, $body);
Класс Mail_mime() поможет в создании MIME послания. В приведенном выше коде мы создали объект Mail_mime , обновили тело письма ($message->setTXTBody($text);) и добавили прикрепленный файл ($message->addAttachment(file)). Прежде чем использовать классы PEAR необходимо установить PEAR на вашем сервере. Вот быстрый способ установить PEAR: Сохраните файл как " pear-installer.php ". Загрузите этот файл на ваш сервер в любой каталог. Затем пропишите путь к файлу в вашем браузере: Архив содержит простую форму с отправкой загруженного файла на почту. Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов. Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы. Итак, начинаем создание формы обратной связи: В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом: <
form method=
"post"
action=
"mail.php"
>
<
div class
=
"left"
>
<
label for
=
"name"
>
Имя:
<
input maxlength=
"30"
type=
"text"
name=
"name"
/>
<
label for
=
"phone"
>
Телефон:
<
input maxlength=
"30"
type=
"text"
name=
"phone"
/>
<
label for
=
"mail"
>
E-
mail
:
<
input maxlength=
"30"
type=
"text"
name=
"mail"
/>
<
div class
=
"right"
>
<
label for
=
"message"
>
Сообщение:
<
textarea rows=
"7"
cols=
"50"
name=
"message"
>
<
input type=
"submit"
value=
"Отправить"
/>
И визуально она выглядит сейчас следующим образом: Согласен, пока все некрасиво и ничего не понятно, но мы только начали. Рассмотрим приведенный выше код подробно: <
form method=
"post"
action=
"mail.php"
>
…
<
input maxlength=
"30"
type=
"text"
name=
"name"
/>
<
label for
=
"name"
>
Имя:
<
textarea rows=
"7"
cols=
"50"
name=
"message"
>
<
input type=
"submit"
value=
"Отправить"
/>
<
div class
=
"right"
>
Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата: Мы использовали данный код: form {
background:
#f4f5f7;
padding:
20px;
}
form .
left,
form .
right {
display:
inline-
block;
vertical-
align:
top;
width:
458px;
}
form .
right {
padding-
left:
20px;
}
label {
display:
block;
font-
size:
18px;
text-
align:
center;
margin:
10px 0px 0px 0px;
}
input,
textarea {
border:
1px solid #82858D;
padding:
10px;
font-
size:
16px;
width:
436px;
}
textarea {
height:
98px;
margin-
bottom:
32px;
}
input[
type=
"submit"
]
{
width:
200px;
float:
right;
border:
none;
background:
#595B5F;
color:
#fff;
text-
transform:
uppercase;
}
Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты: Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть . Ну вот и пришло время сделать нашу форму работоспособной. Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form. В конечном итоге его код будет выглядеть следующим образом:
Копируем загруженный файл
Отправляем письмо
Скачайте инсталлятор PEAR
http://www.yourdomain.com/pear-installer.php
Появится веб-интерфейс для установки PEAR на вашем сайте. Следуйте инструкции по установке. После установки Pear, найдите и установите пакеты " mail " и " mail_mime ".Простая форма с загрузкой, скачать
HTML
для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).
Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.
Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.
Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.
О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.
использованы только для дальнейшего визуального оформления формы.CSS
PHP
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , ) ; echo "Ваше сообщение успешно отправлено!
Вы получите ответ в ближайшее время
$back " ; exit ; } else { echo ; exit ; } ?>
Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:
$back = "
\" javascript: history.back()\" >Вернуться назад
" ;Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.
if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { //внутрення часть обработчика } else { echo "Для отправки сообщения заполните все поля! $back " ; exit ; }
Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.
Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.
Дале вставляем во внутреннюю часть обработчика формы:
$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;
Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.
Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.
Полностью отказываться от защиты формы на серверной стороне в пользу JS не рекомендую, поскольку хоть и крайне редко, но встречаются уникумы с отключенным в браузере JS.
После чистки тегов добавляем отправку сообщения:
mail
("почта_для_получения_сообщений@gmail.com"
,
"Письмо с адрес_вашего_сайта"
,
"Вам написал: "
.
$name
.
"
Его номер: "
.
$phone
.
"
Его почта: "
.
$mail
.
"
Его сообщение: "
.
$message
,
"Content-type:text/html;charset=windows-1251"
)
;
Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:
- "почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту
- "Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
- "Вам написал: ".$name." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
- Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.
ВАЖНО!
Кодировка указанная в «голове» документа ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».
Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.
Проверка формы на адекватность вводимых данных
Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.
Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.
Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:
< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }
Ну а теперь обычный разбор:
Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
Теперь по пунктам забираем состав проверки:
Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.
От автора: приветствую вас, друзья. Данная статья будет продолжением , в которой мы реализовывали отправку формы на email с помощью PHP функции mail(). В этой статье мы узнаем, как сделать форму отправки сообщений с сайта через SMTP популярных почтовых сервисов. Приступим?.
Исходные файлы текущей статьи вы можете скачать по .
Вы можете задать вполне логичный вопрос: а чем не устраивает функция mail(), которая замечательно работает на локальном сервере? Все дело в том, что в настоящее время работоспособность данной функции на реальном хостинге стоит под большим вопросом. Порой хостер просто отключает отправку писем со своего сервера, часто письма просто не доходят до адресата и попадают в спам.
Именно по этим причинам и рекомендуется использовать для отправки писем сторонние SMTP сторонних популярных сервисов: gmail.com, yandex.ru, mail.ru и т.п. Ну а отправить письмо нам помогут различные библиотеки, например замечательная библиотека PHPMailer . Эта библиотека достаточно проста в использовании и универсальна. PHPMailer позволяет отправлять не только простые письма, но и письма в формате HTML, письма с вложениями, в общем, библиотека умеет все, что необходимо для отправки сообщений с сайта.
Начнем со скачивания архива с библиотекой и подключения его к обработчику формы, у нас это файл mail.php:
require "phpmailer/PHPMailerAutoload.php";
require ; |
Теперь нам необходимо создать объект подключаемого класса библиотеки и произвести его необходимую настройку. Здесь нам потребуется реальный почтовый ящик, который будет использован для отправки писем. Я использую тестовый почтовый ящик, зарегистрированный в mail.ru. По запросу в Гугле mail.ru smtp можно найти необходимые настройки, которые мы используем. Точно таким же образом мы можем найти настройки smtp других почтовых сервисов.
Итоговый код обработчика будет выглядеть следующим образом:
"; // добавляем имя в текст $message .= "Телефон: {$_POST["phone"]}"; // добавляем телефон в текст require "phpmailer/PHPMailerAutoload.php"; $mail = new PHPMailer; $mail->isSMTP(); $mail->Host = "smtp.mail.ru"; $mail->SMTPAuth = true; $mail->Username = "mailer_test_2014"; // логин от вашей почты $mail->Password = "!mailer_2014!"; // пароль от почтового ящика $mail->SMTPSecure = "ssl"; $mail->Port = "465"; $mail->CharSet = "UTF-8"; $mail->From = "[email protected]"; $mail->FromName = "Андрей"; $mail->addAddress("[email protected]", "Андрей"); $mail->isHTML(true); $mail->Subject = "Заказ обратного звонка"; $mail->Body = $message; if($mail->send()){ echo "
Ваше сообщение отправлено
"; }else{ echo "Ошибка!
"; }< ? php $
message
=
"Имя: {$_POST["name"]} $ message . = "Телефон: {$_POST["phone"]}" ; // добавляем телефон в текст require "phpmailer/PHPMailerAutoload.php" ; $ mail = new PHPMailer ; $ mail -> isSMTP () ; $ mail -> Host = "smtp.mail.ru" ; $ mail -> SMTPAuth = true ; $ mail -> Username = "mailer_test_2014" ; // логин от вашей почты $ mail -> Password = "!mailer_2014!" ; // пароль от почтового ящика $ mail -> SMTPSecure = "ssl" ; $ mail -> Port = "465" ; $ mail -> CharSet = "UTF-8" ; $ mail -> From = "[email protected]" ; $ mail -> FromName = "Андрей" ; $ mail -> addAddress ("[email protected]" , "Андрей" ) ; $ mail -> isHTML (true ) ; |
На этом уроке мы познакомимся с функцией mail () , на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .
$to = "[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, Perl и др. Адрес программы указывается в атрибуте action тега
В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге