Форма обратной связи для сайта: 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: drugoisvet@gmail.com
' .
                'X-Mailer: PHP/' . phpversion();
         
    $theme = "Новое сообщение с сайта";             
             
    $letter = "Данные сообщения:";
    $letter .="
";
    $letter .="Имя: ".$_POST['name'];
    $letter .="
Email: ".$_POST['email'];
    $letter .="
Телефон: ".$_POST['phone'];
    $letter .="
Сообщение: ".$_POST['message'];
    
    if (mail("drugoisvet@gmail.com", $theme, $letter, $headers)){
      header("Location: /testform/thankyou.php");
    } else {
      header("Location: /testform");
    }  
              
} else {
  header("Location: /testform");
}

Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.

Видео 2. Ajax - отправка письма без перезагрузки страницы.

Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).

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

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

Комментариев: 11 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 11
  •  azarovs@tut.by | 16 декабря 2016 в 11:45:41

    Как сделать чтобы отправляло два письма - тому, кто пишет (он вводит свой мейл) и администратору системы (магазина). Еще добавление файлов к форме отправки

    •  Кротов Роман | 16 декабря 2016 в 13:03:56

      mail("drugoisvet@gmail.com, admin@krotovroman.ru", $theme ...

  •  Олег | 17 декабря 2016 в 11:04:10

    Здравствуйте, Сергей и Роман!

    Спасибо за Ваши уроки!

    Но ... - большая просьба: покажите как поставить капчу и как пристегнуть картинку, видео ??

    Причем так, чтобы они не просто попадали на сервер, а на необходимы почтовый адрес??!!

    Спасибо!

    С ув. Олег.

  •  Вадим74 | 18 декабря 2016 в 11:36:17

    Спасибо за урок. Ждем новых уроков. Просмотрел урок бегло. Так как не закончил ещё изучение "верстаем на 5 с плюсом". Урок впринципе понятен. Так как сам программирую на языке мкл5. Тема Ваша интересна. После изучения буду изучать Ваш курс "Видеокурс «Мастер PHP»".

  •  Кирилл | 22 декабря 2016 в 09:04:11

    Посмотрел уроки, возникло пару вопросов:

    1. Зачем назначать документу расширение .php, если там чистый html?

    2. Почему нет закрытия кода в файле submit.php?

    •  Кротов Роман | 22 декабря 2016 в 10:04:41

      Здравствуйте Кирилл. Спасибо за вопросы!

      1. Урок по PHP а не по HTML и я заранее на будущее сразу создаю PHP файл, потому что в следующих уроках это пригодится. Но в данном конкретном случае, действительно, Вы можете делать форму в HTML файле, потому что php код в нем не используется.

      2. Тега закрытия в конце файла submit.php нет, потому что он не требуется там. Там чистый PHP без примеси HTML. Если комбинировать в файле HTML код со вставками PHP, то PHP теги надо закрывать. Если будете дальше смотреть мои уроки по этой теме, возможно, увидите такие примеры.

      С уважением, Кротов Роман.

  •  Александра | 28 декабря 2016 в 13:09:19

    Здравствуйте! Как сделать, чтобы сообщение об отравке исчезало через несколько секунд?

  •  Светлана | 30 декабря 2016 в 02:05:57

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

    •  Кротов Роман | 30 декабря 2016 в 08:26:34

      Сделайте все точно так же как в видеоуроке и всё получится.

      В крайнем случае создайте тему на моем форуме: https://support.krotovroman.ru/

      И со скриншотами покажите по порядку что вы делали и какие ошибки появляются.