Как отправить форму на почту

Нашей условной задачей будет отправка формы заказа обратного звонка на почту. Поля ввода вы можете использовать любые, главное чтобы отличались атрибуты 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 ,но у меня пока не получается.

5 ответов

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

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

Нужно прописать в форме, что данные передаются через post и в качестве action указать скрипт на php, который получит post данные из формы и с ними можно уже делать, что угодно: Отправлять почту, записывать в базу данных, трансформировать данные и прочее. Вот тут есть про получение данных post и get из формы html и связывания html формы с php языком: https://fructcode.com/ru/courses/php-and-mysql/video-form-get-and-post/ Ну и как обещал примеры: 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: https://www.php.net/manual/en/function.mail.php Этот способ не будет работать с локального сайта (xampp), только на реальном хостинге с поддержкой функции mail. 2. Работает и на локальном сайте (xampp) и на реальном хостинге для сайта: Устанавливается composer (тут можно посмотреть): https://fructcode.com/ru/courses/yii2/how-to-install-yii2-framework-with-composer-part1/ Потом с помощью 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 отправить хотя бы одно письмо, а то будет ошибка при отправки через скрипт).

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

Здравствуйте. Спасибо за такой развернутый ответ. Тут есть вся исчерпывающая информация . Буду разбираться. Что то тяжело мне дается. Это по сути есть все в курсе. Невнимательность моя.

И все же ничего не получилось думаю на хостинге подскажут непосредственно. Вся задержка из-за этой формы .

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

В первом уроке делали разметку для формы обратной связи, во втором — проверяли поля на правильность ввода (валидация). Вы можете пройти эти уроки, либо скачать исходники из последнего урока по ссылке на 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% будет вставляться имя пользователя, отправляющего письмо. И так далее. Вы можете создать ту разметку, которая вам нужна.

Читать:

Как узнать код символа в excel

Чтобы заменить данные в разметке, в файле 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.