ПОИСК

Создание AJAX формы отправки сообщений в MODX Revolution

Для создания AJAX формы нам понадобится:

modSwiftMailer - дополнение MODX Revolution, которое можно установить из репозитория
библиотека jQuery

Алгоритм работы:

пользователь заполняет поля и нажимает "Отправить"
форма обращается по адресу к ресурсу, где лежит сниппет sendMail
этот сниппет принимает Ajax запрос и отправляет письмо на адрес указанный в системной настройке emailsender

Создание формы отправки сообщения

Напишем код формы с необходимыми полями (можно создать отдельный чанк, если собираетесь вызывать форму на нескольких страницах):

Код

<form id="send-form" autocomplete="" method="post"> <fieldset> <legend>AJAX форма отправки сообщения</legend> <label for="name">Имя<span>*</span></label> <input type="text" name="name" id="name" value="" maxlength="255" required="required"> <label for="email">Email<span>*</span></label> <input spellcheck="false" name="email" id="email" value="" type="email" maxlength="255" required="required"> <label for="tel">Телефон</label> <input name="tel" id="tel" type="tel" maxlength="255" value=""> <label>Сообщение<span>*</span></label> <textarea name="text" id="msg" spellcheck="true" rows="10" cols="50" onkeyup="" onchange="" required="required" value=""></textarea> <br> <input id="sendmail" type="submit" class="btn btn-success" value="Отправить"> </fieldset> </form>

В моём случае эти поля:

Имя
Email
Телефон
Сообщение

Напротив полей, обязательных для заполнения, выставим атрибут required="required", чтобы форма не отправлялась, пока не будут заполнены данные поля.

Создание скрипта обработки формы

Создадим javascript, который будет обрабатывать форму и отправлять AJAX запрос для отправки сообщения на почту:

Код

<script type="text/javascript"> jQuery(document).ready(function() { jQuery('#send-form').submit(function(){ //при отправке формы собираем все данные из полей и ИД страницы var name = jQuery("input#name").val(); var email = jQuery("input#email").val(); var tel = jQuery("input#tel").val(); var msg = jQuery("textarea#msg").val(); var pageid = "[[*id]]"; //складываем все данные в одну строку (наш URL для AJAX-запроса) var dataString = 'name='+ name + '&email=' + email + '&tel=' + tel + '&msg=' + msg + '&id=' + pageid; jQuery.ajax({ type: "POST", url: "[[~117]]", //здесь указываем ИД ресурса, куда будет оправлен AJAX запрос data: dataString, success: function() { //сообщение об удачной отправке jQuery('#send-form').html("<div id='message'></div>"); jQuery('#message').html("<h2>Вопрос отправлен!</h2>") .append("<p>Скоро мы с вами свяжемся.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<i class=\"icon-ok\"></i>"); }); } }); return false; }); }); </script>

Этот код вставляем в head сайта после вызова библиотеки jQuery. Код закомментирован, дополнительно объясню, что 117 - это ИД ресурса, где содержиться наш обработчик AJAX вызова.

Создание обработчика AJAX запроса

Итак, давайте создадим сниппет, который будет обратывать AJAX вызов, назовём его sendMail. Код сниппета:

Код

<?php //отвечаем только на AJAX запросы if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;} //получаем значение ИД, при неправильном запросе - выход $id = filter_input(INPUT_POST, 'id' ); if (empty($id)) return; //определяем название ресурса, где произошла отправка сообщения $resource = $modx->getObject('modResource',$id); $pagetitle = $resource->get('pagetitle'); //фильтруем остальные данные получаемые в запросе $name = filter_input(INPUT_POST, 'name' ); $email = filter_input(INPUT_POST, 'email' ); $tel = filter_input(INPUT_POST, 'tel' ); $msg = filter_input(INPUT_POST, 'msg' ); //получаем системную настройку emailsender для получателя сообщений $recepient = $modx->getConfig('emailsender'); //инициализируем modSwiftMailer и отправляем сообщение на почту $modx->getService('mail', 'mail.modSwiftMailer'); $modx->mail->address('to', $recepient, 'Recepient'); $modx->mail->address('sender', $email, $name); $modx->mail->subject($pagetitle); //хтмл-код самого сообщения с данными $modx->mail->body("<h2>{$name}</h2> задал(а) вопрос на странице {$pagetitle} <p>{$msg} <br/> <b>email</b> {$email} <br/> <b>Телефон</b> {$tel}</p> "); $modx->mail->send(); $modx->mail->reset();

Сделаем вызов сниппета [[sendMail]] поместим этот вызов в поле "Содержимое" новосозданного ресурса, далее заменим в javascript коде 117 на ИД нашего ресурса. После этого меняем шаблон созданного ресурса на пустой _blank, сохраняем и наш обработчик готов.

Внимание! Данный метод отправки сообщения можно использовать с дополнением FormIt. Также в следствие непонятных для меня причин возникали ошибки при AJAX ответе на работу сниппета, при этом сообщение успешно доставлялось на почту админа.

Полный код шаблона, который используется в демо:

Код

<!DOCTYPE html> <html> <head> <title>[[++site_name]] - [[*pagetitle]]</title> <base href="[[++site_url]]" /> <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css"> <!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]--> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#send-form').submit(function(){ //при отправке формы собираем все данные из полей и ИД страницы var name = jQuery("input#name").val(); var email = jQuery("input#email").val(); var tel = jQuery("input#tel").val(); var msg = jQuery("textarea#msg").val(); var pageid = "[[*id]]"; //складываем все данные в одну строку (наш URL для AJAX-запроса) var dataString = 'name='+ name + '&email=' + email + '&tel=' + tel + '&msg=' + msg + '&id=' + pageid; jQuery.ajax({ type: "POST", url: "[[~123]]", //здесь указываем ИД ресурса, куда будет оправлен AJAX запрос data: dataString, success: function() { //сообщение об удачной отправке jQuery('#send-form').html("<div id='message'></div>"); jQuery('#message').html("<h2>Вопрос отправлен!</h2>") .append("<p>Скоро мы с вами свяжемся.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<i class=\"icon-ok\"></i>"); }); } }); return false; }); }); </script> </head> <body> <div class="container"> <form id="send-form" autocomplete="" method="post"> <fieldset> <legend>AJAX форма отправки сообщения</legend> <label for="name">Имя<span>*</span></label> <input type="text" name="name" id="name" value="" maxlength="255" required="required"> <label for="email">Email<span>*</span></label> <input spellcheck="false" name="email" id="email" value="" type="email" maxlength="255" required="required"> <label for="tel">Телефон</label> <input name="tel" id="tel" type="tel" maxlength="255" value=""> <label>Сообщение<span>*</span></label> <textarea name="text" id="text" spellcheck="true" rows="10" cols="50" onkeyup="" onchange="" required="required" value=""></textarea> <br> <input id="sendmail" type="submit" class="btn btn-success" value="Отправить"> </fieldset> </form> <div id="site-search-results"></div> <hr> </div> [^t^] </body> </html>

6351