Универсальная форма заявки с использованием Ajax + всплывающее окно «Спасибо» (без перезагрузки страницы)

Сегодня затрону очень древнюю но актуальную тему «Форма заявки» для простеньких сайтов, которые работают без CMS, фреймворков и прочего. После ознакомления с данной заметкой Вы сможете скачав какой нибудь бесплатный шаблон быстро и без дополнительных затрат на веб-мастера запустить Ваш сайт в считанные минуты, установив только мой простой как двери скрипт.

Создаем форму

Копируем код формы в свою верстку, вставляем туда, где нужно показать форму:

<form id="form" name="form">
	<input type="text" class="form-field" name="name" placeholder="Your name"/><br/><br/>
	<input type="text" class="form-field" name="phone" placeholder="Your phone"/><br/><br/>
	<button class="form-button"><span class="text-button">Send</span></button>
</form>

Создаем верстку окна «Спасибо»

Копируем код формы в свою верстку, можно непосредственно перед:

</body>

:

<div class="overlay js-overlay-thank-you">
	<div class="popup js-thank-you">
		<h2>Thank you for your application!</h2>
		<div class="close-popup js-close-thank-you"></div>
	</div>
</div>

Добавляем CSS стили для всплывающего окна «Спасибо»

Добавляем данный CSS код в файл со всеми стилями Вашего сайта:

.overlay {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .5);
	display: none;
}

.popup {
	position: absolute;
	width: 300px;
	height: 180px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 40px;
	background-color: #FFF;
}

.close-popup {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 23px;
	height: 23px;
	cursor: pointer;
}

.close-popup:before {
	content: '';
	background-color: #000;
	position: absolute;
	height: 1px;
	width: 31px;
	top: 11px;
	left: -4px;
	transform: rotate(-45deg);
}

.close-popup:after {
	content: '';
	background-color: #000;
	position: absolute;
	height: 1px;
	width: 31px;
	top: 11px;
	transform: rotate(45deg);
	left: -4px;
}
к содержанию ↑

Добавляем JS (JQuery)

Создаем папку «js» с файлом «main.js» и добавляем данный код:

// Form sender
$(document).ready(function() {
	$('#form').submit(function() { //Check empty inputs
		$.ajax({
			type: "POST",
			url: "mail/mail.php",
			data: $(this).serialize(),
			success: function(data){
				if(data == 'ok'){
					$('.js-overlay-thank-you').fadeIn();
					$(this).find('input').val('');
					$('#form').trigger('reset');
				}if(data == 'error'){
					alert('System error!');
				}if(data == 'required_fields_is_empty'){
					alert('Fill  all fields!'); 
				}
			}
		});
		return false;
	});
});

// Close thank you window
$('.js-close-thank-you').click(function() { //close
	$('.js-overlay-thank-you').fadeOut();
});

$(document).mouseup(function (e) { //for any click 
	var popup = $('.popup');
	if (e.target!=popup[0] && popup.has(e.target).length === 0){
		$('.js-overlay-thank-you').fadeOut();
	}
});

// Phone number mask (maskedinput plugin)
$(function($){
	$('[name="phone"]').mask("+38(999) 999-9999"); 
});
к содержанию ↑

Добавляем PHP обработчик

Создаем папку «php» с файлом «mail.php» и добавляем данный код:

<?php 
// By Andrey Shevchuk for webmasteru.pw
// Feedback form 
// E-Mail: andrushik009@yandex.ru
 
$to  = "andrushik009@yandex.ru" ; //Admin	
	
$_POST['name']  = trim($_POST['name']);
$_POST['phone'] = trim($_POST['phone']);

$subject = "New message from ".$_SERVER['HTTP_HOST']; //Subject

$message ='';

if(!empty($_POST['name'])){
	$message .= "".$_POST['name']."\n";
}else{//if empty 
	die('required_fields_is_empty');
} 
if(!empty($_POST['phone'])){
	$message .= "".$_POST['phone']."\n";
}else{//if empty
	die('required_fields_is_empty');
} 

$headers  = "Content-type: text/html; charset=utf-8\r\n";  
$headers .= "From:  <".$to.">\r\n"; //From

if(mail($to, $subject, $message, $headers)){
	die('ok'); //Done!
}

die('error'); //If mail not sended!
?>
к содержанию ↑

Подключаем плагин «jQuery Masked Input Plugin»

Перейти на страницу плагина: jQuery Masked Input Plugin

Пример подключения:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js" />

Скачать или посмотреть код рабочей версии

Идем на GitHub

[Всего голосов: 7    Средний: 4.9/5]