Введение
Недавно я уже писал про форму обратной связи на php, но немного подумав, я решил ее немного модернизировать. Сейчас очень много где используется технология ajax, которая позволяет отправлять запросы на сервер без перезагрузки страницы. Давайте тоже не будем отставать от прогресса и сделаем отправку данных с нашей формы обратной связи средствами ajax.
Алгоритм действий будет не на много отличаться от обычной формы. Для начала сверстаем формочку, после чего напишем серверный скрипт и после этого добавим js скрипт, который свяжет клиентскую и серверную части. Работать с ajax будем с помощью библиотеки jQuery, поэтому не забудьте ее подключить.
Простая форма обратной связи на php и ajax. Код
Поскольку в этом примере формы обратной связи мы сделаем четкое разделение на серверную и клиентскую часть, нам потребуется два файла.
В первом будет храниться верстка и js:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Обратная связь. Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#btn_submit').click(function(){
// собираем данные с формы
var user_name = $('#user_name').val();
var user_email = $('#user_email').val();
var text_comment = $('#text_comment').val();
// отправляем данные
$.ajax({
url: "action.php", // куда отправляем
type: "post", // метод передачи
dataType: "json", // тип передачи данных
data: { // что отправляем
"user_name": user_name,
"user_email": user_email,
"text_comment": text_comment
},
// после получения ответа сервера
success: function(data){
$('.messages').html(data.result); // выводим ответ сервера
}
});
});
});
</script>
</head>
<body>
<br/>
<div class="messages"></div>
<br/>
<label>Ваше имя:</label><br/>
<input type="text" id="user_name" value="" /><br/>
<label>Ваш e-mail:</label><br/>
<input type="text" id="user_email" value="" /><br/>
<label>Текст сообщения:</label><br/>
<textarea id="text_comment"></textarea>
<br/>
<input type="button" value="Отправить" id="btn_submit" />
</body>
</html>
И второй файл, в котором будет находиться серверная логика, написанная на php:
<?php
$msg_box = ""; // в этой переменной будем хранить сообщения формы
$errors = array(); // контейнер для ошибок
// проверяем корректность полей
if($_POST['user_name'] == "") $errors[] = "Поле 'Ваше имя' не заполнено!";
if($_POST['user_email'] == "") $errors[] = "Поле 'Ваш e-mail' не заполнено!";
if($_POST['text_comment'] == "") $errors[] = "Поле 'Текст сообщения' не заполнено!";
// если форма без ошибок
if(empty($errors)){
// собираем данные из формы
$message = "Имя пользователя: " . $_POST['user_name'] . "<br/>";
$message .= "E-mail пользователя: " . $_POST['user_email'] . "<br/>";
$message .= "Текст письма: " . $_POST['text_comment'];
send_mail($message); // отправим письмо
// выведем сообщение об успехе
$msg_box = "<span style='color: green;'>Сообщение успешно отправлено!</span>";
}else{
// если были ошибки, то выводим их
$msg_box = "";
foreach($errors as $one_error){
$msg_box .= "<span style='color: red;'>$one_error</span><br/>";
}
}
// делаем ответ на клиентскую часть в формате JSON
echo json_encode(array(
'result' => $msg_box
));
// функция отправки письма
function send_mail($message){
// почта, на которую придет письмо
$mail_to = "my@mail.ru";
// тема письма
$subject = "Письмо с обратной связи";
// заголовок письма
$headers= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
$headers .= "From: Тестовое письмо <no-reply@test.com>\r\n"; // от кого письмо
// отправляем письмо
mail($mail_to, $subject, $message, $headers);
}
?>
Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники — вот они.
(12 оценок, среднее: 4,42 из 5)
пишет что сообщение отправлено а во входящих его нет
Сообщение лежит на локальном сервере! В папке \userdata\tmp\email!
Там в файле txt откроешь будет отображаться вводимая информация!
Олег, да у меня тоже так же. Проверил несколько раз. Думал что что-то упустил но как вижу не у меня одного проблема.
Еще можно настроить отправку и на локальном сервере! Для этого нужно например в OpenServer зайти в настройки и настроить почту через удаленный SMTP сервер использовав свой аккаунт и настройки SMTP твоей почты!
То что надо. Просто и понятно. Спасибо)
Спасибо за форму!
Если сей код на сервер залить, то форма обратной связи заработает? Будут ли приходить мне на ящик уведомления?
Дурацкие комментарии. Хрен введешь. Уже пятая попытка. Идиотский код безопасности. Как меня это злит. Поставь дискус — не парь мозг.
А теперь — по делу.
Если я залью на хостинг сей код, то он письма будет мне слать на ящик?
Спасибо, все работает. меняем мыло в коде на свое. и не паримся.!
// почта, на которую придет письмо
$mail_to = «lu***@ya.ru»;
Добрый день! А как к этой форме подключить google recaptcha?
Спасибо, форму выложил на хостинг и все, сложно было найти удобную работающую форму.
П.с.было бы круто, если добавить еще проверку на валидность телефона
Здравствуйте!Все норм работает,но как в эту форму добавить возможность прикрепления файла к письму? Чтобы на почту приходил еще прикрепленный файл.
Заранее спасибо.
$.ajax({
type: «POST»,
url: «/news/insert»,
data: formData,
contentType: false,
processData: false, и тд.
$uploaddir = ‘assets/uploads/img/’;
if ($posImage != » && $error == ‘no’) {
foreach ($_FILES as $f) {
$uploadfile = $uploaddir . basename($f[‘name’]);
// Копируем файл из каталога для временного хранения файлов:
if (copy($_FILES[‘files’][‘tmp_name’], $uploadfile)) {
$log .= «Файл успешно загружен на сервер«;
} else {
$log .= «Ошибка! Не удалось загрузить файл на сервер!«;
}
}
}
Прикол но все робит на локальном
пасиб будем посмотреть на реал/хосте
Всё работает, не плохой скелет для последующей модернизации)
Почему-то страница обновляется
Попробуй так
обращайся по $("#такой то").click(functioin(){
тут твой код
});
должно сработать правильно!
и проверь
У меня было похожее, пока не догадался удалить
А как с кроссбраузерностью у скрипта?
… удалить тэг
Подскажите как скрыть поля и кнопку после успешной отправки? Чтобы остался только текст «Сообщение успешно отправлено!»
Спасибо)
Можно обернуть все поля, которые нужно скрыть div-ом, например, с классом form_div, и в код аякс запроса, где происходит обработка кода, после успешной отправки формы(success), добавить код: $(«.form_div»).hide();
есть специальный обработчик событий в аяксе почитай тут крутая книга http://anton.shevchuk.name/javascript/jquery-for-beginners-ajax/
Здравствуйте. Все работает, есть только одна идея, которую очень хочется реализовать. Как вывести ошибки под каждое поле отдельно.
Я понимаю, что:
‘result’ => $msg_box — передаем массив со всеми ошибками
$(‘.messages’).html(data.result); — передаем все в div messages
А как реализовать передачу в отдельно в каждый div под input?
Например:
для ошибки имя в div error_name
для ошибки в телефоне в div error_phone
Буду ждать ответа. Спасибо!
C хостинга все отлично отправляет. Автору респект!
форма работает отлично. спасибо большое, но почему то больше одной формы обратной связи на сайте не работает. подскажите почему так
Проверьте, чтобы id полей были уникальные, чтобы данные брались из нужных полей — можно завязаться на конкретную форму, через $(this)
спасибо за форму. работает как часы.
но было б логично, чтоб в поле ОТ проставлялся email, который чел вводит при заполнении формы.
так проще отвечать на письма.
Согласен: «было б логично, чтоб в поле ОТ проставлялся email»
И еще вопрос: В спам попадает , что делать?
Спасибо работает, а как в скрипте присвоить класс полю инпут при ошибке заполнения?
Подскажите, пожалуйста. AJAX передает кириллицу из формы в виде кракозябр, как это исправить?
$.ajax({
url: $that.attr(‘action’),
type: $that.attr(‘method’),
contentType: false,
processData: false,
data: formData,
dataType: ‘json’,
success: function(res){
var result = JSON.parse(res);
alert(res.answer);
},
error: function(){
alert(res.answer);
}
});
Всё верно!
Но можно короче:
$(‘.contact-form’).submit(function(){
// отправляем данные
$.ajax({
url: «action.php», // куда отправляем
type: «post», // метод передачи
dataType: «json», // тип передачи данных
data: $(this).serialize(),
// после получения ответа сервера
success: function(data){
$(‘.messages’).html(data.result); // выводим ответ сервера
}
});
});
У меня почему то не получается даже с сервера. Нажимаю отправить и никакой реакции. Не понятно происходить что то или нет. Пробный сайт прикрепила при заполнении данных
Здравствуйте, а как сделать, чтобы поля очищались после успешной отправки?
Добрый день, нужно добавить строку в success: $(«input»).val(«»);
Тогда кнопка input тоже становится пустой, а textarea сообщение не пропадает.
А вот так заработало:
success: function(data){
$(‘input’).val(»);
$(‘textarea’).val(»);
$(‘.messages’).html(data.result); // выводим ответ сервера
}
и вместо input отправки Отправить
Спасибо за наводку:)
Главное, что в итоге все получилось)
вместо input вставить button
Подскажите пожалуйста — что делать тем, у кого все равно не приходят уведомления на почту ? Я форму залила на сервер, но уведомления на почту не пришли. Сообщение об отправке высветилось.
Добрый день, бывает на хостинге не работает функция mail или письма, отправленные этой функцией. попадают в спам. Попробуйте проверить. какой результат возвращает эта функция:
$r = mail(..
var_dump($r)
И в консоле браузере посмотрите, какой ответ пришел от сервера. Если false, то проблема в функции mail. Тогда ее можно заменить smtp: https://vk-book.ru/otpravka-pisem-cherez-smtp-s-avtorizaciej-po-protokolu-ssl-na-php/
Функция mail у меня вернула false. Обращаться к smtp не хотелось бы. За исправлением функции mail обращаться к сисадмину ?
Да, это нужно писать системному администратору, чтобы он настроил отправку почты с сервера.
Только чтобы точно убедится. что проблема именно в функции mail, попробуйте прописать вместо переменных реальные значения и так же посмотреть результат. если вернется false, то дело точно в настройках сервера:
$r = mail(«test@mail.ru», «subject», «text»);
var_dump($r);
Кому интересно. Универсальный плаг обратной связи https://github.com/WahaWaher/sendmail-js
Любые поля форм + afqks, автооформление в таблицу и отправка на почту. jq php phpmailer ajax
Спасибо, пригодится кому-нибудь. Только вы в репозиторий закопитили логин и пароль к почте — такие данные лучше выносить в отдельный конфиг и добавлять его в игнор гита
Спасибо тебе, добрый человек! Работает! Просто и красиво :)
У меня не отрабатывает скрипт js, я кликаю на кнопку отправить, но ничего не происходит, а на почту сообщения приходят. Но нет уведомления об ошибка (в случае ошибки) и нет оповещения об отправке. Почему такое происходит? Сайт analiznadom.ru, на главной странице есть кнопка «Заказать звонок». В консоли есть предупреждение, может из-за него не срабатывает? подскажи пожалуйстаhttp://prntscr.com/my4m54
Вот что я делаю не так? С JS и PHP не знакома.
https://jsfiddle.net/xug4fsz5/ php в css — некуда было вставить)