email

Подписаться на эту метку по RSS

Форма обратной связи для сайта: PHP-обработчик + Ajax + Валидация

Рубрика: Скрипты на сайт;
Метки: |
Форма обратной связи для сайта: 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 (ссылка ведет на страницу загрузки).

Ребята, решил что не буду публиковать код формы обратной связи. Какой смысл в этом, если есть ссылка на оригинал автора??

Видео 3. Валидация - проверка формы на правильность заполнения.