Как сделать отправку формы на почту html

Нашей условной задачей будет отправка формы заказа обратного звонка на почту. Поля ввода вы можете использовать любые, главное чтобы отличались атрибуты name и id в теге input:

Создаем html форму для отправки предположим в файле index.html

Создаем обработчик формы — файл send.php. Чтобы было легко сориентироваться в скрипте, оставляю ключевые комментарии у нужных строк.

 if (isset($_POST['phone'])) /* Сюда впишите свою эл. почту */ $myaddres = "email@yandex .ru"; // кому отправляем /* А здесь прописывается текст сообщения, \n - перенос строки */ $mes = "Тема: Заказ обратного звонка!\nТелефон: $phone\nИмя: $name"; /* А эта функция как раз занимается отправкой письма на указанный вами email */ $sub='Заказ'; //сабж $email='Заказ обратного звонка'; // от кого $send = mail ($myaddres,$sub,$mes,"Content-type:text/plain; charset = utf-8\r\nFrom:$email"); ini_set('short_open_tag', 'On'); header('Refresh: 3; URL=index.html'); ?>     Спасибо! Мы свяжемся с вами!    Спасибо! Мы свяжемся с вами!

Всё готово. Скрипт 100% работает. Если письма не доходят, проверьте правильность ввода адреса почты и посмотрите логи на вашем хостинге.

Как подключить форму, чтобы данные приходили на на email почту?

Всем здравствуйте. Опять я со своими глупыми вопросами. Я сверстал сайт на Бутстрап 3. И не могу понять как подключить формы ввода , чтобы имя и телефон клиента приходили на Email. Нужно ли делать отдельный файл PhP?. может это легко как в Курсе PhP ,но у меня пока не получается.

3 years ago

5 ответов

На php несколько строчек кода, если на хостинге, где будет расположен сайт, позволяет это сделать. Этот способ не будет на локальном сайте отправлять почту.

или можно использовать отправку почты через smtp Gmail почты или любой другой, кода там на несколько строчек больше, но эти строчки — это реквизиты подключения к почте.

Но проще и наверное лучше использовать для сайте Фреймворк, где настройки почты, базы данных в одном месте находятся.

Позже примеры скину

3 years ago

Спасибо за ответ, Честно говоря не совсем понял если пример скинете .

Все-таки нужно файл form.php создать. но как присоединить к index.html основному файлу. ?

3 years ago

Все-таки нужно файл form.php создать. но как присоединить к index.html основному файлу. ?

Нужно прописать в форме, что данные передаются через post и в качестве action указать скрипт на php, который получит post данные из формы и с ними можно уже делать, что угодно: Отправлять почту, записывать в базу данных, трансформировать данные и прочее.

Вот тут есть про получение данных post и get из формы html и связывания html формы с php языком:

Ну и как обещал примеры:

1. Если сайт располагается на хостинге (на том же timeweb.ru который в курсе показывается):

[email protected]'; $subject = 'the subject'; $message = 'hello'; $headers = array( 'From' => '[email protected]', 'Reply-To' => '[email protected]', 'X-Mailer' => 'PHP/' . phpversion() ); mail($to, $subject, $message, $headers); ?>

Пример с документации по php:

Этот способ не будет работать с локального сайта (xampp), только на реальном хостинге с поддержкой функции mail.

2. Работает и на локальном сайте (xampp) и на реальном хостинге для сайта:

Устанавливается composer (тут можно посмотреть):

Потом с помощью composer устанавливается библиотека PHPMailer:

composer require phpmailer/phpmailer

И потом скрипт такой:

require 'vendor/autoload.php'; use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\SMTP; use PHPMailer\PHPMailer\Exception; $mail = new PHPMailer(true); // Настройки $mail->SMTPDebug = SMTP::DEBUG_SERVER; // Включение логов работы $mail->isSMTP(); // Отправка использует SMTP $mail->Host = 'smtp.gmail.com'; // Задается smtp от gmail $mail->SMTPAuth = true; // Включается SMTP аутентификация $mail->Username = '[email protected]'; // Ящик почты из gmail $mail->Password = 'YOUREMAILPASSWORD'; // Пароль от почты gmail $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // TLS шифровка $mail->Port = 587; // Порт smtp // Отравитель и получатель $mail->setFrom('[email protected]', 'Mailer'); $mail->addAddress('TOADDRESS'); // адрес // Тело письма $mail->isHTML(true); // Отправить письмо в формате html (поддерживаются html теги) $mail->Subject = 'Тема письма'; $mail->Body = 'Тест письма с html тегами'; // Отправка почты $mail->send();

