Форма обратной связи для сайта: PHP-обработчик + Ajax + Валидация
Привет ребята. На связи Серёга. Знаю, что давно не писал - дела, дела... Да и сейчас, если честно, времени совсем нету. И форму будем делать не по моему уроку, а по урокам моего знакомого - Кротова Романа.
Создавать форму обратной связи для сайта мы будем последовательно. Поэтому эта статья будет разбита на 3 урока.
В первом видео - мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.
Во второй части Рома, покажет Вам как сделать Ajax-загрузку. То есть отправлять данные с формы без перезагрузки странички. Что, согласитесь, весьма удобно и современно.
Ну и в третьей (урок готовится - позже здесь будет ссылка), мы встроим проверку на валидацию. Не средствами браузера, а при помощи специальных скриптов.
Видео 1. Создание формы обратной связи для сайта.
Обращаю внимание! Что бы форма заработала - необходимо, что бы ваш хостинг поддерживал PHP.
Если у вас возникнут вопросы касательно непонятных моментов в написании обработчика формы для отправки писем - не стесняйтесь, задавайте их в комментариях.
Код из урока по созданию формы обратной связи
Вот что получилось в итоге в файле index.php
Напоминаю, что в нём содержится простенькая форма обратной связи. Без оформления и прочих прибамбасов. Что бы не нагружать Вас лишней информацией.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<form action="/testform/submit.php" method="POST">
<input name="email" placeholder="Email">
<input name="name" placeholder="Имя">
<input name="phone" placeholder="Телефон">
<textarea name="message" placeholder="Сообщение"></textarea>
<input type="submit" value="Отправить сообщение">
</form>
</body>
</html>
Содержимое файла submit.php:
Здесь осуществляется базовая проверка формы на заполненность, что бы не отправлять пустые сообщения. Если всё "гуд" - письмо отправляется. И идёт переадресация на страницу-уведомление об успешном отправлении письма.
if (!empty($_POST['name']) AND !empty($_POST['email']) AND !empty($_POST['message']))
{
$headers = 'From: Кротов Роман
' .
'Reply-To: [email protected]
' .
'X-Mailer: PHP/' . phpversion();
$theme = "Новое сообщение с сайта";
$letter = "Данные сообщения:";
$letter .="
";
$letter .="Имя: ".$_POST['name'];
$letter .="
Email: ".$_POST['email'];
$letter .="
Телефон: ".$_POST['phone'];
$letter .="
Сообщение: ".$_POST['message'];
if (mail("[email protected]", $theme, $letter, $headers)){
header("Location: /testform/thankyou.php");
} else {
header("Location: /testform");
}
} else {
header("Location: /testform");
}
Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.
Видео 2. Ajax - отправка письма без перезагрузки страницы.
Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).
Ребята, решил что не буду публиковать код формы обратной связи. Какой смысл в этом, если есть ссылка на оригинал автора??