Форма отправки письма без перезагрузки страницы для Лендинга

И так приступим.

1. Подключение библиотеки jQuery

Скорее всего вы и так это сделаете, но всеравно напомню об этом.
Нужно в head добавить следующее:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2.Добавляем javascript

Для того, чтобы отправка формы осуществлялась без перезагрузки страницы нам придется воспользоваться технологией ajax. Необходимо после подключенной библиотеки подключить следующий скрипт:

<script  type="text/javascript">
 function AjaxFormRequest(result_id,formMain,url) {
 jQuery.ajax({
 url: url,
 type: "POST",
 dataType: "html",
 data: jQuery("#"+formMain).serialize(),
 success: function(response) {
 document.getElementById(result_id).innerHTML = response;
 },
 error: function(response) {
 document.getElementById(result_id).innerHTML = "<p>Возникла ошибка при отправке формы. Попробуйте еще раз</p>";
 }
 });
 
 $(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');
 }
</script>

Его нижняя часть

$(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

отвечает за то, чтобы после нажатия на кнопку отправки поля ставали пустыми. Также он может очистить checbox и радиокнопки, если Вы добавите их к данной форме. Если Вам это не нужно, можете просто удалить его.

3.Добавляем html

В нужном месте вставляем код с формой приведенный ниже

<div class="form">
<p>Оставьте ваши контакты и наш консультант свяжется с вами </p>
<form method="post" action="" id="formMain">
<input id="name" type="text" name="name" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" />
<input id="telephone" type="text" name="telephone" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off"/>
<div id="messegeResult"><input class="btn" id="button" type="button"  value="Отправить" onclick="AjaxFormRequest('messegeResult', 'formMain', 'zakaz.php')"/></div>
</form>
</div>

Данная форма имеет 2 поля Имя и телефон. Так что ее можно использовать еще и как форму заказа обратного звонка на любом сайте не только Лендинге. Можете добавить свои поля с почтой и адресом и тд.
Кстати, последний input - это кнопка отправки и она заключенная в div id=messegeResult. Вся фишка в том что после нажатия кнопки, данные отправятся Вам на почту, а сама кнопка исчезнет, а вместо нее появится текст типа - Сообщение успешно отправлено. Скоро Вам перезвонят.
Можете в div id=messegeResult заключить например вторую строку - Оставьте ваши контакты и наш консультант свяжется с вами тогда после нажатия на кнопу этот текст изменится на тот, что приведен выше. В общем все что находится в этом диве, после нажатия на кнопку изменится на сообщение об успешной отправке.

4.Создаем php обработчик, для нашей формы

Для начала нужно создать файл и назвать его zakaz.php
Далее вставить в него следующий код, отвечающий за обработку

<?php
if($_POST)
    {
    $to = "почта@gmail.com"; //куда отправлять письмо
    $subject = "Заказ звонка"; //тема
    $message = '<span style="font-weight:bold;color:#ff6600;font-size:18px;"><i>Заказ звонка</i> </span><br><br>
	Имя: <span style="font-weight:bold;color:#339900;">'.$_POST['name'].'</span><br>
	Телефон: <span style="font-weight:bold;color:#339900;"> '.$_POST['telephone'].'</span>';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: <office@gmail.com>\r\n"; // от кого, придумайте ящик или укажите почту своего сайта.
    $result = mail($to, $subject, $message, $headers);
 
    if ($result){
        echo "<p>Сообщение успешно отправлено. Скоро Вам перезвонят</p>";
    }
    }
?>

В 4 и в 11 нужно указать почту, на которую будут отправлены данные с формы. В 6 строке $message начинается все содержание письма.так что если добавите новые поля адреса и почты и тд, то их как раз нужно дописать тут по примеру уже имеющихся Имени и Телефона.
В 15 строке - как раз прописано то сообщение, которое выведется в div id=messegeResult с предыдущего пункта. Так что можете его изменить под себя.

5.Задаем стили

Чтобы форма выглядела боле-менее читабельно, зададим стили. которые Вы тоже можете менять так как Вам угодно.

.form{
width:350px;
height:225px;
position:absolute;
top:50%;
left:50%;
right:50%;
bottom:50%;
background:#f1f1f1;
padding: 20px;
}
.form p{
font-size:18px;
color:#333;
text-align:center;
}
input[type="text"]{
background:#fff;
font-size:15px;
border:2px solid #336699;
line-height:20px;
padding:7px 10px 6px;
margin:10px 0 0;
font-size:15px;
width:90%;
box-shadow:inset 0 2px 7px rgba(0,0,0,.15);
transition:all .15s;
}
input[type="text"]:hover,
input[type="text"]:focus{
border-color:#ff6600;
}
input[type="text"]{
border-color:#ccff33;
}
.btn{vertical-align:middle;font-size:18px;color:#fff;font-weight:700;text-align:center;line-height:1.3 !important;padding:5px 10px 5px;margin:10px 0 0;border:0;cursor:pointer;background:#97ca33;}

.btn:active{
color:rgba(255,255,255,.6);
background:#57900f;
box-shadow:inset 0 2px 15px rgba(0,0,0,.2);
}
.btn:hover{
background:#a6d251;
}

Если все сделано правильно то у Вас должна получиться форма. На этом все, спасибо за внимание 🙂