Лучше создать новую почту gmail (нужно из интерфейса gmail отправить хотя бы одно письмо, а то будет ошибка при отправки через скрипт).

Отправка данных формы

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.

Пример 1. Отправка данных формы

HTML5 IE Cr Op Sa Fx

    Данные формы

В этом примере данные формы, обозначенные атрибутом name ( login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

Табл. 1. Различия между методами GET и POST

GET	POST
Ограничение на объём	4 Кб	Ограничения задаются сервером.
Передаваемые данные	Видны сразу всем.	Видны только при просмотре через расширения браузера или другими методами.
Кэширование	Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы.	Страница всегда одна.
Закладки	Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже.	Страницы с разными запросами имеют один адрес, запрос повторить нельзя.

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

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

Передача небольших текстовых данных на сервер; поиск по сайту.

Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.

POST

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега (пример 2).

Пример 2. Открытие формы во фрейме

HTML5 IE Cr Op Sa Fx

Использование фрейма

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .

Элементы формы традиционно располагаются внутри тега , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

Пример 3. Связывание формы с полями

HTML5 IE Cr Op Sa Fx

Форма

В этом примере тег однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form=»auth» . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

Пример 4. Отправка формы

HTML5 IE Cr Op Sa Fx

    Отправка формы

Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.

Исходники их предыдущих уроков

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

Подключение и настройка PHPMailer

PHPMailer — это довольно старая (создана в 2001 г.) библиотека для отправки электронных писем. Не смотря на это — популярна на сегодняшний день. Данная библиотека имеет ряд преимуществ по сравнению со стандартной функцией языка PHP — mail().

Поддерживает принцип объектно-ориентированного программирования
Встроенная аутентификация через TSL, SSL
Поддерживает протокол SMTP, который могут использовать аутентифицированные пользователи
Отображает сообщения об ошибках на 40 языках

Скачать PHPMailer можно по ссылке на GitHub. Архив распаковываем в папке с вашим проектом.

После создаем новый файл send_mail.php — скрипт для отправки сообщений. Внутри него подключаем библиотеку PHPMailer. Вставляем код ниже. Важно, чтобы файлы библиотеки находились в папке PHPMailer.

Далее создадим объект mail для работы с почтой и считаем поля формы с файла index.html. Передаем данные методом POST.

$mail = new PHPMailer(true); /* Создаем объект MAIL */ $mail->CharSet = "UTF-8"; /* Задаем кодировку UTF-8 */ $mail->IsHTML(true); /* Разрешаем работу с HTML */ $name = $_POST["name"]; /* Принимаем имя пользователя с формы .. */ $email = $_POST["email"]; /* Почту */ $phone = $_POST["phone"]; /* Телефон */ $message = $_POST["message"]; /* Сообщение с формы */

Подготавливаем письмо к отправке

В скрипте send_mail.php мы получили данные с формы, теперь их необходимо подготовить. Создадим новый файл template_mail.html — HTML-разметку для данных из формы.

  Данные с формы обратной связи
 Имя: %name%
 Email: %email%
 Телефон: %phone%
 Сообщение: %message%

Вместо %name% будет вставляться имя пользователя, отправляющего письмо. И так далее. Вы можете создать ту разметку, которая вам нужна.

Чтобы заменить данные в разметке, в файле send_mail.php пропишем следующее:

$email_template = "template_mail.html"; // Считываем файл разметки $body = file_get_contents($email_template); // Сохраняем данные в $body $body = str_replace('%name%', $name, $body); // Заменяем строку %name% на имя $body = str_replace('%email%', $email, $body); // строку %email% на почту $body = str_replace('%phone%', $phone, $body); // строку %phone% на телефон $body = str_replace('%message%', $message, $body); // строку %message% на сообщение

Отправляем письмо (пока с перезагрузкой)

Итак теперь все готово, чтобы отправить наше письмо на почту. Здесь мы задаем адрес email (их может быть несколько), тему письма. В конце возвращаем ответ в формате JSON. Это нужно, чтобы показать пользователю, что сообщение успешно отправлено.

$mail->addAddress("your-name@email.com"); /* Здесь введите Email, куда отправлять */ $mail->setFrom($email); $mail->Subject = "[Заявка с формы]"; /* Тема письма */ $mail->MsgHTML($body); /* Проверяем отправлено ли сообщение */ if (!$mail->send()) < $message = "Ошибка отправки"; >else < $message = "Данные отправлены!"; >/* Возвращаем ответ */ $response = ["message" => $message]; /* Ответ в формате JSON */ header('Content-type: application/json'); echo json_encode($response); ?>

Отправляем данные без перезагрузки страницы

Теперь перейдем к самому главному, отправим данные на почту без перезагрузки страницы. Отмечу, что все что мы делали до — у вас должно работать.

Подготовка скрипта из прошлого урока

Чтобы сильно не усложнять приведу подготовленный JS-код из предыдущего урока (он хранится в файле app.js).

const form = document.forms["form"]; const formArr = Array.from(form); const validFormArr = []; const button = form.elements["button"]; formArr.forEach((el) => < if (el.hasAttribute("data-reg")) < el.setAttribute("is-valid", "0"); validFormArr.push(el); >>); form.addEventListener("input", inputHandler); form.addEventListener("submit", formCheck); // обработка кнопки "Отправить" function inputHandler(< target >) < if (target.hasAttribute("data-reg")) < inputCheck(target); >> function inputCheck(el) < const inputValue = el.value; const inputReg = el.getAttribute("data-reg"); const reg = new RegExp(inputReg); if (reg.test(inputValue)) < el.setAttribute("is-valid", "1"); el.style.border = "2px solid rgb(0, 196, 0)"; >else < el.setAttribute("is-valid", "0"); el.style.border = "2px solid rgb(255, 0, 0)"; >> // Здесь проверяем, можно ли отправить форму function formCheck(e) < e.preventDefault(); // блокируем input const allValid = []; // создаем массив валидных значений validFormArr.forEach((el) =>< allValid.push(el.getAttribute("is-valid")); // проверяем каждое поле >); const isAllValid = allValid.reduce((acc, current) => < // проверяем, чтобы все было правильно return acc && current; >); if (!Boolean(Number(isAllValid))) < alert("Заполните поля правильно!"); // если не правильно - сообщение пользователю return; >formSubmit(); // если правильно - отправляем данные >

Самое основное начинается с нажатии на кнопку «Отправить», после этого вызывается функция formCheck, которая (как понятно из названия) проверяет форму на корректность заполненных данных. Сначала мы формируем массив валидных значений, он выглядит примерно так allValid = [0, 1, 1, 0], где 0 — поле заполнено неверно, 1 — поле заполнено верно.

После чего мы сводим весь массив allValid к единому значений isAllValid. Если в массиве allValid все единички, тогда isAllValue = true, в противном случае проверка не пройдена (тогда будет сообщение пользователю). Если проверка пройдена вызываем по цепочке функцию formSubmit.

Отправка данных на почту

Теперь, когда проверка пройдена, можем отправить данные на почту без перезагрузки страницы. В этом нам поможем асинхронная функция formSubmit.

async function formSubmit() < const data = serializeForm(form); // получаем данные формы const response = await sendData(data); // отправляем данные на почту if (response.ok) < let result = await response.json(); // если ответ OK отвечает пользователю alert(result.message); // .. что данные отправлены formReset(); // сбрасываем поля формы >else < alert("Код ошибки: " + response.status); // если not OK - показываем код ошибки >> function serializeForm(formNode) < // формируем данные формы return new FormData(form); >async function sendData(data) < return await fetch("send_mail.php", < // отправляем в скрипт send_mail.php method: "POST", // методом POST body: data, >); > function formReset() < // сброс полей формы form.reset(); validFormArr.forEach((el) =>< el.setAttribute("is-valid", 0); el.style.border = "none"; >); >

В начале собираем данные с формы с помощью функции serializeForm. Далее эти данные передаем в скрипт send_mail.php функцией sendData. PHP-скрипт сам занимается отправкой сообщения на почту. А мы тем временем ожидаем ответа от PHP-скрипта (специально указали await перед sendData). В этом собственно и заключается асинхронность. Как только ответ получен, то мы его проверяем: если все ОК — говорим пользователю, что сообщение отправлено и сбрасываем поля формы. В противном случае показываем код ошибки (с сервера).

Исходный код на GitHub

Скачать исходный код всей формы со скриптами вы можете по ссылке из моего репозитория на GitHub.

Как сделать отправку формы на почту html