Форма обратной связи с вложением php

Скрипт формы обратной связи с прикреплением файла (php + ajax)

Данный скрипт идеально подойдет для форм при создании сайтов-визиток, каталогов, лендингов, где нужно отправить простую форму с прикрепленным файлом.

В скрипте используется проверка заполненности обязательных полей с помощью скрипта jquery.validation с последующей отправкой сообщения на e-mail администратора без перезагрузки страницы с помощью технологии ajax.

Демо-страницу можно посмотреть – тут.

Рассмотрим работу скрипта на примере:
Дана форма с полями: Имя, Телефон, Е-mail и «Описание заказа».

Код формы:

 
 
Форма заказа
 
Имя*: 
 
Контактный номер*: 
 
E-mail: 
 
Описание заказа:  
 
Прикрепить файл: 
 
 

! В форме, в которой происходит прикрепление файла, обязательно наличие аттрибута enctype=”multipart/form-data”.

Javascript код

Подключаем библиотеки jQuery и плагин валидации на страницу:

Javascript код для валидации и ajax-отправки формы

// Как только страничка загрузилась window.onload = function () < // проверяем поддерживает ли браузер FormData if(!window.FormData) < alert("Браузер не поддерживает загрузку файлов на этом сайте"); >> $(document).ready(function()< // =validation var errorTxt = 'Ошибка отправки'; $("#sendform").validate(< submitHandler: function(form)< var form = document.forms.sendform, formData = new FormData(form), xhr = new XMLHttpRequest(); xhr.open("POST", "/send.php"); xhr.onreadystatechange = function() < if (xhr.readyState == 4) < if(xhr.status == 200) < $("#sendform").html('
Данные отправлены!
'); > > >; xhr.send(formData); > >); >)

Разберем более подробно этот код.

Для отправки файлов используется интерфейс FormData. Для кодирования данных метод FormData использует формат “multipart/form-data”. Это означает то, что он позволяет подготовить для отправки по AJAX как текстовые данные, так и файлы. При создании объекта FormData ему можно в качестве параметра указать DOM форму. В этом случае в объект FormData автоматически добавятся все поля (имяПоля:значение) этой формы.

О более детальной работе FormData можно почитать тут.

После загрузки страницы, с помощью строки if(!window.FormData) проверяем доступность данного объекта. В случае, если он не доступен сообщаем об этом пользователю (для демонстрации в коде сообщение выводится алертом, на живом сайте так делать не надо – правильней будет в форме, скрывать поле для загрузки файлов). Это касается совсем старых браузеров. Для всех современных браузеров все будет работать.

При нажатии на кнопку “Отправить” проверяются обязательные поля на заполненность с помощью метода validate и в случае успешной проверки (submitHandler) создается новый объект FormData, происходит вызов скрипта send.php, который и производит отправку форму и прикрепленного к ней файла.

Затем вместо формы выводится сообщение об успешной отправке. За это отвечает строка

$(«#sendform»).html(‘

Данные отправлены!

‘);

PHP-скрипт отправки данных с формы

 else < $filepath = ''; $filename = ''; >$body = "Имя:\r\n".$name."\r\n\r\n"; $body .= "Контактный номер:\r\n".$tel."\r\n\r\n"; $body .= "E-mail:\r\n".$email."\r\n\r\n"; $body .= "Описание заказа:\r\n".$message; send_mail($to, $body, $email, $filepath, $filename); > // Вспомогательная функция для отправки почтового сообщения с вложением function send_mail($to, $body, $email, $filepath, $filename) < $subject = 'Тестирование формы с прикреплением файла с сайта proverstka.com.ua'; $boundary = "--".md5(uniqid(time())); // генерируем разделитель $headers = "From: ".$email."\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n"; $multipart = "--".$boundary."\r\n"; $multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n"; $multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n"; $body = $body."\r\n\r\n"; $multipart .= $body; $file = ''; if ( !empty( $filepath ) ) < $fp = fopen($filepath, "r"); if ( $fp ) < $content = fread($fp, filesize($filepath)); fclose($fp); $file .= "--".$boundary."\r\n"; $file .= "Content-Type: application/octet-stream\r\n"; $file .= "Content-Transfer-Encoding: base64\r\n"; $file .= "Content-Disposition: attachment; filename=\"".$filename."\"\r\n\r\n"; $file .= chunk_split(base64_encode($content))."\r\n"; >> $multipart .= $file."--".$boundary."--\r\n"; mail($to, $subject, $multipart, $headers); > ?>

