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

No avatar

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

  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
                                              Игорь, день добрый
                                              Вопрос, собственно, по расположению этого самого окна, оно находится в произвольном месте, а при изменении масштаба страницы вообще «уплывает», как сделать, что оно четко располагалась, допустим справа в верхем уголке и там «мертво»сидело?
                                              Спасибо
                                            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