AjaxForm MODX в модальном окне

AjaxForm MODX в модальном окне

Здравствуй дорогой читатель!

После того, как я написал статью: обратный звонок в модальном окне MODX, посетители моего сайта попросили меня реализовать модальное окно с заказом обратного звонка на сниппете AjaxForm.

Дело в том, что с использованием сниппета AjaxForm, сообщения с сайта отправляются на e-mail без перезагрузки сайта, что очень характерно для модального окна

Кстати, необходимо знать что AjaxForm - сниппет-обёртка, то есть он не умеет отправлять письма, за него это делает Formit. Так что, помимо сниппета AjaxForm, у Вас должен быть установлен Formit.

На данный момент форма имеет возможности:

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

Дополнение: несколько форм на одной странице

Вот такое сообщение приходит на почту:

Шаблон отправки письма AjaxForm

Итак, поехали. 

1. Устанавливаем AjaxForm и Formit

Думаю с установкой сниппетов проблем не возникнет. AjaxForm доступен и на modx.com и на modstore.pro

2. Создаем чанк tpl.AjaxForm

После того как установили, в чанках появится категория AjaxForm. В данной категории создаем чанк tpl.AjaxForm:

<form method="post" class="ajax_form af_example">
        <input type="hidden" name="title" value="[[*pagetitle]]">
	    <input type="hidden" name="link" value="[[*uri]]">
        <input type="text" placeholder="Как вас зовут?" value="[[+fi.name-zv]]" name="name-zv" id="name" class="input_text form-control"/>
        <input type="text" placeholder="Контактный телефон *" name="phone-zv" value="[[+fi.phone-zv]]" id="phone-zv" class="phone-zv form-control"/>
		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
        <input class="button" type="submit" value="Перезвоните мне">
</form>

Думаю что комментарии не нужны, скажу то, что первые два скрытых поля, получают заголовок и ссылку на текущюю страницу

3. Создаем чанк - шаблон сообщения

Создаем чанк шаблона собщения modal-zv-tpl, которое будет приходить Вам на электронную почту.

<strong>[[+name-zv:empty=`Не заполнено`]]</strong> прислал(а) <strong>заявку на обратный звонок </strong> со страницы: <strong><a href="http://domen.ru/[[+link]]">[[+title]]</a></strong> <br />
Данные с формы:<br />
<p>Имя: <strong>[[+name-zv:empty=`Не заполнено`]]</strong></p>
<p>Телефон: <strong>[[+phone-zv]]</strong></p>

4. Подключаем CSS и JS

В head страницы подключаем modal.css и modal.js, помните что js подключаем после библиотеки jQuery.

Содержимое modal.css

/*Модальное окно*/
#modal_form{width:450px;padding:19px 20px;border:5px solid #00ff95;background-color:#FFF;height:330px;background:#fff;position:fixed;top:45%;left:50%;margin-top:-165px;margin-left:-225px;display:none;opacity:0;z-index:5;}
#overlay{z-index:3;position:fixed;background-color:#000;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);width:100%;height:100%;top:0;left:0;cursor:pointer;display:none;}
#modal_form input[type="text"]{background-color:#fff;border:1px solid #DFDFDF;border-radius:6px;color:#555;display:block;font-size:1em;height:35px;padding:5px;margin-bottom:17px;width:95%;float:left;}
#modal_form input[type="text"].error{border:1px solid red;}
#modal_form h3{text-align:center;font-size:2em;text-transform:uppercase;color:#000; margin: 0;}
#modal_form .comment{color:#272727;padding-bottom:15px;font-size:14px;text-align:center;padding-top:10px;}
.exit{background:#d0d0d0;display:block !important;border-radius:50%;right:-30px;top:-20px;position:absolute;opacity:1;WIDTH:33PX;HEIGHT:33px;line-height:30px;font-size:36px;border:2px solid #3e5368;-webkit-transition:background 0.2s linear;-moz-transition:background 0.2s linear;-o-transition:background 0.2s linear;transition:background 0.2s linear;}
.exit:after{display:block;font-size:23px;content:"x";padding-left:9px;line-height:24px;cursor:pointer;text-decoration:none;font-weight:bold;color:#000000;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.exit:hover{background:#EAEAEA;text-decoration:none;}
#modal_form .button{display:block;background-color:#ffd400;border:1px solid #ccc;border-radius:3px;color:#000;cursor:pointer;font-size:17px;font-weight:bold;height:40px;margin:10px 0;padding:2px 16px;width:210px;margin:0 auto;-webkit-transition:all 0.12s ease-in;-o-transition:all 0.12s ease-in;-moz-transition:all 0.12s ease-in;transition:all 0.12s ease-in;}
#modal_form .button:hover{background-color:#44C8F5;border:1px solid #44C8F5;color:#fff;}
#modal_form .error{border:1px solid red;}

Содержимое modal.js

 $(function() { // вся мaгия пoсле зaгрузки стрaницы
	$('.modal').click( function(event){ // лoвим клик пo ссылки с class="modal"
	event.preventDefault(); // выключaем стaндaртную рoль элементa
	$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
	function(){ // пoсле выпoлнения предъидущей aнимaции
	$('#modal_form') 
	.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
	.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
	});
	});
	/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
	$('.exit, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
	$('#modal_form')
	.animate({opacity: 0, top: '45%'}, 200,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
		function(){ // пoсле aнимaции
		$(this).css('display', 'none'); // делaем ему display: none;
		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
		}
	);
});
$(document).on('af_complete', function(event, response) {
    if (response.success) { //Если форма заполнена и нет ошибок
   $('#modal_form')
	.animate({opacity: 0, top: '45%'}, 500,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
		function(){ // пoсле aнимaции
		$(this).css('display', 'none'); // делaем ему display: none;
		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
    });
    }
    });
});

5. Подключаем и настраиваем AjaxForm

Обычно я подключаем AjaxForm перед закрывающим тегом body.

Здесь находятся параметры сниппета AjaxForm и Formit.  Документация на AjaxForm здесь, а Formit здесь.

Не забудьте поменять почту на свою!

<div id="modal_form">
	  <h3>Заказать звонок!</h3>
	  <div class="comment">Оставьте заявку и наш специалист свяжется с вами в ближайшее время!</div>
      <a class="exit"></a>
[[!AjaxForm?
   &snippet=`FormIt`
   &hooks=`spam,email`
   &emailFrom=`noreply@mail.ru`
   &form=`tpl.AjaxForm`
   &emailTpl=`modal-zv-tpl`
   &emailTo=`mail@mail.ru`
   &emailSubject=`Заказ звонка с сайта`
   &validate=`phone-zv:required`
   &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
   &successMessage=`Сообщение успешно отправлено, наш менеджер свяжеться с Вами в ближайшее время`
]]
</div>
<div id="overlay"></div>

На этом всё. Если у Вас остались вопросы, задавайте через форму ниже.

Помните, если сервер выдаёт ошибку 500 при отправке сообщения, то Вам необходимо проверить параметр register_globals у вашего PHP - он должен быть отключен.

И да, не забудьте поставить ссылку с классом modal

<a href="[[*uri]]#" class="modal">Открыть окно</a>

Дополнение: Как сделать несколько форм на одной страницы?

Здесь принцип такой же, но код JavaScript нужно будет переделать и немного CSS! Вообщем нужно будет в атрибут ссылки href добавлять селектор, который нужно вывести.

К примеру, если мы заходим вывести модальное окно с id="modal_zakaz", то необходимо указать в атрибуте href="#modal_zalaz" или href=".modal_zakaz" если это класс.

