Работаю по всей России

vasilisa1210@mail.ru

Главная » Уроки » Уроки по Modx Evo » [Evo] Заказать звонок в выпадающем окне, модальном окне

[Evo] Заказать звонок в выпадающем окне, модальном окне

Для того, что бы создать форму в модальном окне (это выскакивающее окно), необходимо установить из репозитория fancybox, появится новый чанк - fancybox.

В шаблон добавляем между тегами head

<script type="text/javascript" src="assets/js/jquery.min.js"></script>{{fancybox}}

Кладем в папку assets/js/ скрипт мин квери, последней модели, скачанный с сайта jquery.com (Он может уже там и тогда скачивать ничего не надо, проверьте).

Далее в чанк fancybox дописываем перед   });

 $("a.fancy").fancybox();

Сохраняем измененный чанк, в стили css прописываем:

#modal_form {display: none;}

Далее, создаем все чанки формы обратной связи, как обычно:

modal_form:

[!eForm? &formid=`modal_form` &tpl=`modal_form_tpl` &to=`admin@mail.ru` &report=`modal_report_tpl` &thankyou=`modal_thank_tpl` &vericode=`0` &subject=`Заказ звонка с сайта`!]

modal_form_tpl:

<div id="modal_form">
<h3>Заказать звонок</h3>
<form method="post" action="!!!">
<input type="hidden" name="formid" value="modal_form" />
<label><span>Ваше имя:*</span><input type="text" id="author" name="author" class="required input_field" eform="Имя::1" /></label>
<label><span>Телефон:*</span><input type="text" id="phone" name="phone" class="required input_field" eform="Телефон::1" /></label>
<input type="submit" class="submit_btn" name="submit" id="submit" value=" Отправить " />
</form>
</div>

modal_report_tpl:

Это сообщение было отправлено посетителем по имени [+author+] с помощью формы заказа звонка. </p>
<table>
<tr valign="top"><td><b>Имя:</b></td><td>[+author+]</td></tr>
<tr valign="top"><td><b>Номер телефона:</b></td><td>[+phone+]</td></tr>
</table>

И теперь, создаем новый ресурс в древе документов, называем его - Заказ звонка принят, в содержание вписываем: Заказ звонка принят. И его id вставляем в форме modal_form_tpl, вместо !!!

В шаблоне приписываем:

{{modal_form}}

Добавляем в шаблон саму ссылку:

<a class="fancy" href="#modal_form">Обратный звонок </a>

другой вариант, так что бы форма была отдельным ресурсом сайта