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
|
<?php if ( $_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/
Добрый день, спасибо за статью, всё работает, вот только на почту приходит имя без номера телефона заказчика, и остаётся надпись “Сообщение успешно отправлено. Скоро Вам перезвонят” на пустой странице, как сделать чтобы через секунду- две возвращалась обратно на главную и что нужно сделать чтобы номер тоже отображался.
Заранее благодарю.