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

No avatar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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