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 / 41835

No avatar

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

  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