LPF Landing Page Framework

Отправка произвольной формы без перезагрузки страницы

В Landing Page Framework такие вещи делаются очень просто.

AJAX-запросы в LPF — это просто!

Отправка любой формы на email, требует создание трех функциональных блоков:

Форма может быть любой. С любыми полями и в любом дизайне. Необходимо только указать атрибут id и метод отправки POST.

Отправка формы будет перехватываться с помощью jQuery. У формы не нужно указывать аттрибут action, поскольку POST-запрос будет отправляться на текущий адрес (текущую страницу).

Для того, чтобы перехватить POST-отправку на странице, используется файл _post.php, который автоматически подключается LPF перед выводом в браузер. Таким образом, если был POST/AJAX запрос, он обрабатывается в этом файле и дальнейшее выполнение LPF прекращается.

  1. Создается произвольная форма (в index.php)
  2. В js-script (тут же) ловим событие submit формы (когда нажата кнопка ОТПРАВИТЬ).
  3. С помощью jQuery формируем и отправляем POST-запрос по текущему адресу.
  4. POST-запрос принимает LPF и автоматически подключает только _post.php, где мы располагаем обработчик запроса.

Рассмотрим рабочий пример

Форма может быть любой.

HTML-код, например, такой:

<form method="post" id="post_form">
	<p><label>Имя <input type="text" name="field[name]" required></label></p>
	<p><label>Email <input type="email" name="field[email]" required></label></p>
	<p><label>Текст сообщения <textarea name="field[message]" required></textarea></label></p>
	<p><button type="submit">Отправить</button></p>
</form>

<div id="post_form_success"></div>

После отправки форма будет скрыта, и будет выведено сообщение об отправке. Для этого используется пустой #post_form_success. Именно в нём и будет выводиться ответ на ajax-запрос.

Сам ajax-запрос формируется в jQuery типовым образом:

<script>
$(document).ready(function() {
	$('#post_form').submit(function(){
		$.post("<?= CURRENT_URL ?>", $("#post_form").serialize(),  function(response) {
			$('#post_form').hide('slow');
			$('#post_form_success').html(response);
		});
		return false;
	});
});
</script>

Адрес AJAX-запроса указывается явно в виде php-константы CURRENT_URL (LPF создаёт её автоматически). При получении ответа (response), форма плавно скрывается (hide), а результат отправки выводится в #post_form_success.

В _post.php проверяем, что в POST-массиве присутствуют обязательные поля формы и дальше уже происходит обработка. Проверку можно сделать с помощью функции mso_check_post(), которая возвращает $_POST в случае успеха или false, если нужного поля нет:

if ($post = mso_check_post('field')) 
{
	... тут обработка запроса ...
}

В нашем примере name-поля формы указаны в виде массива ключей field, поэтому нам достаточно указать только это поле. Если полей несколько, то в mso_check_post() их следует указывать через запятую, например:

if ($post = mso_check_post('field1', 'field2', 'field3')) 
...

Такая проверка позволяет сразу отсечь неверные данные.

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

Привожу готовый код _post.php с комментариями.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

if ($post = mso_check_post('field')) 
{
	$to = 'ваш@email'; // адрес получателя
	$subject = 'Тема письма'; // тема письма
	
	$email = $post['field']['email']; // поле email
	$name = trim($post['field']['name']); // поле имя
	$message = trim($post['field']['message']); // поле сообщения
	
	// проверка emil
	if (!filter_var($email, FILTER_VALIDATE_EMAIL))
	{
		echo 'Неверный email! Обновите страницу (F5) и укажите правильный адрес';
		exit;
	}
	
	if (!$name)
	{
		echo 'Не указано имя! Обновите страницу (F5) и укажите своё имя';
		exit;
	}
	
	if (!$message)
	{
		echo 'Не указан текст сообщения! Обновите страницу (F5) и введите текст';
		exit;
	}	
	
	// формируем headers для письма
	$headers = 'From: '. $email . "\r\n"; // от кого

	// формируем тело сообщения
	$message = 'Имя: ' . $name . NR . 'Email: ' . $email . NR . NR . NR . $message; 
	 
	// кодируем заголовок в UTF-8
	$subject = preg_replace("/(\r\n)|(\r)|(\n)/", "", $subject);
	$subject = preg_replace("/(\t)/", " ", $subject);
	$subject = '=?UTF-8?B?' . base64_encode($subject) . '?=';

	// отправка
	@mail($to, $subject, $message, $headers);

	echo 'Спасибо, ваше сообщение отправлено!';
}

# end of file

Данный код можно поправить под свою задачу и расширить. Например, прикрутить валидацию формы через jQuery-плагин. Отправку mail можно сделать с помощью сторонней php-библиотеки. Форма, её дизайн и html-ответ может быть произвольным.


Tweet

О проекте

Landing Page Framework упрощает создание целевых страниц, избавляя вебмастера от массы рутинных операций. Фреймворк обладает мощным ядром, способным решать сложные задачи. Сайты, созданные в LPF, будут работать с очень высокой скоростью даже на слабых серверах.

Контакт