Пишем форму обратной связи на AJAX своими руками

Главная цель этой статьи — сделать простую форму обратной связи с использованием 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>&nbsp;</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 готова. Согласитесь, ничего сложного. Ну а если у Вас есть вопросы — прошу задавать в комментариях 😉

Запись опубликована в рубрике JS & jQuery, PHP & MySQL с метками , , . Добавьте в закладки постоянную ссылку.

13 комментариев: Пишем форму обратной связи на AJAX своими руками

  1. Илья говорит:

    странно письма не приходят… или не отсылаются

    • death knight говорит:

      на чем тестируете?

      • Илья говорит:

        сорри, разобрался с хостером…
        теперь письма доходят, форма отличная (визуально), но кодировка тела письма всё также в кракозябрах (заголовки, темы письма и т.п. нормально отображаются)

        варианты с применением:
        iconv
        header
        convert_cyr_string
        и т.п.
        не помогают (((((((((

  2. Сергей говорит:

    Здравствуйте! Спасибо большое за форму, давно искал на AJAX.
    Помоите с несколькими моментами: у меня подсказки в форме вылезают кроказябрами, и текст письма тоже. Сайт в windows-1251.
    iconv (‘utf-8′, ‘windows-1251, $mesage); — эту строку добавил, всё без изменений (кстати, закрывающей кавычки нет после 1251).

    А можно, чтобы форма сама обратно открывалась после отправки сообщения?
    И ещё, сложно сделать в этой форме отправку файла (аттач) и присоеденить капчу?

    • death knight говорит:

      Доброго времени.
      Файл contact.php у Вас в какой кодировке?
      Попробуйте добавить в его начало эту строку:

      header("Content-Type: text/html;charset=windows-1251");
      

      Капчу прикрутить не сложно, аттач файла тоже можно сделать, в двух словах, правда, объяснить не выйдет. В ближайшие выходные напишу подробный пост на эту тему.

      Закрывающую кавычку добавил, спасибо :)

  3. Алексей говорит:

    Не могу понять почему, если написать в форме имя типа Ваня Иванов, то в пришедшем письме в пункте (От кого) будет Ваня» «Иванов. От куда берутся двойные кавычки в середине имени? Если на английском, то нормально.

  4. Алексей говорит:

    Вот что обнаружил: на mail.ru приходят письма с крякозабрами, а на yandex.ru все в порядке. Остался еще непонятен момент: как поменять название и тему приходящего письма, например на обычный статический текст, типа
    «Для админа» «С формы обратной связи»?

    • death knight говорит:

      тут еще зависит от почтового сервиса, кто-то нормально распознает кодировки, кто-то нет
      для статической темы используйте следующий код:

      $mail = mail(WEBMASTER_EMAIL, 'Для админа с формы обратной связи', $message,
           "From: ".$name." \r\n"
          ."Reply-To: ".$email."\r\n"
          ."X-Mailer: PHP/" . phpversion());
      
  5. Алексей говорит:

    сайт в кодировке windows-1251

    • death knight говорит:

      Попробуйте добавить

      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());
      
  6. Алексей говорит:

    Спасибо за статью! Мне эта форма очень подходит, но можете подробнее написать, как сформировать текст пришедшего письма типа:
    Имя:***
    Email:****
    Тема:****
    Сообщение:****

    …и еще проблема с кодировкой…русские слова приходят крякозабрами..прошу помощи..

    • death knight говорит:

      перед строкой

      $mail = mail(WEBMASTER_EMAIL, $subject, $message,
           "From: ".$name." < ".$email.">\r\n"
          ."Reply-To: ".$email."\r\n"
          ."X-Mailer: PHP/" . phpversion());
      

      добавьте следующую:

      $message = 'Имя: ' . $name . '
      Email: ' . $email . '
      Тема: ' . $subject . '
      Сообщение: ' . $message;

      Насчет кодировки — в какой кодировке Ваш сайт?

Добавить комментарий для Сергей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">