Отправка данных формы на email с помощью php и ajax
В данной заметке представлен рабочий скрипт для отправки данных формы на почту без перезагрузки страницы. С минимальными изменениями этот скрипт можно скопировать и использовать в любом проекте и на любой CMS, т.е. он полностью рабочий. Единственное, о чем стоит сказать отдельно: В этой заметке я не уделил внимание визуальной красоте формы, так как основная тема, в данном случае, все-таки сам механизм работы. Онлайн-демо, по понятным причинам, также не представлено.
1. Разметка формы
Итак, для начала нужно создать саму форму (все id и имена я указываю сразу, чтобы не удлинять повествование).
Обратите внимание, для формы на ajax не указываются атрибуты method и action (они будут указаны позже, в JS-коде). Также все поля в данном случае обязательны для заполнения (атрибут required), но это совершенно не обязательно. Обязательным требованием является указание атрибутов name и id. На этом с html закончили (Для того, чтобы форма была красивой нужно добавить классы к тегам и применить css-стили к данным классам и, по желанию, к указанным id).
2. PHP-скрипт отправки
Далее следует создать php-файл, который будет обрабатывать данные, полученные из формы, и отправлять их на указанный в скрипте email. В нашем случае файл называется «form_ask_us_ru.php».
Сам код будет выглядеть так, как показано ниже:
'; $fMail = 'Почта: '.$_POST['ask-us-email'].'
'; $fMessage = 'Сообщение: '.$_POST['ask-us-text'].'
'; $AllInOne = $fName.$fMail.$fMessage; $to = 'alex@alexryabikov.ru'; $headers="From: Alexryabikov.ru \nReply-to:info@alexryabikov.ru\nContent-Type: text/html; charset=\"utf-8\"\n"; // функция, которая отправляет наше письмо mail($to, 'Свяжитесь с нами', $AllInOne, $headers); ?>
Итак, в данном скрипте все данные из формы забираются через переменные вида $_POST[»];, после этого, все письмо объединяется в переменной $AllInOne. Переменная $to — это почта, на которую будут высланы данные формы, $headers — «заголовки» письма (от кого, адрес для ответа, кодировка письма). Далее следует функция mail(), которая принимает в качестве аргумента все вышеуказанные переменные. Текст «Свяжитесь с нами», принятый в качестве аргумента, в данном случае — это тема письма.
3. Ajax-скрипт + базовая анимация
В принципе, скрипт с небольшими модификациями, может работать и без ajax, но нас интересует именно отправка формы без перезагрузки страницы, поэтому продолжаем. Совершенно неважно как будет подключаться javascript-код в страницу: отдельным файлом или же прямо перед закрывающим . Я, обычно, подключаю прямиком в шаблон (но это, скорее, дело привычки). И так, сам код выглядит следующим образом:
Первая строка — это обработка события по отправке формы, триггером в данном случае служит id тега form. Далее появляется переменная с id popup_text — это всего лишь пустой контейнер div с таким айди, размещенный в любом месте страницы/шаблона. Строка url — содержит ссылку на файл-обработчик данных, типом отправки указывается POST. Метод serialize() — возвращает строку в виде, пригодном для обработки php-скриптом (Это если совсем упрощенно). В случае успеха происходит обработка успешной отправки и в ранее пустом контейнере popup_html всплывает надпись «Ваше сообщение успешно отправлено!», которое постепенно растворяется на экране (Тут можно выбрать другой эффект анимации, либо поиграться с таймингом, это все на вкус и цвет). Методы .val(), примененные к каждому элементу формы — очищают форму от ранее введенных данных (Если этого не требуется, то можно убрать эти строки). В блоке error — можно настроить обработку возможных ошибок при отправки данных, но это не относиться к теме данной статьи.
Итог: На выходе имеем полностью рабочий скрипт, который был апробирован на разных сайтах и CMS. Можно забирать и пользоваться. Надеюсь, заметка была достаточно полезной.
Другие читатели также интересовались:
Форма обратной связи на PHP с отправкой на e-mail
На этом уроке мы познакомимся с функцией mail (), на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла — forma.php и mail.php. В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form — кнопка «Отправить» и атрибут action, который ссылается на обработчик — mail.php, именно к нему обращаются данные из формы при нажатии кнопки «Отправить». В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php». На этой странице прописан скрипт на PHP, который обрабатывает данные формы :
Данные формы отправляются методом POST (обрабатывается как $ _POST). $ _POST — это массив переменных, переданных текущему скрипту через метод POST.
Ниже вы видите содержимое файла forma.php, поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name, значения мы прописываем сами, исходя из логики.
Форма обратной связи на PHP
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php. Придумываем сами имена для переменных. В PHP переменная начинается со знака $, а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы — значение name.
$to /cdn-cgi/l/email-protection» data-cfemail=»21584e54534c40484d61464c40484d0f424e4c»>[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 с отправкой на e-mail не так и сложно. Хотите узнать как сохранить данные, полученные из формы в файл или в базу данных? Этому научит вас мой видеокурс «PHP и MySQL с Нуля до Гуру».
Создано 10.08.2017 11:52:15
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 9 ):
Я как-то давно посмотрел видео из курса от Михаила Русакова. Там была форма, которая регистрировала пользователей. С тех пор я сам дошел до представленной выше конструкции, хотя посмотрел совсем другой урок.)
так и должно быть при обучении, если встречаются: хороший учитель и усердный ученик.
Так точно! вот я например никогда не создавал интернет магазины, а сделал за неделю
Привет, в этой форме при нажатии кнопки «Отправить сообщение» будет перебрасывать на файл mail.php? А можно как-то сделать, чтобы он не открывался?
У меня тоже проблема, форма отправляется пустой как только на нее перейти. Как можно перейти на нее без преждевременной отправки формы?
Добрый день! По строке скрипта: $message = «Номер телефона: «.$_POST[‘phone’].»
«; выдаёт ошибку syntax error, unexpected ‘$message’ (T_VARIABLE) Помогите пож. не вижу что не так. Это вторая команда в скрипте $message, пробовал и $message ., как в примере, и $message2, всё равно выдаёт ошибку.
я честно не мучаюсь и использую сайт https://formfor.site, пока не жалуюсь. Сообщения уходят в telegram и почту.
smineral — обработка и интеграция без конструктора форм даже. чем этот сервис лучше например qform24.com ? где всё тоже самое только 1. бесплатно полностью. 2. есть конструктор форм и так же подключение обработчика к готовой форме 3. есть кабинет по работе с заявками внутри сервиса, а не только экспорт в мессенджеры и все остальные функции что там заявлены тоже есть.
Отличный мини проект формы) все что нужно есть. Только подскажите пожалуйста как сделать сообщение об успешном отправлении сообщения? а то кидает на файл mail.php, может даже просто в виде модального окна — но чтобы не кидало на файлик. отправка работает — письмо пришло молниеносно)
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.