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

vasilisa1210@mail.ru

Главная » Уроки » Уроки по Modx Evo » Modx evo Eform в вcплывающем окне, модальном окне

Modx evo Eform в вcплывающем окне, модальном окне

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

В шаблон добавляем между тегами head (пути к файлам пишем свои)

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

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

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

<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Форма связи</title>
<base href='[(site_url)]'>
<script src="assets/templates/theme/js/jquery.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="assets/templates/theme/css/frame.css">
</head>
<body>
<div class="wrap">
<div class="sendform">
<h3>Форма связи</h3>
[!eForm? &formid=`modal_form` &tpl=`modal_form_tpl` &to=`admin@mail.ru` &report=`modal_report_tpl` &thankyou=`modal_thank_tpl` &subject=`Сообщение`!]
</div>
</div>
</body>
</html>

Далее создаем чанки modal_form_tpl и modal_report_tpl

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>

modal_thank_tpl:

Спасибо за обращение!

Создаем новый документ (ресурс) в админке  и присваиваем ему шаблон Форма связи.

На страницу, с которой надо вызвать форму делаем ее вызов, например в ссылку

<a href="[~тут айди созданного документа~]" class="question_frame">Задать вопрос</a>

В шаблоне этого домента, гда разместили вызов (после прошлых скриптов! НИЖЕ ) размещаем этот код:

<script>
$(document).ready(function() {
$("a.question_frame").fancybox({
'autoScale' : true,
'scrolling' :'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'padding' :0,
'centerOnScroll':true,
'fitToView': true,
'autoDimensions': true
});
});</script>

другой вариант