Справочники, инструменты, документация

Ajax: Форма обратной связи

Для создание обратной формы на Ajax, вам потребуется создать три файла.
  • index.html - Главная страница, в ней разметка формы в HTML
  • script.js - В этом файле формируем Ajax для формы
  • form.php - Здесь мы будем обрабатывать форму через php

Создадим первый файл index.html и в нём форму:

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название страницы</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
    <form id="myform" method="POST">
        <input type="text">
        <input type="hidden" name="question" value="1">
        <textarea type="text"  name="message" placeholder="Ваш вопрос"></textarea>
        <input type="button" class="btn-form" value="Задать вопрос" >
    </form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Теперь файл script.js, где мы будем формировать Ajax-запрос (не забудьте подключить библиотеку jquery).

jQuery(function($){
    jQuery('#myform').click(function(){
        form = $(this).parent('form');
        $.ajax({
            url: 'form.php',
            type: 'GET',
            dataType: 'json',
            data: ({
                'mes': $(this).parent('form').find('textarea').val(),
                'question': $(this).parent('form').find('input[name=question]').val(),
                'span': $(this).parent('form').find('input[name=span]').val()
                }),
            success: function(response){
                if (response){ // если есть ответ, то выполняем след. действия
                    form.append('<div class="mes-success">Спасибо за ваше сообщение</div>');
                } else {
                    form.append('<div class="mes-error">Ошибка!</div>');
                }
            }
        });
    });

});

Создали форму и ajax-скрипт для неё, теперь её нужно обработать, создаём файл form.php и в нём пишем:

$addresses = array(
    'mail1@gmail.com',
    'mail2@gmail.com',
);

if (isset($_REQUEST['mes']) && !empty($_REQUEST['mes'])){
    if (empty($_REQUEST['span'])){
        $question = $_REQUEST['question'];
        $message = $_REQUEST['mes'];
        $send = "На сайте site.ru задали вопрос №".$question.": ".$message;
        $to= implode(', ', $addresses);
        $from = "no-replay@domen.ru";
        $subject = "Вопрос от сайта";
        $headers = "From: $from\r\nReplay-To: $from\r\nContent-type: text/plain; charset=utf-8\r\n";
        mail($to, $subject, $send, $headers);
    }
}

Форма готова, конструкция самая простая, можно разместить на любом сайте, форма также защищена от спама, методом добавки скрытых полей. Вы можете взять эту конструкцию за основу.