Главное помните, что каждое окно должно содержать уникальный атрибут, будь это id или class

Думаю смысл я передал. Итак, приступим:

JS

$(document).ready(function () {
	var open_modal = $('.open_modal');
	var modal = $('.modal_form');
	var close = $('.exit, #overlay');
	var overlay = $('#overlay');

	open_modal.click(function (event) {
		event.preventDefault();
		var div = $(this).attr('href'); //узнаем селектор
		overlay.fadeIn(400,
			function () {
				$(div)
					.css('display', 'block')
					.animate({ opacity: 1, top: '50%' }, 200);
			});
	});
//закрытие
	close.click(function () {
		modal // все мoдaльные oкнa
			.animate({ opacity: 0, top: '45%' }, 200,
			function () {
				$(this).css('display', 'none');
				overlay.fadeOut(400);
			}
			);
	});
	$(document).on('af_complete', function (event, response) {
		if (response.success) { //Если форма заполнена и нет ошибок
			modal 
				.animate({ opacity: 0, top: '45%' }, 500,
				function () {
					$(this).css('display', 'none');
					overlay.fadeOut(400);
				}
				);
		}
	});
});

Также необходимо изменить в CSS #modal_form на .modal_form так как ID должен быть уникальный.

И ещё, на странице достаточно только одной подложки!!!

<div id="overlay"></div>

Пример вызова нескольких окон

<div class="modal_form" id="modal-1">
 <h3>Окно 1!</h3>
<a class="exit"></a>
</div>

<div class="modal_form" id="modal-2">
 <h3>Окно 2!</h3>
<a class="exit"></a>
</div>

<a href="[[*uri]]#modal-1" class="open_modal">Открыть окно 1</a>

<a href="[[*uri]]#modal-2" class="open_modal">Открыть окно 2</a>

<div id="overlay"></div> //достаточной одной на всей страницы

Пишите, какие функции необходимо ещё добавить, с радостью разберемся.

Кстати возможно Вас заинтересует: как отправить сообщение с формы в Telegram

P.S. Нехотите возиться? Обращайтесь ко мне, добавлю на Ваш сайт за мороженку :)

03.09.2016 / 125718

No avatar

