Ajax форма обратной связи в попапе. MODx Revolution

Сейчас давно уже не модно делать отдельные страницы для формы обратной связи, заявки обратного звонка и тд. Пришло время разрабатывать это все в popup-окне.

Для этого нам понадобится:

1. MODx Revolution
2. Пакет AjaxForm
3. Пакет FormIt
4. Немного JavaScript

Нам нужно сделать 3 попапа, с разным контентом

— написать письмо (поля: имя, телефон, mail, текст письма)

— заказать звонок (поля: имя, телефон)

— задать вопрос (поля: имя, телефон, mail, название компании, список услуг, текст письма, аттач файла)

Приступим. MODx Revo у нас уже установлена, качаем пакет AjaxForm. Для этого заходим в Система — Управление пакетами. Выбираем Загрузить дополнение и в поле поиска находим наш пакет. После того как мы его скачали, возвращаемся в менеджер управления пакетами и устанавливаем его. Готово.

По умолчанию, у нас создался в чанках новый чанк tpl.AjaxForm.example. Обычно я его беру за основу и переделываю под свой дизайн. В этот раз поступим так же.

Начнем с первой формы: Написать письмо.

Чтобы построить попап, пишем код:

<a href = «javascript:void(0)» onclick = «document.getElementById(‘btn_letter’).style.display=’block’;document.getElementById(‘fade’).style.display=’block'»><img src=»images/btn_letter.png» width=»259″ height=»44″ /></a>

<div id=»btn_letter» class=»white_content»>test</div>

<div id=»fade»></div>

<style>

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}

#btn_letter{
width: 337px;
margin-left: -200px;
top:-400px;
}

</style>

document.getElementById(‘btn_letter’).style.display=’block’ — btn_letter — это ID нашего попапа, этим мы «появляем его».

document.getElementById(‘fade’).style.display=’block’ — fade — это ID нашего div с эффектом затемнения.

<img — это иконка рядом с ссылкой. Все вместе выглядит вот так:

<div id=»btn_letter» class=»white_content»>test</div> — непосредственно, наш попап.

<div id=»fade»></div> — div с эффектом затемнения.

.black_overlay — класс, описывающий позиционирование эффекта затемнения.

.white_content — класс, описывающий позиционирование попапов.

#btn_letter — здесь прописываем индивидуальные настройки к каждому попапу. В моей задаче попап должен быть прижат к футеру, поэтому я его отпозиционировал в px. Если хотим его выравнивать динамически, то нужно выставлять в %.

Тестируем наш попап, нажав на ссылку «Написать письмо». Если все в порядке, то откроется вот так:

Все хорошо, но как его закрыть? Позиционируем «крестик» в правый верхний угол попапа, для этого в его div вставляем код:

<div class=»cross_wrapper»>
<div class=»cross»>
<a href = «javascript:void(0)» onclick = «document.getElementById(‘btn_letter’).style.display=’none’;document.getElementById(‘fade’).style.display=’none'»><img src=»images/cross.png» width=»16″ height=»16″ style=»float:right;» /></a>
</div>
</div>

