Главная цель этой статьи — сделать простую форму обратной связи с использованием AJAX, jQuery и PHP. Форма будет представлена обычной HTML страничкой и при ее отправке данные будут передаваться на сервер с помощью Ajax. Поехали.
Для начала создадим заготовку HTML странички. В этом пожалуй ничего сложного нет, приведу код странички с комментариями. Для определенности пусть файл называется contact.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Форма обратной связи на Ajax</TITLE> <!-- JQuery --> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <!-- файл с нашими скриптами --> <script type="text/javascript" src="contact.js"> </script> <!-- стили --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <center> <center><h3>Форма обратной связи (на AJAX)</h3></center> <div align="left" style="width: 500px;"> <fieldset class="info_fieldset"><legend>Обратная связь</legend> <div id="note"></div> <div id="fields"> <form id="ajax-contact-form" action="javascript:alert('Отправлено!');"> <label>Имя</label><INPUT class="textbox" type="text" name="name" value=""><br /> <label>E-Mail</label><INPUT class="textbox" type="text" name="email" value=""><br /> <label>Тема</label><INPUT class="textbox" type="text" name="subject" value=""><br /> <label>Сообщение</label><TEXTAREA class="textbox" NAME="message" ROWS="5" COLS="25"></TEXTAREA><br /> <label> </label><INPUT class="button" type="submit" name="submit" value="Отправить сообщение"> </form> </div> </fieldset> </div> </center> </body> </html>
Основной html каркас сделан, теперь немного стилизуем нашу форму с помощью css. Файл style.css:
html, body { padding: 0; border: 0px none; } .notification_error { border: 1px solid #A25965; height: auto; width: 90%; padding: 4px; background: #F8F0F1; text-align: left; -moz-border-radius: 5px; } .notification_ok { border: 1px #567397 solid; height: auto; width: 90% padding: 8px; background: #f5f9fd; text-align: center; -moz-border-radius: 5px; } .info_fieldset { -moz-border-radius: 7px; border: 1px #dddddd solid; } .info_fieldset legend { border: 1px #dddddd solid; color: black; font: 13px Verdana; padding: 2px 5px 2px 5px; -moz-border-radius: 3px; } .button { border: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; background: white; color: #333333; font: 11px Verdana, Helvetica, Arial, sans-serif; -moz-border-radius: 3px; } label {width: 140px; padding-left: 20px; margin: 5px; float: left; text-align: left;} input, textarea { margin: 5px; padding: 0px; float: left; border: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; color: #333333; font: 11px Verdana, Helvetica, Arial, sans-serif; } br { clear: left; }
Добавим немного javascript (файл contact.js):
$(document).ready(function () { // после загрузки DOM $("#ajax-contact-form").submit(function () { // this указывает на нашу форму var str = $(this).serialize(); // сериализуем данные для POST-запроса $.ajax( { type: "POST", url: "contact.php", data: str, success: function (msg) { $("#note").ajaxComplete(function (event, request, settings) { if (msg == 'OK') // Если сообщение отправлено, поблагодарим пользователя { result = '<div class="notification_ok">Ваше сообщение отправлено. Спасибо!</div>'; $("#fields").hide(); } else { result = msg; } $(this).html(result); }); } }); return false; }); });
В скрипте сразу после загрузки DOM назначаем обработчик события отправки формы. В обработчике выполняем сериализацию данных, заполненных в форме. После этого отправляем ajax запрос через $.ajax(). Если запрос прошел успешно, мы получаем и обрабатываем данные от сервера. Если сервер ответил, что сообщение успешно сохранено, сообщаем об этом пользователю.
С клиентской частью разобрались. Теперь перейдем к серверной составляющей — файлу contact.php.
<?php define("WEBMASTER_EMAIL", 'iam@mydomain.com'); // сюда будем слать письма error_reporting (E_ALL); // включаем вывод всех ошибок, а перед запуском скрипта в использование не забываем отключить! if(!empty($_POST)) { $_POST = array_map('trim', $_POST); // почистим от лишних пробелов в начале и конце строки все элементы суперглобального массива $_POST одним разом $name = htmlspecialchars($_POST['name']); $email = $_POST['email']; $subject = htmlspecialchars($_POST['subject']); $message = htmlspecialchars($_POST['message']); $error = array(); // Если не введено имя if(empty($name)) { $error[] = 'Укажите Ваше имя.'; } // Если не введен email if(empty($email)) { $error[] = 'Укажите Ваш e-mail.'; // проверим корректность email }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)) { $error[] = 'Укажите корректный email.'; } // проверяем длину сообщения if(empty($message) || empty($message{15})) // не пустое ли сообщение и существует ли 15й символ? { $error[] = "Укажите текст сообщения. Оно должно быть не менее 15 символов."; } if(empty($error)) { // отправляем email средствами php $mail = mail(WEBMASTER_EMAIL, $subject, $message, "From: ".$name." <".$email.">\r\n" ."Reply-To: ".$email."\r\n" ."X-Mailer: PHP/" . phpversion()); if($mail) { echo 'OK'; } } else { echo '<div class="notification_error">'.implode('<br />', $error).'</div>'; } }
Думаю в этом файле ничего сложного нет 
На этом наша форма обратной связи на Ajax готова. Согласитесь, ничего сложного. Ну а если у Вас есть вопросы — прошу задавать в комментариях 😉
странно письма не приходят… или не отсылаются
на чем тестируете?
сорри, разобрался с хостером…
теперь письма доходят, форма отличная (визуально), но кодировка тела письма всё также в кракозябрах (заголовки, темы письма и т.п. нормально отображаются)
варианты с применением:
iconv
header
convert_cyr_string
и т.п.
не помогают (((((((((
Здравствуйте! Спасибо большое за форму, давно искал на AJAX.
Помоите с несколькими моментами: у меня подсказки в форме вылезают кроказябрами, и текст письма тоже. Сайт в windows-1251.
iconv (‘utf-8′, ‘windows-1251, $mesage); — эту строку добавил, всё без изменений (кстати, закрывающей кавычки нет после 1251).
А можно, чтобы форма сама обратно открывалась после отправки сообщения?
И ещё, сложно сделать в этой форме отправку файла (аттач) и присоеденить капчу?
Доброго времени.
Файл contact.php у Вас в какой кодировке?
Попробуйте добавить в его начало эту строку:
header("Content-Type: text/html;charset=windows-1251");Капчу прикрутить не сложно, аттач файла тоже можно сделать, в двух словах, правда, объяснить не выйдет. В ближайшие выходные напишу подробный пост на эту тему.
Закрывающую кавычку добавил, спасибо
Не могу понять почему, если написать в форме имя типа Ваня Иванов, то в пришедшем письме в пункте (От кого) будет Ваня» «Иванов. От куда берутся двойные кавычки в середине имени? Если на английском, то нормально.
Странно, ни разу с таким не сталкивался
Вот что обнаружил: на mail.ru приходят письма с крякозабрами, а на yandex.ru все в порядке. Остался еще непонятен момент: как поменять название и тему приходящего письма, например на обычный статический текст, типа
«Для админа» «С формы обратной связи»?
тут еще зависит от почтового сервиса, кто-то нормально распознает кодировки, кто-то нет
для статической темы используйте следующий код:
$mail = mail(WEBMASTER_EMAIL, 'Для админа с формы обратной связи', $message, "From: ".$name." \r\n" ."Reply-To: ".$email."\r\n" ."X-Mailer: PHP/" . phpversion());сайт в кодировке windows-1251
Попробуйте добавить
iconv ('utf-8', 'windows-1251', $mesage);перед
$mail = mail(WEBMASTER_EMAIL, $subject, $message, "From: ".$name." \r\n" ."Reply-To: ".$email."\r\n" ."X-Mailer: PHP/" . phpversion());Спасибо за статью! Мне эта форма очень подходит, но можете подробнее написать, как сформировать текст пришедшего письма типа:
Имя:***
Email:****
Тема:****
Сообщение:****
…и еще проблема с кодировкой…русские слова приходят крякозабрами..прошу помощи..
перед строкой
$mail = mail(WEBMASTER_EMAIL, $subject, $message, "From: ".$name." < ".$email.">\r\n" ."Reply-To: ".$email."\r\n" ."X-Mailer: PHP/" . phpversion());добавьте следующую:
Насчет кодировки — в какой кодировке Ваш сайт?