Комментарии (122)

  1. Мусагалиева Айслу Кинжегалиевна 27 октября 2022, 13:06 # 0
    А как убрать всплывающее окно, а оставить окно для заполнения на главной странице? Не могу понять как избавиться именно от всплывающего окна!
    1. Marina 07 июня 2022, 09:52 # 0
      День добрый, окончательно запуталась c модальным окном, требуется консультация специалиста. Сможете помочь?
      1. Игорь 07 июня 2022, 10:44 # 0
        Да, можете написать в телегу
      2. Максим 12 мая 2021, 12:26 # 0
        Добрый день. Подскажите, пожалуйста, почему могли сломаться выводы &validationErrorMessage и &successMessage?
        Раньше они открывались в модальном окне, сейчас же они на секунду появляются под футером и исчезают. Сообщения при этом уходят нормально. Как будто какой то css или js не отрабатывает, но не могу понять какой.

        i.imgur.com/mYDYMEr.png
        1. Людмила 20 октября 2020, 16:46 # 0
          Здравствуйте! Всё сделала, всё работает, только письмо не приходит на мою почту и валидация номера не срабатывает. Адрес свой указала верно, в параметре &emailTo=`ifotina0972@gmail.com`. FormIt установлен, AjaxForm тоже, AjaxForm работает с другими сниппетами замечательно. А здесь сообщение об отправке формы успешное, а на почте ничего нет.
          1. Игорь 30 ноября 2020, 09:55 # 0
            Здравствуйте, может письмо попадает в спам?
          2. Руслан Юнусов 30 января 2020, 13:03 # 0
            Очень помогла статья! Спасибо!
            1. sergue rogue 21 сентября 2018, 09:32 # 0
              Автор, источник укажи, а то плагиат же =)
              1. Андрей Рябый 20 сентября 2018, 00:13 # 0
                Здравствуйте!

                Все сделал, все получилось. За что вам огромное спасибо!

                Стили поправил под себя. Но когда смотрю в коде страницы интересует что значит
                <input type="hidden" name="af_action" value="f52508f7bd6ac601fa6d62c8b659ba7a" />
                перед закрывающим тегом form?
                1. Серега 24 мая 2018, 19:56(Комментарий был изменён) # 0
                  Есть проблема в moxdx revo на лэндинге несколько форм — все работает. Но есть еще шаблон для внутренних страниц где только верхняя шапка с кнопкой(как на главной).Вызов форм прописан в шаблонах одинаково, но на внутренней почему-то форму по id не вызывает, а делает ридерект на главную по #. Как можно исправить?
                  1. Ольга 14 декабря 2017, 21:44 # 0
                    А как сделать что бы можно было выбрать тему звонка?
                    1. Игорь 14 декабря 2017, 22:30 # 0
                      Добавить новое поле select
                    2. Ольга 08 декабря 2017, 20:44(Комментарий был изменён) # 0
                      Спасибо, все работает. А как добавить функцию прикрепить файл? Только jpg и png.
                      1. Игорь 08 декабря 2017, 20:58 # 0
                        Пожалуйста.

                        Первым делом необходимо указать способ кодирования данных
                        multipart/form-data
                        То есть в чанке tpl.AjaxForm пишем:
                        <form method="post" class="ajax_form af_example" enctype="multipart/form-data">
                        Если одно изображение:
                        <input type="file" name="img">
                        Если более одного:
                        <input type="file" name="imgs[]" multiple="multiple">
                        После этого, форма будет отправлять изображения на почту.
                        Но, Вам нужно ещё написать кастомный валидатор (в Formit — customValidators) на PHP, который будет проверять расширение загружаемого файла
                        1. Ольга 08 декабря 2017, 21:00 # 0
                          Спасибо, попробую.
                          1. Игорь 08 декабря 2017, 21:03(Комментарий был изменён) # 0
                            Да, пожалуйста. Можно также попробовать AjaxUpload, но там есть баги. А может их уже исправили.
                          2. Василий 07 декабря 2017, 14:02 # 0
                            Вопрос: как совместить AjaxForm и модалку, содержимое которого загружается через Ajax?
                            Согласно требованиям сеошников форма не должна быть в исходном коде страницы.
                            1. Игорь 08 декабря 2017, 21:00 # 0
                              Пока представить не могу. AjaxForm работать скорее всего не будет, так как он
                              "Сохраняет в сессию $scriptProperties при вызове сниппета.
                              Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties.
                              Вешает обработчик на форму, чтобы она отправлялась через ajax."
                              1. Василий 15 декабря 2017, 13:37 # 0
                                Задача оказывается легко решается с помощью компонента QuickView
                              2. Фаррукх 23 ноября 2017, 04:52 # 0
                                можно готовый файл. просто не разбыраюсь все
                                1. АМР 26 октября 2017, 16:58 # 0
                                  Подскажите это куда вставить
                                  <div id="modal_form">
                                  	  <h3>Заказать звонок!</h3>
                                  	  <div class="comment">Оставьте заявку и наш специалист свяжется с вами в ближайшее время!</div>
                                        <a class="exit"></a>
                                  [[!AjaxForm?
                                     &snippet=`FormIt`
                                     &hooks=`spam,email`
                                     &emailFrom=`noreply@mail.ru`
                                     &form=`tpl.AjaxForm`
                                     &emailTpl=`modal-zv-tpl`
                                     &emailTo=`mail@mail.ru`
                                     &emailSubject=`Заказ звонка с сайта`
                                     &validate=`phone-zv:required`
                                     &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
                                     &successMessage=`Сообщение успешно отправлено, наш менеджер свяжеться с Вами в ближайшее время`
                                  ]]
                                  </div>
                                  <div id="overlay"></div>
                                  1. Игорь 26 октября 2017, 17:18 # 0
                                    Правильнее всего создать чанк и вставить вызов туда. После вызвать чанк в шаблоне
                                    1. АМР 26 октября 2017, 18:40 # 0
                                      У меня выходит что он всегда открыт(
                                      1. Игорь 26 октября 2017, 18:43 # 0
                                        Значит Вы не подключили CSS
                                        1. АМР 26 октября 2017, 18:45(Комментарий был изменён) # 0
                                          Подключил
                                          <link rel="stylesheet" href="assets/css/modal.css"/>
                                          1. Игорь 26 октября 2017, 18:48 # 0
                                            эмм… посмотрите консоль в браузере. Там должны выводится ошибки
                                          2. Дмитрий 26 октября 2017, 11:44 # 0
                                            Спасибо добрый человек
                                            1. Игорь 26 октября 2017, 17:18 # 0
                                              Пожалуйста, приятно
                                            2. Виктор 22 августа 2017, 09:13 # 0
                                              Куда подключить разобрался. Но вот письма на почту не приходят. Заполняю форму, окно закрывается, появляется окно, что сообщение успешно отправлено, но на почту нечего не приходят.

                                              [[!AjaxForm?
                                              &snippet=`FormIt`
                                              &hooks=`spam,email`
                                              &emailFrom=`моя@почта`
                                              &form=`tpl.AjaxForm`
                                              &emailTpl=`modal-zv-tpl`
                                              &emailTo=`моя@почта`
                                              &emailSubject=`Заказ звонка с сайта`
                                              &validate=`phone-zv:required`
                                              &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
                                              &successMessage=`Сообщение успешно отправлено, наш менеджер свяжеться с Вами в ближайшее время`
                                              ]]
                                              1. Виктор 21 августа 2017, 15:15 # 0
                                                Добрый день! Не могу понять а куда именно подключать AjaxForm из 5 пункта?
                                                1. Адлет 24 июля 2017, 07:36 # 0
                                                  Здравствуйте. Проблема с отправкой сообщения, то есть отправки вообще нет. Валидации формы нет, при нажатии кнопки страница просто перезагружается. В чем может быть проблема?
                                                  1. Василий 21 июля 2017, 17:08 # 0
                                                    Здравствуйте!
                                                    А я пробую прикрутить к вашему модальному окну вход через Login.
                                                    В общем, окно работает, вход тоже. Но если в форме ошибки, то окно закрывается. При повторном открытии оно уже с сообщением об ошибке.
                                                    Подскажите пожалуйста, как избежать закрытия окна при ошибках?
                                                    1. Игорь 23 июля 2017, 22:57 # 0
                                                      Здравствуйте!
                                                      Получилось? Вы используете AjaxForm в связке с Login?
                                                      По идее ошибки должны высвечиваться через
                                                      AjaxForm.Message.error('Красный popup', 1);
                                                      1. Василий 24 июля 2017, 06:34 # 0
                                                        Нет, не получилось. Страница перезагружается при нажатии submit.
                                                        С formit работает, а с login нет((
                                                        Нашел вариант без ajaxform, вставил в ваш modal, и все работает. Похоже ajaxform не дружится с login))
                                                      2. кукулямукуля 11 июля 2017, 05:37 # 0
                                                        Спасиб за статью. Отдельное спасибо за подробное описание js-ки.
                                                        1. Vasil 25 июня 2017, 21:11 # 0
                                                          День добрый
                                                          Подскажите, пожалуйста, как вывести кнопку звонка в нужном месте и чтобы это была именно кнопка, в вашем варианте получается ссылка, которая все время посередине…
                                                          Открыть окно
                                                          Спасибо
                                                          1. Игорь 25 июня 2017, 23:27 # 0
                                                            Здравствуйте, это может быть что угодно, изображение или просто текст, главное чтобы был нужный класс
                                                            class="modal"
                                                            1. Vasil 27 июня 2017, 20:30 # 0
                                                              Игорь, день добрый
                                                              Вопрос, собственно, по расположению этого самого окна, оно находится в произвольном месте, а при изменении масштаба страницы вообще «уплывает», как сделать, что оно четко располагалась, допустим справа в верхем уголке и там «мертво»сидело?
                                                              Спасибо
                                                              1. Павел 07 декабря 2018, 19:24 # 0
                                                                а где описал этот класс? у меня даже строка с этим классом не выводится
                                                              2. Pavel 29 мая 2017, 12:16 # 0
                                                                Данный код рассчитан только на одно модальное окно. Но его можно легко переделать.
                                                                Вам просто необходимо изменить код в JS.
                                                                А как изменить код? Спасибо.
                                                                1. Pavel 04 июня 2017, 15:15(Комментарий был изменён) # 0
                                                                  Добрый день! Подскажите насколько это правильно? Или подскажите пожалуйста как правильно? Работает но подозреваю что что то не так :)… Спасибо
                                                                  $(function(){$('.openform').click(function(event){event.preventDefault();$('#overlay').fadeIn(400,function(){$('#contactModal').css('display','block').animate({opacity:1,top:'20%'},200);});});$('.exit, #overlay').click(function(){$('#contactModal').animate({opacity:0,top:'45%'},200,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});});$(document).on('af_complete',function(event,response){if(response.success){$('#contactModal').animate({opacity:0,top:'45%'},500,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});}});});
                                                                  $(function(){$('.openvar1').click(function(event){event.preventDefault();$('#overlay').fadeIn(400,function(){$('#variant1').css('display','block').animate({opacity:1,top:'20%'},200);});});$('.exit, #overlay').click(function(){$('#variant1').animate({opacity:0,top:'45%'},200,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});});$(document).on('af_complete',function(event,response){if(response.success){$('#variant1').animate({opacity:0,top:'45%'},500,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});}});});
                                                                  $(function(){$('.openvar2').click(function(event){event.preventDefault();$('#overlay').fadeIn(400,function(){$('#variant2').css('display','block').animate({opacity:1,top:'20%'},200);});});$('.exit, #overlay').click(function(){$('#variant2').animate({opacity:0,top:'45%'},200,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});});$(document).on('af_complete',function(event,response){if(response.success){$('#variant2').animate({opacity:0,top:'45%'},500,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});}});});
                                                                  1. Игорь 04 июня 2017, 15:29 # 0
                                                                    Добрый день. Нет, это делается совсем по-другому.
                                                                    Ведь, если нужно будет добавить ещё одно модальное окно, то придется лезть в js.
                                                                    Можно двумя способами, смотреть что указано в href или использовать data-target.
                                                                    К примеру если указать
                                                                    <a href="#modal1">Ссылка</a>
                                                                    То нужно вызывать модальное окно с
                                                                    <div id="modal1"><div>
                                                                    1. Игорь 04 июня 2017, 16:07(Комментарий был изменён) # 0
                                                                      Дополнил статью, код ещё сам не проверял, но думаю должен работать!
                                                                      Ссылка -> клик
                                                                      1. Pavel 04 июня 2017, 16:44 # 0
                                                                        Спасибо. Установил новый код экран темнеет но формы не видать, обновляю страницу форма висит и сдвигает блоки на странице. Наверно я что то не так делаю. Интересно а то что я выше писал имеет право на жизнь так все работает нормально, мне проще в js добавить (сейчас) еще пару форм :)
                                                                      2. строй руслан 23 мая 2017, 09:38 # 0
                                                                        как сделать несколько форм на одной страницы? к примеру заказ товара и заказ обратного звонка
                                                                        буду благодарен за ответ
                                                                        1. Игорь 04 июня 2017, 16:17 # 0
                                                                          Дополнил статью клик
                                                                        2. Юрий 17 апреля 2017, 10:13 # 0
                                                                          Добрый день! Столкнулся с проблемой, если к примеру на страничке 10 модальных форм, то при нажатии на кнопку (вызов модальной формы), открываются все 10 форм и у всех одинаковое содержимое (содержимое берется с последней формы на страничке). Даже не в форме дело, убрал форму а просто в модалки вставил текст разный, результат тот же, открываются все модалки и содержимое тянется с последней формы
                                                                          1. Игорь 17 апреля 2017, 10:47(Комментарий был изменён) # 0
                                                                            Добрый день.
                                                                            Данный код рассчитан только на одно модальное окно. Но его можно легко переделать.
                                                                            Вам просто необходимо изменить код в JS. К примеру, можно ловить значение ссылки в классе modal и открывать это окно.
                                                                            1. Юрий 17 апреля 2017, 10:57 # 0
                                                                              Я в скиптах не очень разбираюсь..., можете пожалуйста показать небольшой пример, если не сложно
                                                                              1. Игорь 17 апреля 2017, 11:20 # 0
                                                                                Хорошо, позже смогу скинуть, сейчас просто нет возможности.
                                                                                1. Игорь 04 июня 2017, 16:19 # 0
                                                                                  Дополнил статью клик
                                                                                2. Владислав 28 марта 2017, 19:15 # 0
                                                                                  Игорь, здравствуйте.Спасибо за полезную информацию. Только начал разбираться modx. При создании формы столкнулся с проблемой. При размещении ссылки на окно с классом modal, она не отображается на странице.
                                                                                  Тестовый поддомен.
                                                                                  demo.ncworld-show.ru/test-page/

                                                                                  В чем может быть проблема?
                                                                                  1. Игорь 28 марта 2017, 19:58 # 0
                                                                                    Здравствуйте, Владислав. Пожалуйста!)

                                                                                    Дело в том, что в bootstrap класс modal по умолчанию скрыт, то есть
                                                                                    display: none;
                                                                                    Просто измените класс modal на какой-нибудь другой в html и в JS(где отлавливается событие по клику). Должно заработать.
                                                                                    1. Владислав 28 марта 2017, 20:17 # 0
                                                                                      Действительно скрыт! Спасибо.

                                                                                      А в bootstrap.css(где описан класс modal) можно создать новый класс(например modalform) исключив из него display: none;? И потом уже прописать в html и js класс modalform?
                                                                                      1. Владислав 29 марта 2017, 14:35 # 0
                                                                                        Заработало. Форма открывается, отправляет данные. Но страница перезагружается. Если еще раз самостоятельно страницу перезагрузить(без открытой формы), то появляется уведомление повторной отправки формы.
                                                                                      2. Даниил 12 марта 2017, 12:15 # 0
                                                                                        Игорь, подскажите. не могу сообразить, как вызвать

                                                                                        По умолчанию AjaxForm выводит сообщения об успешной отправке формы или о наличии ошибок. Вы можете самостоятельно вызывать их для своих целей:

                                                                                        AjaxForm.Message.success('Зеленый popup');
                                                                                        AjaxForm.Message.error('Красный popup', 1);
                                                                                        AjaxForm.Message.info('Черный popup');

                                                                                        как их вызвать в шаблоне???
                                                                                        1. Игорь 12 марта 2017, 12:23 # 0
                                                                                          Здравствуйте.
                                                                                          Необходимо вызывать в JS
                                                                                          1. Даниил 12 марта 2017, 12:29 # 0
                                                                                            любой пример не подскажите???
                                                                                            1. Игорь 12 марта 2017, 12:36 # 0
                                                                                              Код вы в 1-ом сообщении написали.
                                                                                              Какое именно оповещение Вы хотите сделать?
                                                                                              1. Даниил 12 марта 2017, 12:42(Комментарий был изменён) # 0
                                                                                                так будет верно??
                                                                                                $.ajax({  
                                                                                                type: "POST",  
                                                                                                url: url, 
                                                                                                data: msg,
                                                                                                success:  function(data) {  
                                                                                                $.jGrowl("Вам выслано письмо со ссылкой для активации рассылки!", { life: 10000, position: 'center' });
                                                                                                } 
                                                                                                }); 
                                                                                                return false;
                                                                                                });
                                                                                                
                                                                                                1. Игорь 12 марта 2017, 12:44 # 0
                                                                                                  type: «POST», 
                                                                                                  url: url, 
                                                                                                  data: msg,
                                                                                                  success: function(data) { 
                                                                                                  AjaxForm.Message.success('«Вам выслано письмо со ссылкой для активации рассылки!»');
                                                                                                  } 
                                                                                                  }); 
                                                                                                  return false;
                                                                                                  });
                                                                                                  1. Комментарий был удален.
                                                                                                    1. Даниил 12 марта 2017, 12:51(Комментарий был изменён) # 0
                                                                                                      <form role="form" action="[[+uri]]" method="post" id="subscribe">
                                                                                                          <input type="textfield" name="email" value="" placeholder="Email для рассылки новостей...">
                                                                                                          <input type="hidden" name="sx_action" value="subscribe">
                                                                                                          <button type="submit" class="le-button">Подписаться</button>
                                                                                                          [[+message]]
                                                                                                      </form>
                                                                                                      
                                                                                                      1. Даниил 12 марта 2017, 12:55(Комментарий был изменён) # 0
                                                                                                        $.ajax({
                                                                                                        type: «POST»,
                                                                                                        url: url,
                                                                                                        data: msg,
                                                                                                        success: function(data) {
                                                                                                        AjaxForm.Message.success(«Вам выслано письмо со ссылкой для активации рассылки!», { life: 10000, position: 'center' });
                                                                                                        }
                                                                                                        });
                                                                                                        return false;
                                                                                                        })

                                                                                                        js в этой строке дает ошибку AjaxForm.Message.success
                                                                                                        1. Игорь 12 марта 2017, 12:53(Комментарий был изменён) # 0
                                                                                                          Оформляйте код в
                                                                                                          <code></code>
                                                                                                          и поддерживайте пожалуйста ветку.

                                                                                                          Почему Вам не сделать это на AjaxForm с помощью Formit? Вы ведь используете какое-то API?
                                                                                                          1. Даниил 12 марта 2017, 13:09 # 0
                                                                                                            Я разобрался и не могу могу использовать formit поскольку встроен sandex спасибо
                                                                                                            1. Игорь 12 марта 2017, 13:11 # 0
                                                                                                              ок, написали бы сначала, что используете sandex.
                                                                                                          2. Вадим 01 марта 2017, 01:34 # 0
                                                                                                            А существует «Обратный звонок» по типу почтового клиента т.е. прописываешь: пользователя, пароль, smtp-сервер, порт, тему письма и куда должны приходить письма, содержание берется из формы?
                                                                                                            1. Вадим 28 февраля 2017, 02:16 # 0
                                                                                                              Все сделал как описано (в &emailFrom и &emailTo указал свою почту) только ловлю не класс modal, а id modal у кнопки, но сообщения не отправляется. Т.е. форма открывается, ввожу данные, нажимаю кнопку «Перезвоните мне» и все — окно не закрывается, сообщение не отправляется.
                                                                                                              Может ещё надо поменять или дописать какой-нибудь параметр?
                                                                                                              1. Игорь 28 февраля 2017, 13:10 # 0
                                                                                                                Здравствуйте. Если окно не закрывается, значит сообщение не отправляется. Получается проблема с вызовом AjaxForm. Скиньте пожалуйста, как вы вызываете AjaxForm, может что-нибудь есть в консоле ошибок?
                                                                                                                1. Вадим 28 февраля 2017, 19:22(Комментарий был изменён) # 0
                                                                                                                  Здравствуйте.
                                                                                                                  Это чанк с кнопкой
                                                                                                                  Чанк: Header.CallBackButton:
                                                                                                                  <!--Кнопка Заказать звонок-->
                                                                                                                      <button type="button" class="btn btn-success" id="modal" data-target="#modal_form">
                                                                                                                              <span class="fa-stack fa-lg">
                                                                                                                                  <i class="fa fa-phone fa-stack-1x" aria-hidden="true"></i>
                                                                                                                                  <i class="fa fa-circle-thin fa-stack-2x" aria-hidden="true"></i>
                                                                                                                              </span>
                                                                                                                              Заказать звонок
                                                                                                                      </button>
                                                                                                                  
                                                                                                                  <!---->
                                                                                                                  <div id="modal_form">
                                                                                                                  	  <h3>Заказать звонок!</h3>
                                                                                                                  	  <div class="comment">Оставьте заявку и наш специалист свяжется с вами в ближайшее время!</div>
                                                                                                                        <a class="exit"></a>
                                                                                                                  [[!AjaxForm?
                                                                                                                     &snippet=`FormIt`
                                                                                                                     &hooks=`spam,email`
                                                                                                                     &emailFrom=`21lux@mail.ru`
                                                                                                                     &form=`tpl.AjaxForm`
                                                                                                                     &emailTpl=`modal-zv-tpl`
                                                                                                                     &emailTo=`21lux@mail.ru`
                                                                                                                     &emailSubject=`Заказ звонка с сайта`
                                                                                                                     &validate=`phone-zv:required`
                                                                                                                     &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
                                                                                                                     &successMessage=`Сообщение успешно отправлено, наш менеджер свяжеться с Вами в ближайшее время`
                                                                                                                  ]]
                                                                                                                  </div>
                                                                                                                  <div id="overlay"></div>
                                                                                                                  
                                                                                                                  Это скрипт modal.js
                                                                                                                  $(function() { // вся мaгия пoсле зaгрузки стрaницы
                                                                                                                  	$('#modal').click( function(event){ // лoвим клик пo ссылки с class="modal"
                                                                                                                  	event.preventDefault(); // выключaем стaндaртную рoль элементa
                                                                                                                  	$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
                                                                                                                  	function(){ // пoсле выпoлнения предъидущей aнимaции
                                                                                                                  	$('#modal_form') 
                                                                                                                  	.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
                                                                                                                  	.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
                                                                                                                  	});
                                                                                                                  	});
                                                                                                                  	/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
                                                                                                                  	$('.exit, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
                                                                                                                  	$('#modal_form')
                                                                                                                  	.animate({opacity: 0, top: '45%'}, 200,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
                                                                                                                  		function(){ // пoсле aнимaции
                                                                                                                  		$(this).css('display', 'none'); // делaем ему display: none;
                                                                                                                  		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
                                                                                                                  		}
                                                                                                                  	);
                                                                                                                  });
                                                                                                                  $(document).on('af_complete', function(event, response) {
                                                                                                                      if (response.success) { //Если форма заполнена и нет ошибок
                                                                                                                     $('#modal_form')
                                                                                                                  	.animate({opacity: 0, top: '45%'}, 500,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
                                                                                                                  		function(){ // пoсле aнимaции
                                                                                                                  		$(this).css('display', 'none'); // делaем ему display: none;
                                                                                                                  		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
                                                                                                                      });
                                                                                                                      }
                                                                                                                      });
                                                                                                                  });
                                                                                                                  Это чанк tpl.AjaxForm
                                                                                                                  <form method="post" class="ajax_form af_example">
                                                                                                                          <input type="hidden" name="title" value="[[*pagetitle]]">
                                                                                                                  	    <input type="hidden" name="link" value="[[*uri:tag]]">
                                                                                                                          <input type="text" placeholder="Как вас зовут?" value="[[+fi.name-zv]]" name="name-zv" id="name" class="input_text form-control"/>
                                                                                                                          <span class="error_name">[[+fi.error.name]]</span>
                                                                                                                          <input type="text" placeholder="Контактный телефон *" name="phone-zv" value="[[+fi.phone-zv]]" id="phone-zv" class="phone-zv form-control"/>
                                                                                                                          <span class="error_message">[[+fi.error.phone-zv]]</span>
                                                                                                                  		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
                                                                                                                          <input class="button" type="submit" value="Перезвоните мне">
                                                                                                                      [[+fi.success:is=`1`:then=`
                                                                                                                      <div class="alert alert-success">[[+fi.successMessage]]</div>
                                                                                                                      `]]
                                                                                                                      [[+fi.validation_error:is=`1`:then=`
                                                                                                                      <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
                                                                                                                      `]]
                                                                                                                  </form>
                                                                                                                  
                                                                                                                  Это чанк modal-zv-tpl
                                                                                                                  <strong>[[+name-zv:empty=`Не заполнено`]]</strong> прислал(а) <strong>заявку на обратный звонок </strong> со страницы: <strong><a href="http://ctolux.ru/[[+link]]">[[+title]]</a></strong> <br />
                                                                                                                  Данные с формы:<br />
                                                                                                                  <p>Имя: <strong>[[+name-zv:empty=`Не заполнено`]]</strong></p>
                                                                                                                  <p>Телефон: <strong>[[+phone-zv]]</strong></p>
                                                                                                                  Вроде все. Могу ссылку на сайт дать…
                                                                                                                  1. Игорь 28 февраля 2017, 19:25 # 0
                                                                                                                    Так получается Вы присылаете самому себе письмо и еще используете mail.ru.
                                                                                                                    Просто в emailForm напишите почту типа no-reply@site.ru
                                                                                                                    Где site.ru Ваш адрес сайта
                                                                                                                    1. Вадим 01 марта 2017, 01:11(Комментарий был изменён) # 0
                                                                                                                      Всеравно не работает. Может это связанно с бесплатностью хостинга?
                                                                                                                      Брал пример у MuzZa отсюда — форма закрывается, но не отправляет.
                                                                                                                    2. Дмитрий 09 февраля 2017, 20:51(Комментарий был изменён) # 0
                                                                                                                      Спасибо дружище. В шаблоне было свое модальное окно, куда я и встраивал форму, которую нашел на просторах сети. Все ничего, но меня замучила кнопка «Отправить». Не мог заставить работать. Потом добился — работала 2 дня. Что-то произошло — сегодня не пашет. Ваше готовое решение супер, и заработало без бубна!
                                                                                                                      1. Дмитрий 09 февраля 2017, 20:58 # 0
                                                                                                                        Ах да. Может тоже подскажете… Письма шлет только на почту своего домена admin@site.ru а на сторонние 321@mail.ru — не хочет.
                                                                                                                        1. Игорь 09 февраля 2017, 20:59 # 0
                                                                                                                          Очень приятно)
                                                                                                                          Рад, что моё решение помогло.
                                                                                                                          1. Игорь 09 февраля 2017, 21:04 # 0
                                                                                                                            А вы указали почту с которой отправляете в параметре emailFrom?
                                                                                                                            1. Дмитрий 09 февраля 2017, 21:08 # 0
                                                                                                                              Конечно нет! Еще раз огромное спасибо Игорь. Все поправил все работает. Всегда на WP был, решил осваивать что-то посерьезней. Спасибо. Подписываюсь на Вас.
                                                                                                                              1. Игорь 09 февраля 2017, 21:11 # 0
                                                                                                                                Пожалуйста :)
                                                                                                                              2. Сергей 23 января 2017, 16:23 # 0
                                                                                                                                Огромное спасибо за эту статью!
                                                                                                                                Настроил — заработало сразу.
                                                                                                                                Давно искал подобное.
                                                                                                                                1. Игорь 23 января 2017, 17:01 # 0
                                                                                                                                  Пожалуйста! Рад, что статья помогла! :)
                                                                                                                                2. Sasha 20 января 2017, 12:18 # 0
                                                                                                                                  Добрый день!

                                                                                                                                  Сообщение отправляется, но вот форма не закрывается и не появляется сообщение об отправке. Подскажите, пожалуйста, в чем может быть причина?
                                                                                                                                  1. Игорь 20 января 2017, 12:29 # 0
                                                                                                                                    Причин может быть много, что написано в консоле?
                                                                                                                                    Закрытие формы происходит в событии (af_complete) в modal.js
                                                                                                                                    1. Sasha 20 января 2017, 12:48 # 0
                                                                                                                                      В консоле modal.js не упоминается, но есть это:

                                                                                                                                      Uncaught TypeError: Cannot read property 'find' of undefined
                                                                                                                                          at Array.success (default.js:43)
                                                                                                                                          at Object.options.success (jquery.form.js:233)
                                                                                                                                          at c (jquery-1.10.2.min.js:4)
                                                                                                                                          at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4)
                                                                                                                                          at k (jquery-1.10.2.min.js:6)
                                                                                                                                          at XMLHttpRequest.r (jquery-1.10.2.min.js:6)
                                                                                                                                      1. Игорь 20 января 2017, 12:54 # 0
                                                                                                                                        Проблема с AjaxForm.
                                                                                                                                        1. Попробуйте использовать jQuery v1.7.2
                                                                                                                                        2. Имеется ли в чанке tpl.AjaxForm этот код
                                                                                                                                        [[+fi.success:is=`1`:then=`
                                                                                                                                            <div class="alert alert-success">[[+fi.successMessage]]</div>
                                                                                                                                            `]]
                                                                                                                                            [[+fi.validation_error:is=`1`:then=`
                                                                                                                                            <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
                                                                                                                                            `]]
                                                                                                                                        Но я думаю проблема с jquery!
                                                                                                                                      2. Aliya 03 декабря 2016, 16:52(Комментарий был изменён) # 0
                                                                                                                                        Добрый вечер!
                                                                                                                                        Все сделала по вышесказанному. В нужном месте:
                                                                                                                                        <a href="[[*uri]]#" class="callback">Заказать обратный звонок</a>
                                                                                                                                        … Кликаю по ней на сайте, перенаправляется на главную страницу. Что я делаю не так???(((( Неделю мучаюсь.
                                                                                                                                        Чанк формы:
                                                                                                                                        <form action="" class="contact-form af_example" method="post">
                                                                                                                                        	<fieldset>
                                                                                                                                        	 <input type="hidden" name="workemail" value="">
                                                                                                                                        	<label>
                                                                                                                                        		<span>Ваш номер телефона:</span>
                                                                                                                                        		<input type="text" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="Ваш номер телефона..." required>
                                                                                                                                        		<span class="error_phone">[[+fi.error.phone]]</span>
                                                                                                                                        	</label>
                                                                                                                                        	<div class="text-center">
                                                                                                                                        	<button class="button button-small">Отправить</button>
                                                                                                                                        	</div>
                                                                                                                                            </fieldset>
                                                                                                                                            			[[+fi.success:is=`1`:then=`
                                                                                                                                        		<div class="alert alert-success">[[+fi.successMessage]]</div>
                                                                                                                                        	`]]
                                                                                                                                        	[[+fi.validation_error:is=`1`:then=`
                                                                                                                                        		<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
                                                                                                                                        	`]]
                                                                                                                                        	</form>
                                                                                                                                        В футере это:
                                                                                                                                        <div class="hidden" id="modal_form">		
                                                                                                                                         [[!AjaxForm?
                                                                                                                                        	                        &snippet=`FormIt`
                                                                                                                                                	                &form=`tpl.AjaxForm.callback`
                                                                                                                                                	                &hooks=`spam,email,FormitSaveForm`
                                                                                                                                                            	    &emailTo=`email@list.ru`
                                                                                                                                        	                        &emailSubject=`Заявка с сайта [[++site_name]]`
                                                                                                                                        	                        &emailTpl=`tpl.email.services`
                                                                                                                                        	                        &emailFrom=`from@my.ru`
                                                                                                                                        	                        &validate=`name:required,phone:required,workemail:blank`
                                                                                                                                        	                        &validationErrorMessage=`В форме содержатся ошибки!`
                                                                                                                                                	                &successMessage=`Сообщение успешно отправлено`]]
                                                                                                                                        
                                                                                                                                        	</div>
                                                                                                                                        modal.js. Код вставила в свой setting.js
                                                                                                                                        $(function() { // вся мaгия пoсле зaгрузки стрaницы
                                                                                                                                        	$('.callback').click( function(event){ // лoвим клик пo ссылки с class="modal"
                                                                                                                                        	event.preventDefault(); // выключaем стaндaртную рoль элементa
                                                                                                                                        	$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
                                                                                                                                        	function(){ // пoсле выпoлнения предъидущей aнимaции
                                                                                                                                        	$('#modal_form') 
                                                                                                                                        	.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
                                                                                                                                        	.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
                                                                                                                                        	});
                                                                                                                                        	});
                                                                                                                                        	/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
                                                                                                                                        	$('.exit, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
                                                                                                                                        	$('#modal_form')
                                                                                                                                        	.animate({opacity: 0, top: '45%'}, 200,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
                                                                                                                                        		function(){ // пoсле aнимaции
                                                                                                                                        		$(this).css('display', 'none'); // делaем ему display: none;
                                                                                                                                        		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
                                                                                                                                        		}
                                                                                                                                        	);
                                                                                                                                        });
                                                                                                                                        $(document).on('af_complete', function(event, response) {
                                                                                                                                            if (response.success) { //Если форма заполнена и нет ошибок
                                                                                                                                           $('#modal_form')
                                                                                                                                        	.animate({opacity: 0, top: '45%'}, 500,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
                                                                                                                                        		function(){ // пoсле aнимaции
                                                                                                                                        		$(this).css('display', 'none'); // делaем ему display: none;
                                                                                                                                        		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
                                                                                                                                            });
                                                                                                                                            }
                                                                                                                                            });
                                                                                                                                        });
                                                                                                                                        1. Игорь 03 декабря 2016, 17:04 # 0
                                                                                                                                          Здравствуйте! Не вижу у Вас div с id overlay.
                                                                                                                                          Можете скинуть адрес сайта? Вы делали отладку?
                                                                                                                                          1. Aliya 03 декабря 2016, 17:13 # 0
                                                                                                                                            Вот что я заметила: В мазиле экран темнеет, но модального окна все же нет. В хроме на главную кидает. Куда именно адрес сайта кинуть?
                                                                                                                                            1. Игорь 03 декабря 2016, 17:14 # 0
                                                                                                                                              Можете прямо сюда скинуть
                                                                                                                                              1. Aliya 03 декабря 2016, 17:17 # 0
                                                                                                                                                В хроме кэш очистила, теперь тоже просто темнее. В хроме почему то нужно постоянно чистить кэш, чтобы увидеть изменения, в основном, когда картинки меняю В мазиле сразу обновляются. а в хроме нет(((
                                                                                                                                                1. Aliya 03 декабря 2016, 17:18 # 0
                                                                                                                                                  direct-remtehprint.ru
                                                                                                                                                  1. Игорь 03 декабря 2016, 17:21 # 0
                                                                                                                                                    В футере уберите класс hidden. Он у Вас как раз и прячет.
                                                                                                                                                    <div class="hidden" id="modal_form">
                                                                                                                                                    1. Aliya 03 декабря 2016, 17:27 # 0
                                                                                                                                                      Заработало! Спасибо!
                                                                                                                                                      1. Игорь 03 декабря 2016, 17:29 # 0
                                                                                                                                                        Не за что :)
                                                                                                                                                      2. MuzZa 17 ноября 2016, 15:04(Комментарий был изменён) # 0
                                                                                                                                                        Добрый день!
                                                                                                                                                        И у меня не приходят письма((( Помогите, пожалуйста!
                                                                                                                                                        Установила Ajaxform и formit с установщика Modx
                                                                                                                                                        Вызов такой:
                                                                                                                                                        [[!AjaxForm?
                                                                                                                                                            &snippet=`Formit`
                                                                                                                                                            &form=`tpl.AjaxForm.example`
                                                                                                                                                            &hooks=`FormItSaveForm,email`
                                                                                                                                                            &emailSubject=`Заявка с сайта ModX`
                                                                                                                                                            &emailTo=`моя почта@mail.ru`
                                                                                                                                                            &validate=`name:required,phone:required,usluga:required,message:required`
                                                                                                                                                            &validationErrorMessage=`В форме содержатся ошибки!`
                                                                                                                                                            &successMessage=`Спасибо за заявку! Мы свяжемся с вами в ближайшее время.`
                                                                                                                                                            &emailTpl=`tpl.email`
                                                                                                                                                        ]]
                                                                                                                                                        /tpl.AjaxForm.example/
                                                                                                                                                        	<form action="[[~[[*id]]]]" class="contact-form" method="post">
                                                                                                                                                        	 
                                                                                                                                                        	<div class="contact-form-head">
                                                                                                                                                        		<h4>Оставить заявку</h4>
                                                                                                                                                        		<p>Оставьте заявку и мы свяжемся с Вами в течении 30 минут</p>
                                                                                                                                                        </div>
                                                                                                                                                        	<label>
                                                                                                                                                        		<span>Ваше имя:</span>
                                                                                                                                                        		<input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="Ваше имя...">
                                                                                                                                                        		<span class="error_name">[[+fi.error.name]]</span>
                                                                                                                                                        	</label>
                                                                                                                                                        	<label>
                                                                                                                                                        		<span>Ваш номер телефона:</span>
                                                                                                                                                        		<input type="text" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="Ваш номер телефона..." required>
                                                                                                                                                        		<span class="error_phone">[[+fi.error.phone]]</span>
                                                                                                                                                        	</label>
                                                                                                                                                        	<label>
                                                                                                                                                        		<span>Услуга:</span>
                                                                                                                                                        	<select name="Usluga" id="af_usluga" value="[[+fi.usluga]]" >
                                                                                                                                                        		<option value="Ремонт принтера">Ремонт принтера</option>
                                                                                                                                                        		<option value="Ремонт МФУ">Ремонт МФУ</option>
                                                                                                                                                        		<option value="Ремонт копира/ксерокса">Ремонт копира/ксерокса</option>
                                                                                                                                                        		<option value="Ремонт плоттера">Ремонт плоттера</option>
                                                                                                                                                        		<option value="Другое">Другое</option>
                                                                                                                                                        	</select>
                                                                                                                                                        	</label>
                                                                                                                                                        		<label>
                                                                                                                                                        		<span>Опишите модель и неисправность</span>
                                                                                                                                                        		<textarea id="af_message" name="message" class="form-control" rows="5" placeholder="Опишите модель и неисправность аппарата" required></textarea>
                                                                                                                                                        		<span class="error_message">[[+fi.error.message]]</span>
                                                                                                                                                        	</label>
                                                                                                                                                        	<div class="text-center">
                                                                                                                                                        	<button class="button button-small">Отправить</button>
                                                                                                                                                        	[[+fi.success:is=`1`:then=`
                                                                                                                                                        		<div class="alert alert-success">[[+fi.successMessage]]</div>
                                                                                                                                                        	`]]
                                                                                                                                                        	[[+fi.validation_error:is=`1`:then=`
                                                                                                                                                        		<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
                                                                                                                                                        	`]]
                                                                                                                                                        	</div>
                                                                                                                                                        	</form>
                                                                                                                                                        
                                                                                                                                                        /tpl.email/
                                                                                                                                                        <p style="font-size: 18px">На сайте <b>[[++site_url]]</b> оставили заявку.</p>
                                                                                                                                                        <p>От кого: [[+name]]</p>
                                                                                                                                                        <p>Телефон: [[+phone]]</p>
                                                                                                                                                        <p>Услугв: [[+usluga]]</p>
                                                                                                                                                        <p>Сообщение: [[+message]]</p>
                                                                                                                                                        
                                                                                                                                                        1. Игорь 19 ноября 2016, 20:52 # 0
                                                                                                                                                          Здравствуйте! Разобрались? Попробуйте убрать хук FormItSaveForm или допишите поля, которые должны сохраняться. А так вроде все верно и должно работать. Возможно нужно заполнить значение &emailFrom
                                                                                                                                                          1. MuZza 20 ноября 2016, 11:30 # 0
                                                                                                                                                            Здравствуйте! Да, разобралась. Все элементарно, необходимый скрипт jquery, оказывается, не был подключен)))
                                                                                                                                                          2. Павел 31 октября 2016, 16:30 # 0
                                                                                                                                                            Супер. Спасибо за ваш труд, то что нужно. Правда с вызовом класса modal часто проблемы, файл bootstrap.min.css блокировал показ кнопки на модальное окно, переименовал все работает хорошо.
                                                                                                                                                            Еще вопрос такой как реализовать в форме четбоксы кнопки множественного выбора и тому подобное? Возможно это реализовать в этой форме? Спасибо.
                                                                                                                                                            1. Денис 12 октября 2016, 16:43 # 0
                                                                                                                                                              Добрый вечер, у меня не отправляются письма на почту. Подскажите пожалуйста в чем может быть проблема? Спасибо!
                                                                                                                                                              1. Игорь 12 октября 2016, 16:46 # 0
                                                                                                                                                                Здравствуйте!
                                                                                                                                                                Можете прислать код как Вы подключаете AjaxForm?
                                                                                                                                                                1. Денис 12 октября 2016, 17:20 # 0
                                                                                                                                                                  Здравствуйте.

                                                                                                                                                                  <div id="modal_form">
                                                                                                                                                                  	  <h3>Заказать звонок!</h3>
                                                                                                                                                                  	  <div class="comment">Оставьте заявку и наш специалист свяжется с вами в ближайшее время!</div>
                                                                                                                                                                        <a class="exit"></a>
                                                                                                                                                                  [[!AjaxForm?
                                                                                                                                                                     &snippet=`FormIt`
                                                                                                                                                                     &hooks=`spam,email`
                                                                                                                                                                     &emailFrom=`noreply@mail.ru`
                                                                                                                                                                     &form=`tpl.AjaxForm`
                                                                                                                                                                     &emailTpl=`modal-zv-tpl`
                                                                                                                                                                     &emailTo=`info@site-custom.ru`
                                                                                                                                                                     &emailSubject=`Заказ звонка с сайта`
                                                                                                                                                                     &validate=`mail-zv:required`
                                                                                                                                                                     &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
                                                                                                                                                                     &successMessage=`Сообщение успешно отправлено, наш менеджер свяжеться с Вами в ближайшее время`
                                                                                                                                                                  ]]
                                                                                                                                                                  </div>
                                                                                                                                                                  <div id="overlay"></div>
                                                                                                                                                                  1. Игорь 12 октября 2016, 17:22 # 0
                                                                                                                                                                    Вы Formit установили? Два чанка создали?
                                                                                                                                                                    1. Игорь 12 октября 2016, 17:24 # 0
                                                                                                                                                                      Возможно нужно поменять &emailFrom
                                                                                                                                                                      1. Денис 12 октября 2016, 17:26 # 0
                                                                                                                                                                        Я создал чанк tpl.AjaxForm
                                                                                                                                                                        <form method="post" class="ajax_form af_example">
                                                                                                                                                                                <input type="hidden" name="title" value="[[*pagetitle]]">
                                                                                                                                                                        	    <input type="hidden" name="link" value="[[*uri:tag]]">
                                                                                                                                                                                <input type="text" placeholder="Как вас зовут?" value="[[+fi.name-zv]]" name="name-zv" id="name" class="input_text form-control"/>
                                                                                                                                                                                <span class="error_name">[[+fi.error.name]]</span>
                                                                                                                                                                                <input type="text" placeholder="Ваш e-mail *" name="mail-zv" value="[[+fi.mail-zv]]" id="mail-zv" class="mail-zv form-control"/>
                                                                                                                                                                                <span class="error_message">[[+fi.error.mail-zv]]</span>
                                                                                                                                                                        		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
                                                                                                                                                                                <input class="button" type="submit" value="Перезвоните мне">
                                                                                                                                                                            [[+fi.success:is=`1`:then=`
                                                                                                                                                                            <div class="alert alert-success">[[+fi.successMessage]]</div>
                                                                                                                                                                            `]]
                                                                                                                                                                            [[+fi.validation_error:is=`1`:then=`
                                                                                                                                                                            <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
                                                                                                                                                                            `]]
                                                                                                                                                                        </form>
                                                                                                                                                                        и чанк modal-zv-tpl

                                                                                                                                                                        <strong>[[+name-zv:empty=`Не заполнено`]]</strong> прислал(а) <strong>заявку на обратный звонок </strong> со страницы: <strong><a href="http://www.valentinadudko.ru/[[+link]]">[[+title]]</a></strong> <br />
                                                                                                                                                                        Данные с формы:<br />
                                                                                                                                                                        <p>Имя: <strong>[[+name-zv:empty=`Не заполнено`]]</strong></p>
                                                                                                                                                                        <p>Почта: <strong>[[+mail-zv]]</strong></p>
                                                                                                                                                                        а вывожу чанк таким образом:

                                                                                                                                                                        [[$ajaxform]]
                                                                                                                                                                        <a href="[[*uri]]#" class="button is-large modal">Записаться</a>
                                                                                                                                                                        1. Денис 12 октября 2016, 17:27 # 0
                                                                                                                                                                          FormIt установил, я ранее делал по вашей инструкции модальное окно без Ajax, там все работало и отправлялось. Здесь почему то нет.
                                                                                                                                                                          1. Денис 12 октября 2016, 17:29 # 0
                                                                                                                                                                            Пробовал, не работает.
                                                                                                                                                                            1. Денис 12 октября 2016, 17:30 # 0
                                                                                                                                                                              В файле .htacces на всякий случай добавил строчку php_value register_globals 0
                                                                                                                                                                              1. Денис 12 октября 2016, 17:39 # 0
                                                                                                                                                                                Сейчас несколько раз получилось, но как поменял email from опять все перестало работать.
                                                                                                                                                                                1. Денис 12 октября 2016, 17:49 # 0
                                                                                                                                                                                  Заработало, я убрал строку &emailFrom=`...` и сообщения стали доставляться.
                                                                                                                                                                                  В любом случае спасибо вам большое за инструкцию и оперативную поддержку!
                                                                                                                                                                                  1. Игорь 12 октября 2016, 18:10 # 0
                                                                                                                                                                                    Пожалуйста. Рад, что разобрались!
                                                                                                                                                                                  2. Сергей 23 сентября 2016, 13:06 # 0
                                                                                                                                                                                    Огромное спасибо за статью — все доходчиво и работает! Автору респект.
                                                                                                                                                                                    1. Игорь 26 сентября 2016, 16:25 # 0
                                                                                                                                                                                      Всегда пожалуйста, рад что читаете.
                                                                                                                                                                                    2. Кирилл 11 сентября 2016, 02:09 # 0
                                                                                                                                                                                      Спасибо-круто!!!
                                                                                                                                                                                      1. Алексей 09 сентября 2016, 15:31 # 0
                                                                                                                                                                                        Здравствуйте, Игорь.
                                                                                                                                                                                        Ajax очень удобен. У меня тоже стоит обратная форма с аяксом да и не только она.
                                                                                                                                                                                        А вот с комментариями проблемы.
                                                                                                                                                                                        Может быть Вы сможете подсказать (или написать статью) как можно подключить древовидные комментарии с Аяксом для сайта на MODx.
                                                                                                                                                                                        Буду очень благодарен. Спасибо!
                                                                                                                                                                                        1. Игорь 09 сентября 2016, 15:35 # 0
                                                                                                                                                                                          Здравствуйте, Алексей.
                                                                                                                                                                                          Я могу посоветовать Вам комментарии с помощью компонента tickets.
                                                                                                                                                                                          1. Алексей 09 сентября 2016, 15:39 # 0
                                                                                                                                                                                            Да, знаю про тикетс. Но у меня стоит и настроен Quip. И все переделывать совсем не хочется. Вот и ищу альтернативный способ.
                                                                                                                                                                                            Если не найду, то, наверное, придется переходить на тикетс.
                                                                                                                                                                                            1. Игорь 10 сентября 2016, 15:40 # 0
                                                                                                                                                                                              Я вот знаю только как загружать комментарии через Ajax, а вот как добавлять через Ajax, нужно подумать
                                                                                                                                                                                              1. Кирилл 11 сентября 2016, 02:12 # 0
                                                                                                                                                                                                1. Николай 17 декабря 2018, 14:26 # 0
                                                                                                                                                                                                  Спасибо, все работает, только на телефонах во всю ширину не помещается :(
                                                                                                                                                                                                  1. Николай 19 декабря 2018, 13:59 # 0
                                                                                                                                                                                                    А как изменить логику скрипта, чтобы форма появлялась сама через 60 секунд, а не по клику на кнопку?
                                                                                                                                                                                                    1. Игорь 19 декабря 2018, 16:22 # 0
                                                                                                                                                                                                      Почитайте про функцию setTimeOut
                                                                                                                                                                                                      1. Николай 19 декабря 2018, 16:24 # 0
                                                                                                                                                                                                        Собрал несколько скриптов, для Ajax взял ваш исходник, спасибо за помощь!