Отправка данных формы на email с помощью php и ajax

В данной заметке представлен рабочий скрипт для отправки данных формы на почту без перезагрузки страницы. С минимальными изменениями этот скрипт можно скопировать и использовать в любом проекте и на любой CMS, т.е. он полностью рабочий. Единственное, о чем стоит сказать отдельно: В этой заметке я не уделил внимание визуальной красоте формы, так как основная тема, в данном случае, все-таки сам механизм работы. Онлайн-демо, по понятным причинам, также не представлено.

1. Разметка формы

Итак, для начала нужно создать саму форму (все id и имена я указываю сразу, чтобы не удлинять повествование).

<form id="form-ask-us">

<input id="form-ask-us-name" name="ask-us-name" required="" type="text" value="" placeholder="Ваше имя" />
<input id="form-ask-us-email" name="ask-us-email" required="" type="email" value="" placeholder="Вaш email" />
<textarea id="form-ask-us-text" name="ask-us-text" required="" placeholder="Вaше сообщение"></textarea>
<input type="submit" />



</form>

Обратите внимание, для формы на ajax не указываются атрибуты method и action (они будут указаны позже, в JS-коде). Также все поля в данном случае обязательны для заполнения (атрибут required), но это совершенно не обязательно. Обязательным требованием является указание атрибутов name и id. На этом с html закончили (Для того, чтобы форма была красивой нужно добавить классы к тегам и применить css-стили к данным классам и, по желанию, к указанным id).

2. PHP-скрипт отправки

Далее следует создать php-файл, который будет обрабатывать данные, полученные из формы, и отправлять их на указанный в скрипте email. В нашем случае файл называется «form_ask_us_ru.php».
Сам код будет выглядеть так, как показано ниже:

<?php 
    $fName = 'Имя: '.$_POST['ask-us-name'].' <br />';
    $fMail =  'Почта: '.$_POST['ask-us-email'].' <br />';
    $fMessage =  'Сообщение: '.$_POST['ask-us-text'].' <br />';
    $AllInOne =  $fName.$fMail.$fMessage;
    $to = 'alex@alexryabikov.ru'; 
    $headers="From: Alexryabikov.ru <site@test.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-код в страницу: отдельным файлом или же прямо перед закрывающим . Я, обычно, подключаю прямиком в шаблон (но это, скорее, дело привычки). И так, сам код выглядит следующим образом:

<script>
	$('#form-ask-us').submit(function(e){
	var popup = $('#popup_text');
	e.preventDefault();
	$.ajax({
	url: "/form_ask_us_ru.php",
	type: "POST",
	data: $('#form-ask-us').serialize(),
	success: function(response) {
	//обработка успешной отправки
	 popup.html('Ваше сообщение успешно отправлено!').delay(2000).fadeOut(1000);
	
	$('#form-ask-us-name').val('');
	$('#form-ask-us-email').val('');
	$('#form-ask-us-text').val('');
	},
	error: function(response) {
	//обработка ошибок при отправке
	}
	});
	});
	</script>

Первая строка — это обработка события по отправке формы, триггером в данном случае служит id тега form. Далее появляется переменная с id popup_text — это всего лишь пустой контейнер div с таким айди, размещенный в любом месте страницы/шаблона. Строка url — содержит ссылку на файл-обработчик данных, типом отправки указывается POST. Метод serialize() — возвращает строку в виде, пригодном для обработки php-скриптом (Это если совсем упрощенно). В случае успеха происходит обработка успешной отправки и в ранее пустом контейнере popup_html всплывает надпись «Ваше сообщение успешно отправлено!», которое постепенно растворяется на экране (Тут можно выбрать другой эффект анимации, либо поиграться с таймингом, это все на вкус и цвет). Методы .val(), примененные к каждому элементу формы — очищают форму от ранее введенных данных (Если этого не требуется, то можно убрать эти строки). В блоке error — можно настроить обработку возможных ошибок при отправки данных, но это не относиться к теме данной статьи.

Итог: На выходе имеем полностью рабочий скрипт, который был апробирован на разных сайтах и CMS. Можно забирать и пользоваться. Надеюсь, заметка была достаточно полезной.