Unimail подключаем скрипт на MODX

Разъяснения и дополнения к ранее написанной статье))

Важно:

Подправим стиль для выезжающего окна "Success"

Бордюр мы задали как тень)) Хз почему так, но видимо на это были свои причины. Вроде чистый border - вылезал на рамки окна - вообщем такое решение меня устроило..

Здесь задаем текст сообщения для вссплывающего POP-UP окна:

увидим...

И затем еще одно окно появиться...

(Мы над этим еще работаем...)

И получим такое сообщение на почту:

Теперь отправим сообщение с "Жестко посаженной" формы:

Появиться такое сообщение:

И получим на почту такое сообщение:

Так отредактировали ЧАНК для POP-UP всплывающей формы:

*
*

<div class="hidden">
  
	<!-- START - "POP-UP" CALLBACK -->
	<form id="callback" class="contact-form form-callback">

		<div class="success">
			<p>Сообщение доставлено!</p>
		</div>

			<!--<input type="hidden" name="admin-data">-->
			<input type="hidden" name="form_subject" value="Заявка с ikon-media.ru"> <!--Это ГЛАВНАЯ ТЕМА письма-->
			<input type="hidden" name="project_name" value="ПРИШЛА ЗАЯВКА))"> <!--Это ПОД-тема письма-->
			<input type="hidden" name="admin_email" value="in-top@yandex.ru"> <!--Это обязательный адрес с которого отправляется сообщение-->

			<div class="contact-form-head">
				<h4>Оставить заявку</h4>
				<p>Оставьте заявку и мы свяжемся с Вами в течении 20 минут.</p>
			</div>

			<label>
				<span>Имя:</span>
				<input type="text" name="Имя" placeholder=" введите имя..." required>
			</label>

			<label>
				<span>Телефон:</span>
				<input type="text" name="Телефон" placeholder=" введите телефон...">
			</label>
			
			<input type="hidden" name="Клиент" value="Заказал обратный звонок..">
			<input type="hidden" name="Поступило от" value="Pop-Up Главная страница">

			<div class="text-center">
				<button class="button">Отправить</button>
			</div>

	</form>
  <!-- END - "POP-UP" CALLBACK -->

</div> <!-- END div = "hidden" -->

*
*

<p>Сообщение доставлено!</p>

</div>

<h4>Оставить заявку</h4>

<p>Оставьте заявку и мы свяжемся с Вами в течении 20 минут.</p>

</div>

<label>

</label>

<label>

<span>Телефон:</span>

</label>

<button class="button">Отправить</button>

</div>

</form>

</div>

А такой ЧАНК для "Фиксированной" формы:

*
*

	<form class="contact-form">

		<div class="contact-form-head">
			<h4>Оставить заявку</h4>
			<p>Оставьте заявку и мы свяжемся с Вами в течении 20 минут.</p>
		</div>
		
		<!-- То что будет отправлено по умолчанию: -->
		<input type="hidden" name="admin_email" value="in-top@yandex.ru"> <!--Это почта с которого прийдет письмо-->
		<input type="hidden" name="form_subject" value="Заявка с ikon-media.ru"> <!--Это ГЛАВНАЯ ТЕМА письма-->
		<input type="hidden" name="project_name" value="ПРИШЛА ЗАЯВКА))"> <!--Это ПОД-тема письма-->
		<!--То что реально будет отправлено-->

		<label>
			<span>Имя:</span>
			<input type="text" name="Имя" placeholder=" Ваше имя..." required>
		</label>

		<label>
			<span>Телефон:</span>
			<input type="text" name="Телефон" placeholder=" введите телефон...">
		</label>

		<label>
			<span>Пакет разработки:</span>
			<select name="Выбран пакет разработки">
				<option value="Старт">Старт</option>
				<option value="Стандарт">Стандарт</option>
				<option value="Бизнес">Бизнес</option>
			</select>
			
		</label>

		<input type="hidden" name="Сообщение отправлено" value="с Главной страницы ikon-media.ru..">

		<div class="text-center">
			<button class="button">Отправить</button>
		</div>

	</form>

*
*

<h4>Оставить заявку</h4>

<p>Оставьте заявку и мы свяжемся с Вами в течении 20 минут.</p>

</div>

<label>

</label>

<label>

<span>Телефон:</span>

</label>

<label>

<span>Пакет разработки:</span>

<option value="Старт">Старт</option>

<option value="Стандарт">Стандарт</option>

<option value="Бизнес">Бизнес</option>

</select>

</label>

<button class="button">Отправить</button>

</div>

</form>

Код JS - скрипта отправки сообщения (универсальный для обоих типов форм):

*
*

	// START E-mail Ajax Send -----
	//Documentation & Example: https://github.com/agragregra/uniMail
	$("form").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "assets/app/mail.php", //Change
			data: th.serialize()
		}).done(function() {
			alert("Сообщение отправлено!");
			th.find(".success").addClass("active");
			setTimeout(function() {
				// Done Functions
				th.find(".success").removeClass("active");
				th.trigger("reset");
				$.magnificPopup.close();
			}, 2000);
		});
		return false;
	});
	// END E-mail Ajax Send -----

*
*

// START E-mail Ajax Send -----

//Documentation & Example: https://github.com/agragregra/uniMail

$("form").submit(function() { //Change

var th = $(this);

$.ajax({

type: "POST",

url: "assets/app/mail.php", //Change

data: th.serialize()

}).done(function() {

alert("Сообщение отправлено!");

th.find(".success").addClass("active");

setTimeout(function() {

// Done Functions

th.find(".success").removeClass("active");

th.trigger("reset");

$.magnificPopup.close();

}, 2000);

});

return false;

});

// END E-mail Ajax Send -----

Скрипт прописали в common.js:

(тоже самое - просто с комментариями...)

Рубрики:

WEB-Верстка

Unimail подключаем скрипт на MODX

Оставить коментарий