Дополнение от 28.12.2016

Отправка формы с прикреплением нескольких файлов

В элементе input, в котором прикрепляем файл, дописываем аттрибут multiple
(), что даст возможность выбора одновременно несколько файлов.

Изменяем php файл для обработки массива из нескольких файлов:

 $error) < if ($error == UPLOAD_ERR_OK) < $filename[$i][0] = $_FILES["file"]["tmp_name"][$key]; $filename[$i][1] = $_FILES["file"]["name"][$key]; $i++; >> > $body = "Имя:\r\n".$name."\r\n\r\n"; $body .= "Контактный номер:\r\n".$tel."\r\n\r\n"; $body .= "E-mail:\r\n".$email."\r\n\r\n"; $body .= "Описание заказа:\r\n".$message; send_mail($to, $body, $email, $filename); > // Вспомогательная функция для отправки почтового сообщения с вложением function send_mail($to, $body, $email, $filename) < $subject = 'Тестирование формы с прикреплением файла с сайта proverstka.com.ua'; $boundary = "--".md5(uniqid(time())); // генерируем разделитель $headers = "From: ".$email."\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n"; $multipart = "--".$boundary."\r\n"; $multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n"; $multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n"; $body = $body."\r\n\r\n"; $multipart .= $body; foreach ($filename as $key =>$value) < $fp = fopen($value[0], "r"); $content = fread($fp, filesize($value[0])); fclose($fp); $file .= "--".$boundary."\r\n"; $file .= "Content-Type: application/octet-stream\r\n"; $file .= "Content-Transfer-Encoding: base64\r\n"; $file .= "Content-Disposition: attachment; filename=\"".$value[1]."\"\r\n\r\n"; $file .= chunk_split(base64_encode($content))."\r\n"; >$multipart .= $file."--".$boundary."--\r\n"; mail($to, $subject, $multipart, $headers); > ?>

Источник

Форма обратной связи с прикреплением файла (Send attachments with PHP Mail())

Самый простой внешний вид формы обратной связи с тремя полями и полем для прикрепления файла:

 Name E-mail About your Project Attach file Даже добавим пару правил для стилей, чтобы форма была понятного вида:

Самое главное содержимое файла mail.php

 $message.=" --$boundary--"; if ($filesize < 10000000) < // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ mail($to, $subject, $message, $headers); echo $_POST['nameFF'].', Ваше сообщение отправлено, спасибо!'; >else < echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.'; >> ?>

Содержимое файла mail.js , перед подключением этого файла, подключаем jQuery.

