Ajax php post email

Обратная связь на PHP + Ajax. Быстрая отправка писем.

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

HTML

 
 
Имя * 
Почта * 
Тема * 
Сообщение 
 
 
 

На этой стадии мы просто создали HTML форму c id feedback, который мы теперь будем использовать для распознования формы в jQuery скрипте ниже.

jQuery

$(document).ready(function() < $("#feedback").submit(function()< var form = $(this); var error = false; form.find('input, textarea').each( function()< if ($(this).val() == '') < alert('Зaпoлнитe пoлe "'+$(this).attr('placeholder')+'"!'); error = true; >>); if (!error) < var data = form.serialize(); $.ajax(< type: 'POST', url: 'mail.php', dataType: 'json', data: data, beforeSend: function(data) < form.find('input[type="submit"]').attr('disabled', 'disabled'); >, success: function(data) < if (data['error']) < alert(data['error']); >else < alert('Письмo было отправлено, проверьте почту.'); >>, error: function (xhr, ajaxOptions, thrownError) < alert(xhr.status); alert(thrownError); >, complete: function(data) < form.find('input[type="submit"]').prop('disabled', false); >>); > return false; // вырубaeм стaндaртную oтпрaвку фoрмы >); >);

Скрипт выше сначала проверяет поля на наличие информации и если любое из них пустое показывает окошко и просит пользователя ввести нужные данные. Если ошибок нет, то идет отправка AJAX запроса к файлу mail.php (подробнее об этом файле ниже), который выполняет отправку письма на почту.

PHP

 if(!preg_match("|^[-0-9a-z_\.]+@[-0-9a-z_^\.]+\.[a-z]$|i", $email)) < $json['error'] = 'Нe вeрный фoрмaт почты.'; echo json_encode($json); die(); >// Кодировка для отправленных писем function mime_header_encode($str, $data_charset, $send_charset) < if($data_charset != $send_charset) $str=iconv($data_charset,$send_charset.'//IGNORE',$str); return ('=?'.$send_charset.'?B?'.base64_encode($str).'?='); >// Класс для отправки писем на почту class TEmail < public $from_email; public $from_name; public $to_email; public $to_name; public $subject; public $data_charset='UTF-8'; public $send_charset='windows-1251'; public $body=''; public $type='text/plain'; function send()< $dc=$this->data_charset; $sc=$this->send_charset; $enc_to=mime_header_encode($this->to_name,$dc,$sc).' to_email.'>'; $enc_subject=mime_header_encode($this->subject,$dc,$sc); $enc_from=mime_header_encode($this->from_name,$dc,$sc).' from_email.'>'; $enc_body=$dc==$sc?$this->body:iconv($dc,$sc.'//IGNORE',$this->body); $headers=''; $headers.="Mime-Version: 1.0\r\n"; $headers.="Content-type: ".$this->type."; charset=".$sc."\r\n"; $headers.="From: ".$enc_from."\r\n"; return mail($enc_to,$enc_subject,$enc_body,$headers); > > $emailgo = new TEmail; $emailgo->from_email = 'bologer.ru'; // Почта отправителя $emailgo->from_name = 'Проверка формы'; // Имя отправителя $emailgo->to_email = $email; // Куда будет отправлено письмо $emailgo->to_name = $name; // Имя получателя $emailgo->subject = $subject; // Тема $emailgo->body = $message; // Сообщение $emailgo->send(); $json['error'] = 0; echo json_encode($json); > else < echo 'У вас нет прав для входа на эту страницу!'; >?>

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

Версия PHP выше, не самая безопасная, если вам нужно использовать что-то более стабильное в плане безопасности, то можете восспользоваться вот этой php библиотекой. Так же в ней больше возможностей. Или переписать скрипт самому (если у вас имеются знания в PHP программировании).

На этом все. Если у вас возникли вопросы или сомнения, пожалуйста напишите мне комментарий. Я буду рад вам ответить.

Источник

kickboxer / ajax отправка формы на email с помощью jQuery и php

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

$(document).ready(function() < // вся магия после загрузки страницы

$(«#ajaxform»).submit(function() < // перехватываем все при событии отправки

var form = $(this); // запишем форму, чтобы потом не было проблем с this

var error = false; // предварительно ошибок нет

form.find(‘input, textarea’).each( function() < // пробежим по каждому полю в форме

if ($(this).val() == ») < // если находим пустое

alert(‘Заполните поле «‘+$(this).attr(‘placeholder’)+'»!’); // говорим заполняй!

error = true; // ошибка

>

>);

if (!error) < // если ошибки нет

var data = form.serialize(); // подготавливаем данные

$.ajax( < // инициализируем ajax запрос

type: ‘POST’, // отправляем в POST формате, можно GET

url: ‘gogogo.php’, // путь до обработчика, у нас он лежит в той же папке

dataType: ‘json’, // ответ ждем в json формате

data: data, // данные для отправки

beforeSend: function(data) < // событие до отправки

form.find(‘input[type=»submit»]’).attr(‘disabled’, ‘disabled’); // например, отключим кнопку, чтобы не жали по 100 раз

>,

success: function(data) < // событие после удачного обращения к серверу и получения ответа

if (data[‘error’]) < // если обработчик вернул ошибку

alert(data[‘error’]); // покажем её текст

> else < // если все прошло ок

alert(‘Письмо отвравлено! Чекайте почту! =)’); // пишем что все ок

>

>,

error: function (xhr, ajaxOptions, thrownError) < // в случае неудачного завершения запроса к серверу

alert(xhr.status); // покажем ответ сервера

alert(thrownError); // и текст ошибки

>,

complete: function(data) < // событие после любого исхода

form.find(‘input[type=»submit»]’).prop(‘disabled’, false); // в любом случае включим кнопку обратно

>

>);

>

return false; // вырубаем стандартную отправку формы

>);

>);

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

if ( $ _POST ) < // если передан массив POST

$ name = htmlspecialchars( $ _POST [» name «]); // пишем данные в переменные и экранируем спецсимволы

$ email = htmlspecialchars( $ _POST [» email «]);

$ subject = htmlspecialchars( $ _POST [» subject «]);

$ message = htmlspecialchars( $ _POST [» message «]);

$ json = array (); // подготовим массив ответа

if (! $ name or ! $ email or ! $ subject or ! $ message ) < // если хоть одно поле оказалось пустым

$ json [ ‘error’ ] = ‘Вы заполнили не все поля! Обмануть решили? =)’ ; // пишем ошибку в массив

echo json_encode( $ json ); // выводим массив ответа

die(); // умираем

>

if (!preg_match(» |^[-0-9a-z_\.]+@[-0-9a-z_^\.]+\.[a-z]$|i «, $ email )) < // проверим email на валидность

$ json [ ‘error’ ] = ‘Не верный формат email! >_

echo json_encode( $ json ); // выводим массив ответа

die(); // умираем

>

function mime_header_encode ( $ str , $ data_charset , $ send_charset ) < // функция преобразования заголовков в верную кодировку

if ( $ data_charset != $ send_charset )

$ str =iconv( $ data_charset , $ send_charset . ‘//IGNORE’ , $ str );

return ( ‘=?’ . $ send_charset . ‘?B?’ .base64_encode( $ str ). ‘?=’ );

>

/* супер класс для отправки письма в нужной кодировке */

class TEmail

public $ from_email ;

public $ from_name ;

public $ to_email ;

public $ to_name ;

public $ subject ;

public $ data_charset = ‘UTF-8’ ;

public $ send_charset = ‘windows-1251’ ;

public $ body = » ;

public $ type = ‘text/plain’ ;

function send ()

$ dc = $ this -> data_charset ;

$ sc = $ this -> send_charset ;

$ enc_to =mime_header_encode( $ this -> to_name , $ dc , $ sc ). ‘ to_email . ‘>’ ;

$ enc_subject =mime_header_encode( $ this -> subject , $ dc , $ sc );

$ enc_from =mime_header_encode( $ this -> from_name , $ dc , $ sc ). ‘ from_email . ‘>’ ;

$ enc_body = $ dc == $ sc ? $ this -> body :iconv( $ dc , $ sc . ‘//IGNORE’ , $ this -> body );

$ headers = » ;

$ headers .=» Mime-Version: 1.0 \r\n»;

$ headers .=» Content-type: «. $ this -> type .» ; charset= «. $ sc .»\r\n»;

$ headers .=» From: «. $ enc_from .»\r\n»;

return mail( $ enc_to , $ enc_subject , $ enc_body , $ headers );

>

>

$ emailgo = new TEmail ; // инициализируем супер класс отправки

$ emailgo -> from_email = ‘dontforget.pro’ ; // от кого

$ emailgo -> from_name = ‘Тестовая форма’ ;

$ emailgo -> to_email = $ email ; // кому

$ emailgo -> to_name = $ name ;

$ emailgo -> subject = $ subject ; // тема

$ emailgo -> body = $ message ; // сообщение

$ emailgo -> send (); // отправляем

$ json [ ‘error’ ] = 0 ; // ошибок не было

echo json_encode( $ json ); // выводим массив ответа

> else < // если массив POST не был передан

echo ‘GET LOST!’ ; // высылаем

>

?>

Источник

Отправка формы без перезагрузки страницы на 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-курсы, нужно только пройти онлайн-тест здесь

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Источник