Как сделать такую форму на CMF Modx..? В базовом варианте нам понадобятся:
сниппет ddSendFeedback;
и сниппет ddGetChunk;
также надо будет скачать и подключить jQuery (можно последний 1.10) и плагин ajaxForm;
Далее по-порядку создадим:
1) Чанк шаблон для получателя почты
<!DOCTYPE html>
<html lang="ru">
<body>
<div style="color:#3c3c3c;">
<h2>Контактные данные</h2>
<span style="color:#007cc3;">Имя:</span> [+name+]
<span style="color:#007cc3;">Email:</span> [+email+]
<h2>Сообщение</h2>
[+message+]
</div>
</body>
</html>
2) Новый документ-контейнер «AJAX» (это для удобства)
3) Дочерний документ «Обратная связь», выставляем у него:
- шаблон — «(blank)» (т.к. нам не нужен никакой HTML);
- тип содержимого — «application/json».
* Пусть id вновь созданного документа будет «100»
В содержимом документа «Обратная связь» разместим некэшируемый вызов сниппета ddSendFeedback:
[!ddSendFeedback?
&email=`demo@gmail.com`
&tpl=`mail_feedback`
&fromField=`email`
&filesFields=`screenshort`
!]
* В параметре «filesFields» необходимо указать имя элемента формы, содержащего файл (в данном случае это
<input type="file" name="screenshort" />
, если такого нет, опустите этот параметр.
** Отдельного внимания заслуживает параметр «fromField», он нужен нам для того, чтобы письма нам приходили от ящика, который указал пользователь (это удобно).
4) Создаём чанк «feedbackForm» со следующим содержимым:
<form id="myForm" action="[~100~]" method="post" enctype="multipart/form-data">
Имя: <input type="text" name="name" required />
Email: <input type="email" name="email" required />
Скриншот: <input type="file" name="screenshort" />
Сообщение: <textarea name="message" required></textarea>
<input type="submit" value="Отправить" />
</form>
5) Создаём опубликованный документ «script.js» (можно в корне, можно также где-то дочерним документом, не принципиально), выставляем у него:
- шаблон — «(blank)»;
- тип содержимого — «text/javascript».
* Пусть id этого документа будет «101».
6) Пишем необходимый js и вставляем в содержимое документа «script.js»
jQuery( document ).ready(function( $ ) {
//Применяем плагин $.form к нашей форме и назначаем функцию после отправки
$('#myForm').ajaxForm(function(reply){
//У объекта reply будет следующая структура: {status: true, title: '', message: ''}
alert('Спасибо!' + reply.title + '
' + reply.message); //это для отладки
});
});
тут есть два подварианта — добавить вызов чанка в нашем JavaScript
// к элементу <body> (естественно, добавить можно к любому)
$('body').append('[[ddGetChunk? &name=`feedbackForm`]]');
либо просто вызвать на отдельной странице {{feedbackForm}} решайте сами для себя ))
** Плагин $.form сам отправит AJAX-запрос, когда пользователь нажмёт на submit, нам нужно только обработать ответ.
7) Подключаем необходимые скрипты к странице в теге
<script type="text/javascript" src="/wp-content/uploads/"></script>
<script type="text/javascript" src="/wp-content/uploads/"></script>
<script type="text/javascript" src="/wp-content/uploads/"></script>
P.S. идея взята на Modx_im