1. Подключение библиотеки jQuery
Скорее всего вы и так это сделаете, но всеравно напомню об этом.
Нужно в head добавить следующее:
|
1
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> |
2.Добавляем javascript
Для того, чтобы отправка формы осуществлялась без перезагрузки страницы нам придется воспользоваться технологией ajax. Необходимо после подключенной библиотеки подключить следующий скрипт:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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> |
Его нижняя часть
|
1
2
3
4
5
|
$(':input','#formMain') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); |
отвечает за то, чтобы после нажатия на кнопку отправки поля сватали пустыми. Также он может очистить checbox и радиокнопки, если Вы добавите их к данной форме. Если Вам это не нужно, можете просто удалить его.
3.Добавляем html
В нужном месте вставляем код с формой приведенный ниже
|
1
2
3
4
5
6
7
8
|
<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
Далее вставить в него следующий код, отвечающий за обработку
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?phpif($_POST) { $to = "почта@gmail.com"; //куда отправлять письмо $from = 'Заказ Монопод'; // от кого $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: <почта@gmail.com>\r\n"; $result = mail($to, $subject, $message, $headers); if ($result){ echo "<p>Сообщение успешно отправлено. Скоро Вам перезвонят</p>"; } }?> |
В 4 и в 11 нужно указать почту, на которую будут отправлены данные с формы. В 6 строке $message начинается все содержание письма.так что если добавите новые поля адреса и почты и тд, то их как раз нужно дописать тут по примеру уже имеющихся Имени и Телефона.
В 15 строке – как раз прописано то сообщение, которое выведется в div id=messegeResult с предыдущего пункта. Так что можете его изменить под себя.
Источник: http://gnatkovsky.com.ua/
Добрый день, спасибо за статью, всё работает, вот только на почту приходит имя без номера телефона заказчика, и остаётся надпись “Сообщение успешно отправлено. Скоро Вам перезвонят” на пустой странице, как сделать чтобы через секунду- две возвращалась обратно на главную и что нужно сделать чтобы номер тоже отображался.
Заранее благодарю.