Уроки Форма обратной связи Ajax
6 марта 2016
4782
форма обратной связи Ajax, форма обратной связи с телефоном

Форма обратной связи Ajax

Сложность Рубрика Ajax Браузеры
Демонстрация » Скачать »

Специально для Вас, подготовил одну из тем, которая в разработке сайтов встречается чаще всего и практически нет таких проектов, которые ее не используют. Сегодня мы поговорим с Вами о форме обратной связи на ajax. Я не буду рассматривать множество полей для нашего с Вами примера, хватит думаю и двух - имени и телефона. Если Вам потребуется больше полей, то стоит их только дописать и применить к ним валидацию. Но если Вы не знаете, как это сделать, можете обращаться ко мне, я помогу. 

 

 

Подробно я все расписывать не буду, так как этот урок имеет еще и видео формат, поэтому рассмотрим только ключевые моменты, которые в обязательном порядке нужны для нормальной работы скрипта.

Принцип формы обратной связи на ajax таков: при нажатии на кнопку отправить, если поля не заполнены, выдаются две ошибки - Введите имя! и Введите телефон! Если заполнены оба поля, имя и телефон, но телефон заполнен не верно, к примеру присутствуют буквы, а не цифры, то выдается сообщение - Номер телефона введен не корректно! Если же все заполнено верно, то на почту отправляется письмо - Спасибо. Мы перезвоним Вам через 2 минуты!

 

Форма обратной связи на Ajax

 

Первый шаг. Подключение файлов. HTML. Файл index.php.

 

Сначала мы должны подключить библиотеку jQuery, затем скрипт order.js и после стили demo.css.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/order.js"></script>
<link type="text/css" rel="stylesheet" href="css/demo.css"> 

 

Теперь переходим к HTML коду. Всего как я уже говорил два поля - имя, телефон и кнопка отправить. Данная форма по идентификатору order переходит методом Ajax к скрипту order.js. В идентификатор dataresult, мы передаем ошибки и различные сообщения. В идентификатор datasql, мы передаем успешную отправку.

 

<div id="dataresult"></div>
<div id="datasql">
	<form id="order">
		<input type="text" name="name" placeholder="Роман">
		<input type="text" name="phone" placeholder="89175236667">
		<input type="submit" value="Отправить">
	</form>
</div>

 

Второй шаг. JQuery. Файл order.js.

 

Переходим ко второму шагу и тут мы должны с Вами разобрать js код, который принимает ответ от формы HTML, и передает файлу order.php, которую в свою очередь обрабатывает и отдает ответ обратно. Заметим, что файл order.js, лежит в папке js/. Думаю комментировать, что то тут излишне, так как обычный ajax.

 

jQuery(document).ready(function($) {
	$("#order").submit(function() {
		var order = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "./order.php",
			data: order,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="answer">Спасибо. Мы перезвоним Вам через 2 минуты!</div>';
				$("#datasql").hide();
				} else {
					result = msg;
				}	
				$('#dataresult').html(result);
			}
		});
	return false;
	});
});

 

Третий шаг. PHP. Обработчик файл order.php.

 

Переходим к нашему обработчику, который принимает и отдает обратно полученные поля. При правильной валидации, он соответственно, отправляет письмо на почту. Добиться такого не очень сложно, поэтому сразу рассмотрим. 

 

Для начала нам нужно принять полученные данные методом POST и сделать проверку на переменную.

 

$post = (!empty($_POST)) ? true : false;

 

После чего поставим условие, если оно пройдено успешно, то переходим к телу обработчика скрипта.

 

if($post)
{

}

 

Обрабатываем полученные поля имя и телефон на спец символы, а также создаем переменную с пустым полем.

 

$name = htmlspecialchars($_POST['name']);
$phone = htmlspecialchars($_POST["phone"]);
$error = '';

 

После чего выполняем различные условия на валидацию имени и телефона.

if(!$name)
{
$error .= 'Введите имя!<br>';
}

function Phone($PhoneCheck)
{
$reg = "/^[0-9]{7,11}$/";
if($PhoneCheck == "") {
return false;
} 
else {
$string = preg_replace($reg, "", $PhoneCheck);
}
return empty($string) ? true : false;
}

if(!$phone)
{
$error .= "Введите телефон!<br>";
}

if($phone && !Phone($phone))
{
$error .= "Номер телефона введен не корректно!<br>";
}

 

Далее, если валидация пройдена успешно, то отправляем письмо на почту.

 

if(!$error)
{
$subject ="Новая заявка";
$email ='info@roothelp.ru';	
$message = '<strong>Имя:</strong> '.$name.'<br><strong>Телефон:</strong>'.$phone;
$mail = mail($email, $subject, $message, "From: RootHelp.ru <$email>\nReply-To: $email\nContent-type: text/html; Charset=utf-8\r\nContent-Transfer-Encoding: 8bit","-f $email");

if($mail)
{
echo"OK";
}

}

 

Если валидация не прошла проверку, то выводим ошибки.

 

else
{
echo '<div class="answer">'.$error.'</div>';
}

 

Как видим, все банально просто. Ничего лишнего и все по делу!

 

Четвертый шаг. Стили CSS. Файл demo.css.

 

Нечего мне тут Вам особенного рассказывать, как просто, скопировать код с редактора и вставить его сюда. Думаю сами прекрасно все поймете.

 

input[type="submit"]{
    padding: 7px 22px;
    color: #ffffff;
    background: #00a23d;
	cursor: pointer;
}

input[type="submit"]:hover{
    background: #FF3A65;
    color: #fff;
}
		
input[type="text"]{
	width: 200px;
	padding: 8px 12px;
	background: #efefef;
	color: #000000;
}
		
.answer
{
margin: 20px 0;
}

 

Благодарю всех за внимание, спасибо что нас поддерживаете! Удачи всем в реализации своих проектов! Девушек с наступающим 8 марта!)





Роман Краутер