Send Mail by JavaScript AJAX PHP Mail Function by Submit form
Ajax (Asynchronous JavaScript and XML) means by send or receive data with the server without refreshing or reloading the web page. In this post explain about form data submitted using by Ajax and using mail function for send email.
In this post also given code with an example of how to contact form collecting user queries and data after submitting the contact form.
These form data will send to PHP page (submitForm.php) through jQuery Ajax and also show the response to Ajax. Also improve the output format of email better and make it a beautiful HTML formated Email.
Query Ajax Contact Form
This contact form contains input fields to get user information and feedback. It triggers AJAX call on the click of its send button.
jQuery AJAX Send Data to PHP file by Event Handler
Below code validate contact form and send AJAX Request to PHP (submitForm.php) page. Its work collect contact form input fields information and send to PHP page which having PHP Mail function.
function sendMail()< var getname = jQuery('#name').val(); var getemail = jQuery('#email').val(); var gettext = jQuery('#contactTextarea').val(); var getSubject = jQuery('#subject').val(); if(getname != '' && getname != '' && getname != '')< jQuery('#emailSendResult').html('Mail Sending. '); $.ajax(< url:'submitForm.php', data:< name:getname, email:getemail, message:gettext, subject:getSubject>, method: 'POST', success: function(data) < jQuery('#emailSendResult').html(data); >>); >else < jQuery('#emailSendResult').html('Please Enter All Required Fields.'); >>
Code for HTML Formated Email
PHP Code for Sending Contact Mail by using the mail function.
In the PHP mail function, last parameter is optional but if required when sending HTML format email. So the developer pass along with content Type declaration its tells email client to parse the email as HTML format.
Отправка формы без перезагрузки страницы на PHP и Ajax
Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара.
Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как например маска телефона. Это вы сможете сделать при необходимости в зависимости от задачи.
Используя только одно включение кода из этого примера, можно создать неограниченное количество различных форм на странице. Это будет актуально, например для сайтов лендингов, где на одной странице используется множество различных форм.
HTML-код формы
Для начала создадим саму форму на HTML. Для примера будем использовать только 3 поля: имя, телефон и сообщение. Один важный момент: у тега обязательно должен быть id. Если на странице будут использоваться несколько форм, то id соответственно должны быть различные.
Зачем это нужно? Именно по этому идентификатору скрипт и будет отличать отправленную форму от других. И при этом не возникнет необходимости делать несколько включений одного и того же JavaScript кода. Но тут опять же все индивидуально и вы можете переделать код как вам удобно.
В форме используем атрибут type в зависимости от типа поля. Это даст дополнительное преимущество при проверке вводимых данных. Чаще всего приходится использовать такие поля как:
Подборка бесплатных IT-курсов и вебинаров от Skillbox.
Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь
Так же на данный момент для полей существуют различные атрибуты, которые избавят от лишних проверок на JavaScript. В этом примере используется атрибут required устанавливающий поле обязательным. А вот например в атрибуте pattern можно указать регулярное выражение для проверки маски ввода. Но я все же для этих целей использую соответствующий плагин jQuery.
Отправка формы без перезагрузки страницы
Тут самое интересное. Но как всегда на самом деле все просто. Приведенный ниже код можно подключить в отдельном .js скрипте или прямо в теле страницы перед закрывающим тегом
И не забудьте перед кодом подключить библиотеку jQuery!
$(document).ready(function () < $("form").submit(function () < // Получение ID формы var formID = $(this).attr('id'); // Добавление решётки к имени ID var formNm = $('#' + formID); $.ajax(< type: "POST", url: '/send.php', data: formNm.serialize(), beforeSend: function () < // Вывод текста в процессе отправки $(formNm).html('
Отправка.
'); >, success: function (data) < // Вывод текста результата отправки $(formNm).html('
'+data+'
'); >, error: function (jqXHR, text, error) < // Вывод текста ошибки отправки $(formNm).html(error); >>); return false; >); >);
Скрипт отслеживает событие submit и получает id той формы, которая была отправлена. Далее по имеющемуся id он обращается к данным этой формы. В данном примере скрипт отслеживает все элементы с тегом .
Хотите купить новый телефон? Здесь вы можете купить айфон краснодар с высоким качеством и по низкой цене.
После получения данных, скрипт передает их PHP обработчику send.php, который находится в корне сайта. Во время отправки данных в теге выводятся сообщения из функций beforeSend — перед отправкой, success — в случае успеха и error в случае ошибки. Сами поля формы и кнопка отправки при этом стираются.
PHP обработчик
$mailTo = "mail@mail.ru"; // Ваш e-mail $subject = "Письмо с сайта"; // Тема сообщения $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; $headers . ; if(mail($mailTo, $subject, $message, $headers)) < echo "Спасибо, ".$_POST['name'].", мы свяжемся с вами в самое ближайшее время!"; >else < echo "Сообщение не отправлено!"; >> ?>
В самом начале проверяем, что запрос пришел из Ajax и что поле имя не пусто. Далее получаем данные переданные Ajax имя, телефон и сообщение если есть. Устанавливаем заголовки и отправляем с помощью PHP-функции mail() .
$mailTo — ваш e-mail, куда будут приходить сообщения с сайта $subject — тема сообщения $headers . mailto:info@site.ru»> info@site.ru \r\n»; — здесь указываем почту с доменом вашего сайта. Почта не обязательно должна существовать (хотя некоторые почтовые сервисы требуют и этого), но обязательно должна быть на домене сайта, с которого отправляется письмо, иначе оно будет попадать в СПАМ.
Заключение
Как вы могли убедиться использовать технологию AJAX с библиотекой jQuery и отправлять письма без перезагрузки страницы вообще проще простого. Надеюсь этот пример формы на PHP и AJAX или отдельные его части пригодятся вам для разработки различных решений для сайта.
Подборка бесплатных IT-курсов и вебинаров от Skillbox.
Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы.
HTML-код формы
Добавляем в форму ещё одно поле файл:
JavaScript код с jQuery Ajax
Не забудьте перед кодом подключить библиотеку jQuery!
Отправляем данные с помощью объекта FormData — предназначенного для кодирования данных, которые необходимо отправить на сервер посредством технологии AJAX (XmlHttpRequest). Для кодирования данных метод FormData использует формат multipart/form-data . Это означает то, что можно подготовить для отправки по AJAX не только текстовые данные, но и файлы ( input с атрибутом type=»file» ).
PHP обработчик
Файлы, которые будут отправлены, необходимо закодировать в формат base64 и указать в заголовках информацию о том, что в письме присутствуют файлы.
Чтобы отделить закодированный файл от текста письма, необходимо добавить текстовый разделитель, это может быть любая уникальная строка, в нашем случае $boundary = «—«; . Разделитель следует обозначить в отправляемых заголовках, и выводить до и после прикрепления файла в тексте письма.
Подборка бесплатных IT-курсов и вебинаров от Skillbox.
Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь
$mailTo = "mail@mail.ru"; // Ваш e-mail $subject = "Письмо с сайта"; // Тема сообщения $from = "info@site.ru"; // Почта отправителя $boundary = "---"; //Разделитель /* Заголовки */ $headers = "From: $from\nReply-To: $from\n"; $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\""; $body = "--$boundary\n"; /* Присоединяем текстовое сообщение */ $body .= "Content-type: text/html; charset='utf-8'\n"; $body .= "Content-Transfer-Encoding: quoted-printablenn"; $body .= "Content-Disposition: attachment; filename==?utf-8?B?".base64_encode($filename)."?=\n\n"; $body .= $message."\n"; $body .= "--$boundary\n"; if ($_FILES['file']['error'] == UPLOAD_ERR_OK) < // получаем расширение исходного файла $ext = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION)); // получаем уникальное имя под которым будет сохранён файл $filename = md5(uniqid('', true)).'.'.$ext; // перемещаем файл из временного хранилища в указанную директорию if (move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$filename)) < $file = fopen($filename, "r"); //Открываем файл $text = fread($file, filesize($filename)); //Считываем весь файл fclose($file); //Закрываем файл >> /* Добавляем тип содержимого, кодируем текст файла и добавляем в тело письма */ $body .= "Content-Type: application/octet-stream; name==?utf-8?B?".base64_encode($filename)."?=\n"; $body .= "Content-Transfer-Encoding: base64\n"; $body .= "Content-Disposition: attachment; filename==?utf-8?B?".base64_encode($filename)."?=\n\n"; $body .= chunk_split(base64_encode($text))."\n"; $body .= "--".$boundary ."--\n"; if(mail($mailTo, $subject, $body, $headers)) < echo "Спасибо! Мы свяжемся с вами в самое ближайшее время!"; >else < echo "Сообщение не отправлено!"; >> ?>
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее
jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее
