Контакты
Адрес: г. Ростов-на-Дону, Ворошиловский район, ул. Орбитальная 88/2.
Телефон: +7 (908) 172-0007
Email: s@trustcode.ru
Skype: trustcode.ru
Наша группа Вконтакте - vk.com/trustcodes

Политика конфиденциальности
Ваши персональные данные, в частности номер телефона и электронный почтовый адрес будут использоваться только в целях ответа на ваши вопросы и передачи коммерческих предложений по услугам компании «TRUST CODE». Просим обратить внимание, что мы не передаем данные 3м лицам.
Обратная связь




HC

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

Сегодня мы разработаем форму обратной связи для сайта которая будет работать без перезагрузки страницы.

Первым делом подключаем Jquery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Далее устанавливаем стандартную HTML форму:
<form name="MyForm" action="" id="callbacks" method="post"><!--Атрибут action остается пустым-->
	<input name="name" type="text" placeholder="Имя" /><br>
	<input name="tel" type="phone" placeholder="Телефон" /><br>
	<input name="email" type="email" placeholder="Email" /><br>
	<textarea name="body"  placeholder="Ваше сообщение"></textarea><br>
	<input type="submit" value="Отправить заявку" id="btncontcall" />
</form>

<div id="erconts"></div><!--В этом блоке будет выводится информация от обработчика-->
Под форму ставим JS код который будет служить мостом между формой и обработчиком:
<script>
$(document).ready(function() {
$("#btncontcall").click(function(){ 
     $.ajax({
        type: "POST",
        url:"send.php", // Адрес обработчика
        data:$("#callbacks").serialize(),
        error:function(){$("#erconts").html("Произошла ошибка!");},
		beforeSend: function() {
            $("#erconts").html("Отправляем данные...");
        },
		success: function(result){
			$("#erconts").html(result);
			checkThis();
		}
    });
    return false;
});
});
</script>
Теперь рассмотрим код обработчика который необходимо разместить в файл send.php
if (isset($_POST["email"])){
if (isset($_POST["name"])) {$name = $_POST["name"];}
if (isset($_POST["email"])) {$email = $_POST["email"];}
if (isset($_POST["tel"])) {$tel = $_POST["tel"];}
if (isset($_POST["body"])) {$body = $_POST["body"];}

if($name=="" or $email=="" or $tel=="" or $body==""){ // Проверяем на заполненность всех полей.
	echo "Заполните все поля";
}else{
	$ip=$_SERVER["REMOTE_ADDR"]; // Вычисляем ip пользователя
	$brose=$_SERVER["HTTP_USER_AGENT"]; // Вычисляем браузер пользователя
$to = "email"; // Ваш email адрес
$subject = "Сообщение c сайта"; // тема письма 
$headers .= "Content-Type: text/html; charset=UTF-8
";
$headers .= "From: Создание сайтов Trust Code"; // Отправитель письма
$message = "
Имя: $name<br>
E-mail: $email<br>
Телефон: $tel<br>
Текст: $body<br><br>

--------------------------------------------------------<br>
---------------IP отправителя: $ip<br>
---------------Браузер отправителя: $brose<br>
"; 
$send = mail($to, $subject, $message, $headers);


 if ($send == "true")
 {
 echo "Ваше сообщение отправлено. Мы ответим вам в ближайшее время.";
 }
 else
 {
 echo "Не удалось отправить, попробуйте снова!";
 }
}
}
Вот и все! Наша форма готова. Тестируйте и оставляйте свои комментарии.
Исходник
Автор: Иван Цынтару
06.03.16, 13:22

0

7
4704
Комментарии:
Добавить комментарий
Нам очень важно ваше мнение.
8

  • Viktor. Cern
    28 Мая 2017, 01:38
    Спасибо за форму! Но у меня вопрос, как добавить ещё одно поле, к примеру ВАШ САЙТ?

    0

    Ответить
    • Иван Цынтару
      Viktor. Cern
      02 Июня 2017, 12:18
      (Админ)
      В форму просто добавляете input
      Далее в обработчике принимаете данные поля, присваиваете их переменной и отправляете в письме. В общем аналогично с остальными полями)

      0

      Ответить
  • nago bod
    08 Июня 2017, 03:34
    пишет произошла ошибка

    0

    Ответить
    • nago bod
      nago bod
      08 Июня 2017, 03:46
      все уже решил, не надо

      0

      Ответить
  • Владимир Кельин
    11 Октября 2017, 11:45
    Не могу разобраться. Не работает и все. Вчера добавил на сайт простую форму, которая загружает новую страницу, но это не вариант. Сегодня попробовал эти скрипты, выдавал ошибку. Все перепроверил, косяков не заметил, почему ошибка - ХЗ! Начал искать другие варианты, но ничего не работало. Решил, что, возможно, дело в jquerry... Точнее, в ее версии. (На сайте используется 2.1.4 редакция jquerry). Сейчас просто скачал из источника файлы и залил на хостинг (естественно указал свой почтовый ящик в php), можно успеть разглядеть надпись, что "данные отправляются". Но ничего на почту не приходит... ПАМАГИТИ!!! :-(

    0

    Ответить
    • Владимир Кельин
      Владимир Кельин
      12 Октября 2017, 00:43
      В общем, скачанная форма заработала... Не знаю почему, но на почту *@mail.ru не захотел отправлять письма, а на *@yandex.ru приходит без проблем. Причем, что предыдущий мой скрипт (который переправлял отправителя на новую страницу) и на mail.ru тоже отправлял нормально. Мистика. Буду пробовать запихать все обратно на сайт и пробовать альтернативный ящик.

      0

      Ответить
    • Владимир Кельин
      Владимир Кельин
      12 Октября 2017, 07:31
      И с mail.ru удалось разобраться. Дело было в кодировке. Создал отдельный php файл с кодировкой UTF-8 без BOM, засунул туда данный скрипт и mail.ru начал принимать письма.

      0

      Ответить
    • Владимир Кельин
      Владимир Кельин
      12 Октября 2017, 07:34
      Большая благодарность автору за компактный скрипт! Еще было бы хорошо сообразить, чтобы оповещение об отправке (или ошибке) выдавалось не просто текстом, а чем-то типа ярлычка, который вылезает на несколько секунд откуда-нибудь сбоку/сверх/снизу и прячется. Буду сейчас думать, как это можно дошаманить:)

      0

      Ответить
  • Пожалуйста, авторизуйтесь или войдите через соц.сети
Добавить комментарий