форма обратной связи на ajax

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

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

Я уже выкладывал запись в которой рассказывал как сделать простую форму обратной связи – http://prog-time.ru/prostaya-forma-obratnoj-svyazi-na-php/

Если вы читали прошлую запись, то знаете что форма должна быть написана внутри тега form. Вся информация передается через поля input.

Для реализации отправки формы через Ajax, нам понадобится 2 файла:

  1. index.php – здесь будет HTML форма и jQuery обработчик
  2. send.phpPHP обработчик

В самом начале вам нужно подключить библиотеку  jQuery. Добавьте эту строчку внутрь тега head.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

HTML код

input и textarea – поле для ввода информации.

Каждому тегу input и textarea нужно дописать уникальное значение атрибута name, по которому мы в дальнейшем будем идентифицировать поля.

<div class="form">
    <label>Ваше имя:</label><br/>
    <input type="text" id="name" value="" />
     
    <label>Ваш e-mail:</label><br/>
    <input type="text" id="email" value="" />
     
    <label>Телефон:</label>
    <input id="phone" />
    
    <label>Текст сообщения:</label>
    <textarea id="text_comment"></textarea>

    <input type="button" value="Отправить" id="btn_submit" />   
    <div id="erconts"></div>

  </div>

jQuery код

В самом низу необходимо разместить jQuery код.

$(document).ready(function(){
            /*ПРОВЕРЯЕМ НАЖАТА ЛИ КНОПКА ОТПРАВКИ*/
            $('#btn_submit').click(function(){
                // собираем данные с формы
                var user_name    = $('#name').val();
                var user_email   = $('#email').val();
                var user_phone = $('#phone').val();
                var text_comment = $('#text_comment').val();
                // отправляем данные
                $.ajax({
                    url: "send.php", // куда отправляем
                    type: "post", // метод передачи
                    data: { // что отправляем
                        "name":    user_name,
                        "email":   user_email,
                        "phone":   user_phone,
                        "text_comment": text_comment
                    },
                    error:function(){$("#erconts").html("Произошла ошибка!");}, 
                    /* если произойдет ошибка в элементе с id erconts выведится сообщение*/                 
                    beforeSend: function() {                     
                        $("#erconts").html("Отправляем данные...");                   
                    },                 
                    success: function(result){                     
                        /* В случае удачной обработки и отправки выполнится следующий код*/                     
                        $('#erconts').html(result);                     
                        console.log("ntcn");                 
                    }  
                });
            });
        });

PHP обработчик

Теперь мы прописывает в PHP файл код Ajax запроса. У меня это файл send.php

<?php
    /*ПОМЕЩАЕМ ДАННЫЕ ИЗ ПОЛЕЙ В ПЕРЕМЕННЫЕ*/
    $name = $_POST["name"];
    $email = $_POST["email"];
    $phone = $_POST["phone"];
    $text_comment = $_POST["text_comment"];

    /*ЗДЕСЬ ПРОВЕРЯЕМ ЕСЛИ ХОТЯ БЫ ОДНО ИЗ ПОЛЕЙ НЕ ЗАПОЛНЕНО МЫ ВОЗВРАЩАЕМ СООБЩЕНИЕ*/
    if($name=="" or $email=="" or $phone=="" or $text_comment==""){ 
        echo "Заполните все поля";
    }

    else{
        /*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/
        $to = "your_mail@mail.ru"; /* Адрес, куда отправляем письма*/
        $subject = "Письмо с обратной связи"; /*Тема письма*/
        $headers = "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n";
        $headers .= "From: <test@mail.ru>\r\n";/*ОТ КОГО*/

        /*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */
        $message .= "Имя пользователя: ".$name."\n";
        $message .= "Почта: ".$email."\n";
        $message .= "Телефон: ".$phone."\n";
        $message .= "Сообщение: ".$text_comment."\n";

        /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/

        $send = mail($to, $subject, $message, $headers);

        /*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/
        if ($send == "true")
        {
            echo "Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n";
        }
        /*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/
        else
        {
            echo "Не удалось отправить, попробуйте снова!";
        }
    }

?>

Не отправляется письмо!

Если вы пользуетесь Open Server, то у вас не получится отправить письмо на реальную почту. Вместо этого Open Server создает текстовый документ, в который записывается письмо. Все подобные текстовые документы отправки, находятся в \userdata\temp\email

Если вы тестируете данный код на хостинге, то убедитесь что на вашем хостинге разрешена отправка писем. Многие бесплатные хостинги запрещают отправку писем, отключая данный модуль в PHP. Для решения этой проблемы вам нужно обратиться в тех. поддержку.

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

4
Оставить комментарий

avatar
2 Цепочка комментария
2 Ответы по цепочке
1 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
3 Авторы комментариев
ProgTimeСергейДаниил Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Даниил
Гость
Даниил

А пароль от почт куда записывать ? Или как оно будет отправлять из них ?

Сергей
Гость
Сергей

Хорошая статья, но главное $_POSTфильтровать, чтобы не спамили и сайт через форму не ломанули. Ну а кто не хочет программировать, могут stepFORM порекомендовать, для новичков неплохое решение.