kmaroff
11/15/2017 - 8:15 PM

Форма обратной связи unimail во всплывающем окне

https://github.com/kmaroff/uniMail Работает в связке с фэнсибокс. В примере версия 2.

#contact-popup .success-form {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
}

#contact-popup .success-form.visible {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
$("#contact-popup").submit(function() { //Change
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "/mail.php", //Change
      data: th.serialize()
    }).done(function() {
    $(".success-form").addClass("visible"),
  	setTimeout(function() {
        th.trigger("reset");
    $(".success-form").removeClass("visible"),
  	$.fancybox.close();
}, 3500);
});
    return false;
  });


$(document).ready(function() {
	$(".order-button").fancybox({
		fitToView	: true,
		autoSize	: true,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
<button type="submit" class="order-button" href="#hidden-content">Заказать</button>

<div style="display: none;" id="hidden-content">
	<div class="contact-form houses-form">

		<form id="contact-popup" method="post">

			<div class="success-form">
				Спасибо за заявку!<br>
				Мы свяжемся с вами в ближайшее время.
			</div>

			<h3>Форма заявки</h3>

			<input type="hidden" name="project_name" value="Имя отправителя">
			<input type="hidden" name="admin_email" value="Почта">
			<input type="hidden" name="form_subject" value="Тема письма">

			<input type="text" name="Имя" placeholder="Ваше имя"><br>
			<input type="text" name="Почта/Телефон" placeholder="Почта/Телефон" required><br>
			<textarea rows="3" name="Сообщение" placeholder="Ваш вопрос"></textarea><br>
			<input type="hidden" name="Откуда" value="Метка">
			<button name="submit" type="submit" id="contact-submit" class="order-button-popup">Отправить</button>
	
	</form>

</div>
</div>