<form class="form" id="form" name="form">
<input type="text" class="form-field" name="phone" placeholder="Введите ваш телефон">
<button class="form-button"><span class="text-button">Отправить заявку</span></button>
</form>
<footer>
<div class="overlay js-overlay-thank-you">
<div class="popup js-thank-you">
<h2>Спасибо за заявку</h2>
<div class="close-popup js-close-thank-you"></div>
</div>
</div>
</footer>
//Примерный код
// Отправка заявки
$(document).ready(function() {
$('#form').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
if (document.form.phone.value == '' ) {
valid = false;
return valid;
}
$.ajax({
type: "POST",
url: "mail.php",
data: $(this).serialize()
}).done(function() {
$('.js-overlay-thank-you').fadeIn();
$(this).find('input').val('');
$('#form').trigger('reset');
});
return false;
});
});
// Закрыть попап «спасибо»
$('.js-close-thank-you').click(function() { // по клику на крестик
$('.js-overlay-thank-you').fadeOut();
});
$(document).mouseup(function (e) { // по клику вне попапа
var popup = $('.popup');
if (e.target!=popup[0]&&popup.has(e.target).length === 0){
$('.js-overlay-thank-you').fadeOut();
}
});
// Маска ввода номера телефона (плагин maskedinput)
$(function($){
$('[name="phone"]').mask("+7(999) 999-9999");
});
<?php
$recepient = "11111111@gmail.com";
$siteName = "22222222";
$phone = trim($_POST["phone"]);
$message = "nТелефон: $phone";
$pagetitle = "Заявка с сайта \"$siteName\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
?>