document.getElementById(‘btn_letter’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’ — скрываем наш попап и затемнение.

<img — иконка крестика

В стили нужно дописать:

div.cross_wrapper{
position:relative;
}
div.cross{
position:absolute;
right:1px;
top:1px;
}

Проверяем, если все сделали верно, то попап откроется с крестиком, нажав на который, мы его скроем:

Приступим к созданию полей формы. Для начала нам нужно вызвать сниппет AjaxForm. Прописываем его в div попапа:

<h2>Написать письмо</h2>

[[!AjaxForm?
&snippet=`FormIt`
&form=`form_letter_tpl`
&hooks=`email`
&emailSubject=`Запрос с сайта «Написать письмо»`
&emailTo=`your_mail_address@gmail.com`
&validate=`name:required,email:required,phone:required,service:required`
&validationErrorMessage=`Пожалуйста, заполните поля корректно`
&successMessage=`Ваша заявка принята, в ближайшее время мы свяжемся с Вами`
]]

<h2> — Заголовок нашего попапа

&snippet=`FormIt` — указываем, что будем использовать сниппет FormIt.

&form=`form_letter_tpl` — темплейт нашей формы (далее подробнее).

&hooks=`email` — указываем, что будет отправляться mail.

&emailSubject=`Запрос с сайта «Написать письмо»` — тема отправляемого письма.

&emailTo=`your_mail_address@gmail.com` — адрес мейла администратора сайта, то есть кому будут приходить письма с формы.

&validate=`name:required,email:required,phone:required,service:required` — указываем обязательные поля для заполнения.

&validationErrorMessage=`Пожалуйста, заполните поля корректно` — сообщение при не верном заполнении полей.

&successMessage=`Ваша заявка принята, в ближайшее время мы свяжемся с Вами` — сообщение при успешной отправке.

 

Как писал ранее, нам нужно воспользоваться стандартным темплейтом tpl.AjaxForm.example. Заходим в него, копируем все содержимое, создаем новый чанк и вставляем в него скопированные данные. Новый чанк называем form_letter_tpl. Итоговый код:

<form action=»» method=»post»>

<div class=»row»>
<label for=»af_name»>Имя:</label><br />
<input type=»text» id=»af_name» name=»name» value=»[[+fi.name]]» placeholder=»» /><br />
<span class=»error error_name»>[[+fi.error.name]]</span>
</div>

<div class=»row»>
<label for=»name»>Телефон:</label><br />
<input type=»text» id=»af_phone» name=»phone» value=»[[+fi.phone]]» placeholder=»» /><br />
<span class=»error error_phone»>[[+fi.error.phone]]</span>
</div>

<div class=»row»>
<label for=»name»>Mail:</label><br />
<input type=»text» type=»email» id=»af_email» name=»email» value=»[[+fi.email]]» placeholder=»» /><br />
<span class=»error error_email»>[[+fi.error.email]]</span>
</div>

<div class=»row»>
<label for=»name»>Текст письма:</label><br />
<textarea type=»text» id=»af_comment» name=»comment» value=»[[+fi.comment]]» placeholder=»»></textarea><br />
<span class=»error error_comment»>[[+fi.error.comment]]</span>
</div>

<input type=»submit»  value=»Написать письмо» />
[[+fi.success:is=`1`:then=`
<div>[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div>[[+fi.validation_error_message]]</div>
`]]
</form>

<label for=»af_name»>Имя:</label> — название поле.

<input type=»text» id=»af_name» name=»name» value=»[[+fi.name]]» placeholder=»» /> — поле ввода со своими идентификаторами. Можно создавать не ограниченное кол-во поле ввода, главное не повторять идентификаторы:

name=»name» — заголовок поля, он будет выводиться в приходящем письме.

value=»[[+fi.name]]» — значение переменной, которое будет выводиться в приходящем письме. То есть, если мы введем в поле Test и нажмем Отправить, то письмо прийдет с текстом:

name: Test

<span>[[+fi.error.name]]</span> — вывод ошибки, если поле не заполнено.

Таким образом настраиваем все поля.

<input type=»submit»  value=»Написать письмо» /> — кнопка отправки сообщения.

[[+fi.success:is=`1`:then=`
<div>[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div>[[+fi.validation_error_message]]</div>
`]] — Вывод сообщений об ошибках и успещной отправки.

Форма готова. Запускаем попап, если все верно, то вы увидите вот такое:

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

Если все заполним верно, то в правом верхнем углу выведется сообщение:

Его также можно отформатировать и настроить с помощью стилей.

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

В тэг <form нужно прописать enctype=»multipart/form-data», получится вот так:

<form action=»» method=»post» enctype=»multipart/form-data»>

В поле ввода выбора файла нужно указать его тип type=»file» и в value указать [[!+fi.contact_attachment]]:

<input type=»file» id=»af_file» name=»contact_attachment» value=»[[!+fi.contact_attachment]]» />

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

Скачать код и файлы пакетов можно здесь: readme.