Форма обратной связи для сайта: 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 (ссылка ведет на страницу загрузки).
Ребята, решил что не буду публиковать код формы обратной связи. Какой смысл в этом, если есть ссылка на оригинал автора??
Как сделать чтобы отправляло два письма - тому, кто пишет (он вводит свой мейл) и администратору системы (магазина). Еще добавление файлов к форме отправки
mail("[email protected], [email protected]", $theme ...
Здравствуйте, Сергей и Роман!
Спасибо за Ваши уроки!
Но ... - большая просьба: покажите как поставить капчу и как пристегнуть картинку, видео ??
Причем так, чтобы они не просто попадали на сервер, а на необходимы почтовый адрес??!!
Спасибо!
С ув. Олег.
По вложению файлов и капче - надо отдельное видео записывать.
Роман ждем уроков по капче. Вообще было бы круто если бы Вы полностью закрыли вопрос обратной связи. В интернете встречаются уроки кусочками. Вот например, надо вставить капчу, кому то надо прикрепить файл для отправки, или добавить выпадающий список и чекбоксы и т.д. Как сделать красивое всплывающее сообщение на аяксе "Отправлено".
Тут получается полный курс. В интернете толковой информации по всем вопросам в одном курсе не видел. Приходится все собирать крупицами. Было бы здорово полностью всесторонне рассмотреть вопрос формы обратной связи.
Есть полный курс у меня Мастер PHP PRO.
Напишите мне в личку, я скину: https://vk.me/krotovromanpublic
Спасибо за урок. Ждем новых уроков. Просмотрел урок бегло. Так как не закончил ещё изучение "верстаем на 5 с плюсом". Урок впринципе понятен. Так как сам программирую на языке мкл5. Тема Ваша интересна. После изучения буду изучать Ваш курс "Видеокурс «Мастер PHP»".
Хорошо. Всегда рад видеть!
Посмотрел уроки, возникло пару вопросов:
1. Зачем назначать документу расширение .php, если там чистый html?
2. Почему нет закрытия кода в файле submit.php?
Здравствуйте Кирилл. Спасибо за вопросы!
1. Урок по PHP а не по HTML и я заранее на будущее сразу создаю PHP файл, потому что в следующих уроках это пригодится. Но в данном конкретном случае, действительно, Вы можете делать форму в HTML файле, потому что php код в нем не используется.
2. Тега закрытия в конце файла submit.php нет, потому что он не требуется там. Там чистый PHP без примеси HTML. Если комбинировать в файле HTML код со вставками PHP, то PHP теги надо закрывать. Если будете дальше смотреть мои уроки по этой теме, возможно, увидите такие примеры.
С уважением, Кротов Роман.
Здравствуйте! Как сделать, чтобы сообщение об отравке исчезало через несколько секунд?
Добрый день. Прошу простить, но скачала форму , установила на локальный сервер. И ничего не работает. помогите разобраться почему. пожалуйста
Сделайте все точно так же как в видеоуроке и всё получится.
В крайнем случае создайте тему на моем форуме: https://support.krotovroman.ru/
И со скриншотами покажите по порядку что вы делали и какие ошибки появляются.
Добрый день. Установил форму на сайт и в консоли появилась ошибка Uncaught TypeError: $.validate is not a function Подскажите, с чем она связана и как ее устранить?
jQuery 1.11.0
Разобрался. Нужно добавлять скрипты именно в таком порядке
Ошибка исчезла, но форма все равно не реагирует. Не проверяет заполнение поля и не отправляет.
Добрый день!
Помогите исправить обработчик в форме обратной связи. К сожалению сам с РНР, мягко говоря, на Вы.
А проблема в следующем.
У нас только один почтовый ящик и в его настройках, на сервере хостинга, указана переадресация на почту Яндекса на [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:".
Доброго времени суток. У меня проблема со скриптом. установил полностью скаченный скрипт на локальный сервер всё сработало. установил на сервер где расположен сайт выдаёт "ошибка при отправке сообщения", при этом я для проверки создал отдельную директорию и ничего не менял кроме e-mail адреса. дал права всем файлам 777. но всё тщетно. в чём может быть проблема?
1. При открытии письма не работают переносы строк. Вся информация идет в одну строку https://joxi.ru/xAeNPoLup7K3vr. Как можно исправить такое.
2. Очень актуальный вопрос по созданию нескольких обратных форм на одной странице. Скажем, есть лендинг и на него необходимо разместить три формы обратной связи. Также следует отслеживать нажатия на кнопку по каждой форме. То есть им присваивается личный идентификатор.
Вы прекрасно показали и рассказали, как сделать одну форму на странице. А если надо несколько, тогда что получается необходимо делать несколько index.php и submit.php. что ли дублировать форму несколько раз в корне сайта. Или есть возможность как-то объединить эти формы в одном файле?
Большая просьба помочь в этом вопросе.
Спасибо!
Подскажите как сделать чтобы на почту приходило название объекта которому направляется письмо, чтобы я тоже мог видеть кому именно пришло письмо.
Суть в том, что на сайте много страниц и на каждой свой адрес получателя+моя почта. Так вот когда мне приходит копия письма я не знаю кому был отправлен оригинал. Чтобы файл с PHP был один.
Подскажите как прописать путь от js к submit.php если они находятся в разных папках на сервере?
Заранее спасибо.
Здравствуйте! Спасибо за Ваш урок! Все получилось, но не могу сообразить только одно.
Есть форма и при нажатии на кнопку выполняется скрипт 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), как у Вас?
Доброго времени суток. Урок очень полезный и я такую форму с доработками установил на свой сайт. Сейчас столкнулся с такой проблемой. На странице где форма обратной связи я сделал еще одну форму для добавления комментариев с использованием бд. Проблема в выводе результата PHP проверки, так как он выводится в блок div class='result' одновременно на двух формах. Подскажите как их разделить.
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 такая ошибка