Вы здесь
Главная > Мой блог > WEB-разработка > Форма отправки письма (данных) без перезагрузки страницы

Форма отправки письма (данных) без перезагрузки страницы

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/

One thought on “Форма отправки письма (данных) без перезагрузки страницы

  1. Добрый день, спасибо за статью, всё работает, вот только на почту приходит имя без номера телефона заказчика, и остаётся надпись “Сообщение успешно отправлено. Скоро Вам перезвонят” на пустой странице, как сделать чтобы через секунду- две возвращалась обратно на главную и что нужно сделать чтобы номер тоже отображался.
    Заранее благодарю.

Добавить комментарий

Top