$(function() < // E-mail Ajax Send // http://denis-creative.com/contact-form-with-attached-file/ // http://shpargalkablog.ru/2014/05/email-file-php.html // http://shpargalkablog.ru/2014/05/feedback-form-file.html document.getElementById('feedback-form').addEventListener('submit', function(evt)< var http = new XMLHttpRequest(), f = this; var th = $(this); evt.preventDefault(); http.open("POST", "mail.php", true); http.onreadystatechange = function() < if (http.readyState == 4 && http.status == 200) < alert(http.responseText); if (http.responseText.indexOf(f.nameFF.value) == 0) < // очистить поля формы, если в ответе первым словом будет имя отправителя (nameFF) th.trigger("reset"); >> > http.onerror = function() < alert('Извините, данные не были переданы'); >http.send(new FormData(f)); >, false); >);

В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…

Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких…

Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок,…

Немного другая вариация фиксированного меню. Меню фиксируется к верхней части экрана только на мобильных устройствах….

Доброго времени ! Форма просто супер, даже без танцев с бубном, как это обычно бывает .

Подскажите а как сделать чтобы и людям, отправившим запрос, приходило письмо к примеру от webmaster@домен
с такими же данными и припиской в конце:

Спасибо за обращение!
В ближайшее время наши сотрудники свяжутся с Вами.
Это сообщение отправлено с сайта (в скобках ссылка на сайт)

Буду очень признателен если поможете. Уже создал папку с закладками вашего блога …

Салют!
Благодарю за материал.
Вопрос: Почему не срабатывает оповещение о превышении лимита?
OpenServer Apache 2.4, PHP 5.6

Источник

Форма обратной связи, как сделать с вложением (прикреплением файлов)?

А так же есть обработчик — send.php, в котором необходимо сделать с вложением файлом, есть необходимость сделать с валидацией на загрузку определенных расширений, например «.jpg», «.jpeg», «.png», «.gif», а так же ограничить максимальный размер файла, к примеру 3Мб.

// Узнаем IP Адрес пользователя function getIp() < $keys = [ 'HTTP_CLIENT_IP', 'HTTP_X_FORWARDED_FOR', 'REMOTE_ADDR' ]; foreach ($keys as $key) < if (!empty($_SERVER[$key])) < $ipUser = trim(end(explode(',', $_SERVER[$key]))); if (filter_var($ipUser, FILTER_VALIDATE_IP)) < return $ipUser; >> > > $ipUser = getIp(); $siteName = 'MySite.RU' // Получаем данные из полей форм $fieldFormName = $_POST['fieldFormName']; $spam = $_POST['name']; $fieldName = $_POST['fieldName']; $mailUser = $_POST['fieldMail']; $fieldText = $_POST['fieldText']; // Оформление письма, которое придет получателю (и пользователю). if ($fieldFormName == 'Вопрос'): // Если форма с названием "Вопрос", то отправлять эти данные // Сообщение для меня $messageMe = ' 
'.$fieldFormName.' с сайта "'.$siteName.'"
 IP адрес отправителя: '.$ipUser.' 
Имя: '.$fieldName.' 
Электронная почта: '.$mailUser.' 
Текст: '.$fieldText.' '; // Сообщение для пользователя $messageUser = ' 
'.$fieldFormName.' с сайта "'.$siteName.'"
 IP адрес отправителя: '.$ipUser.' 
Имя: '.$fieldName.' 
Электронная почта: '.$mailUser.' 
Текст: '.$fieldText.' '; // Сообщение выводимое на сайте после успешной отправки $messageSent = ' Имя: '.$fieldName.' 
IP адрес отправителя: '.$ipUser.' 
Электронная почта: '.$mailUser.' 
Текст: '.$fieldText.' '; elseif ($fieldFormName == 'Отзыв'): // Иначе если форма с названием "Отзыв", то отправлять эти данные // Сообщение для меня $messageMe = ''; // Сообщение для пользователя $messageUser = ''; // Сообщение выводимое на сайте после успешной отправки $messageSent = ''; endif; // Определение СПАМа if (empty($spam)) < $mailTo= "username@mysite.ru"; // Кому отправляем форму $mailFrom = "no-replay@mysite.ru"; // От кого отправлена форма $subject = $fieldFormName.' с сайта "'.$siteName.'"'; // Тема письма (Пример: $subject = 'Сообщение с сайта';) // Заголовки, отвечающие за кодировку и тип письма, оставляем без изменений $headers = "From: $mailFrom\r\nReplay-To: $mailFrom\r\nContent-type: text/html; charset=utf-8\r\n"; // Отправляем пользователю mail(кому отправляем, тема, текст в сообщении, заголовки) mail ( $mailUser, $subject, $messageUser, $headers ); // Отправляем себе mail(кому отправляем, тема, текст в сообщении, заголовки) $send = mail ( $mailTo, $subject, $messageMe, $headers ); // Если отправка прошла успешно, то загружаем шаблон сайта с содержимым, иначе ошибка if ($send == 'true') < include_once('sent.php'); >else < echo 'Ой, ошибочка какая-то!'; >> else

Файл-шаблон результата sent.php

Назад

Поздравляем!

Сообщение отправлено!

Содержание письма:

Народ, Помогите Пожалуйста с решением данного вопроса, я просто не особо силен в php, иначе уже сам сделал бы.

Заранее Благодарю за помощь и ответ!

Простой 3 комментария

Источник