Форма обратной связи для сайта: 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. Валидация - проверка формы на правильность заполнения.

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

Оставьте комментарий!

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

Комментариев: 23
  •  [email protected] | 16 декабря 2016 в 11:45:41

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

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

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

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

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

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

    Спасибо!

    С ув. Олег.

    •  Кротов Роман | 20 декабря 2016 в 05:07:07

      По вложению файлов и капче - надо отдельное видео записывать.

      •  Василий | 4 мая 2017 в 00:06:11

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

        Тут получается полный курс. В интернете толковой информации по всем вопросам в одном курсе не видел. Приходится все собирать крупицами. Было бы здорово полностью всесторонне рассмотреть вопрос формы обратной связи.

        •  Кротов Роман | 4 мая 2017 в 03:39:44

          Есть полный курс у меня Мастер PHP PRO.

          Напишите мне в личку, я скину: https://vk.me/krotovromanpublic

  •  Вадим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/

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

  •  Захар | 21 марта 2017 в 12:04:29

    Добрый день. Установил форму на сайт и в консоли появилась ошибка Uncaught TypeError: $.validate is not a function Подскажите, с чем она связана и как ее устранить?

    jQuery 1.11.0

    •  Захар | 21 марта 2017 в 12:34:53

      Разобрался. Нужно добавлять скрипты именно в таком порядке

      Ошибка исчезла, но форма все равно не реагирует. Не проверяет заполнение поля и не отправляет.

  •  Вадим | 20 апреля 2017 в 11:22:44

    Добрый день!

    Помогите исправить обработчик в форме обратной связи. К сожалению сам с РНР, мягко говоря, на Вы.

    А проблема в следующем.

    У нас только один почтовый ящик и в его настройках, на сервере хостинга, указана переадресация на почту Яндекса на [email protected].

    Но пересылается на Яндекс только примерно половина писем, остальные нет. Т.е. я ВСЕ входящие письма вижу в ящике на хостинге, а на почте Яндекса - только половину.

    В службе поддержки хоста написали (вкратце):

    ВСЕ письма поставлены в очередь почтовой службы Яндекс, однако по части из них получены отказы в доставке, поскольку форма обратной связи сайта установила в письме в качестве заголовка отправителя email посетителя сайта, например ниже "[email protected]", "[email protected]", или пустое.

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

    Рекомендуем пересмотреть исходный код формы обратной связи и изменить его таким образом, чтобы электронный адрес посетителя сайта добавлялся, например, в заголовок "Reply-to:".

    Вот часть кода обработчика на РНР:

    $mail_addr = array ("[email protected]"); // сюда необходимо подставить СУЩЕСТВУЮЩИЙ на сервере email, с него будет рассылка

    // $key = "Subject";

    if((!isset($p["Subject"])) || ($p["Subject"] == ''))

    {

    #header ("Location: sm_success.htm");

    header ("Location: sm_failed.htm");

    exit();

    }

    $mail_subj = "Вопрос к Фанат Гусятник - ".$p["Subject"];

    $sender_mail = array ("E_mail" => "E-mail");

    foreach ($sender_mail as $key => $item)

    {

    if (isset($p[$key]) && chop($p[$key]))

    $send_mail.=$p[$key];

    }

    $mail_head = "From: "."\n";

    $mail_head .= "Content-Type: multipart/mixed; boundary="".$mail_bond."""."\n";

    $mail_body = "--".$mail_bond."\n"."Content-Type: text/plain; charset=Windows-1251"."\n";

    $mail_body .= "Content-Transfer-Encoding: 8bit"."\n\n";

    $mail_body .= '== Новое письмо с сайта Фанат-Гусятник =='."\n";

    $mail_body .= ' '."\n";

    Подскажите пожалуйста куда и что прописать в "Reply-to:".

  •  Владислав | 25 апреля 2017 в 14:58:55

    Доброго времени суток. У меня проблема со скриптом. установил полностью скаченный скрипт на локальный сервер всё сработало. установил на сервер где расположен сайт выдаёт "ошибка при отправке сообщения", при этом я для проверки создал отдельную директорию и ничего не менял кроме e-mail адреса. дал права всем файлам 777. но всё тщетно. в чём может быть проблема?

  •  Василий | 3 мая 2017 в 23:59:49

    1. При открытии письма не работают переносы строк. Вся информация идет в одну строку https://joxi.ru/xAeNPoLup7K3vr. Как можно исправить такое.

    2. Очень актуальный вопрос по созданию нескольких обратных форм на одной странице. Скажем, есть лендинг и на него необходимо разместить три формы обратной связи. Также следует отслеживать нажатия на кнопку по каждой форме. То есть им присваивается личный идентификатор.

    Вы прекрасно показали и рассказали, как сделать одну форму на странице. А если надо несколько, тогда что получается необходимо делать несколько index.php и submit.php. что ли дублировать форму несколько раз в корне сайта. Или есть возможность как-то объединить эти формы в одном файле?

    Большая просьба помочь в этом вопросе.

    Спасибо!

  •  Виталий | 3 июня 2017 в 14:15:28

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

    Суть в том, что на сайте много страниц и на каждой свой адрес получателя+моя почта. Так вот когда мне приходит копия письма я не знаю кому был отправлен оригинал. Чтобы файл с PHP был один.

  •  Виталий | 5 июня 2017 в 16:34:27

    Подскажите как прописать путь от js к submit.php если они находятся в разных папках на сервере?

    Заранее спасибо.

  •  Игорь | 15 марта 2018 в 21:28:20

    Здравствуйте! Спасибо за Ваш урок! Все получилось, но не могу сообразить только одно.

    Есть форма и при нажатии на кнопку выполняется скрипт JS:

    var vz = "f";// это так для примера

    // само исполнение при нажатии на кнопку

    $('[type="button"]').click(function() {

    $(this).val("Отправляется...." ); // Перед отправкой меняем название кнопки. Это работает

    $.post( // три параметра метода Post

    "submit.php", // 1-ый параметр - путь до файла submit.php

    { //2-ой параметр - переменные которые отправляются на файл submit.php берутся с формы

    name1: $('[name="name"]').val(),

    phone1: $('[name="phone"]').val()

    },

    //3-ой параметр -

    function (vozvrat) { //вызывается после отправки данных

    $( ".result" ).html(vozvrat);

    // Как написать код , я думаю что здесь, что бы результат передавался в переменную

    // в переменную vz и далее название кнопки изменилось .... ???

    }

    );

    $(this).val(vz) ; // Текст кнопки

    });

    Вопрос в следующем.Как из функции function (vozvrat) результат присвоить переменной VZ , что бы на кнопке отображались соответствующие надписи из файла submit.php ( видеоурок 2), как у Вас?

  •  Виталий | 20 марта 2018 в 12:52:32

    Доброго времени суток. Урок очень полезный и я такую форму с доработками установил на свой сайт. Сейчас столкнулся с такой проблемой. На странице где форма обратной связи я сделал еще одну форму для добавления комментариев с использованием бд. Проблема в выводе результата PHP проверки, так как он выводится в блок div class='result' одновременно на двух формах. Подскажите как их разделить.

  •  Павел | 6 июля 2018 в 13:48:20

    Warning: mail(): Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in D:\xampp\htdocs\testform\submit.php on line 17

    Я свою почту указал. На локальном сервере xampp такая ошибка