форма обратной связи на 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, по которому мы в дальнейшем будем идентифицировать поля.

<form name="MyForm" action="" id="callbacks" method="post"><!--Атрибут action остается пустым-->
<!--Создаем поле "Имя"-->
<input name="name" type="text" placeholder="Имя" /><br>

<!--Создаем поле "Телефон"-->
<input name="tel" type="phone" placeholder="Телефон" /><br>

<!--Создаем поле "Email"-->
<input name="email" type="email" placeholder="Email" /><br>

<!--Создаем поле "Сообщение"-->
<textarea name="body" placeholder="Сообщение"></textarea><br>

<!--Создаем кнопку "Отправить"-->
<input type="submit" value="Отправить" id="btncontcall" />
</form>

<div id="erconts"></div><!--В этом блоке будет выводится информация от обработчика-->




jQuery код

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

$(document).ready(function() {         
$('#btncontcall').click(function(){
$.ajax({
type: "POST", //указываем что метод отправки POST
url:"send.php", // указываем адрес обработчика
data:$('#callbacks').serialize(), //указываем данные которые будут передаваться обработчику
/* Мы указываем id формы - $('#callbacks'), и методом serialize() забираем значения всех полей. */
error:function(){$("#erconts").html("Произошла ошибка!");},
/* если произойдет ошибка в элементе с id erconts выведится сообщение*/
beforeSend: function() {
$("#erconts").html("Отправляем данные...");
},
success: function(result){
/* В случае удачной обработки и отправки выполнится следующий код*/
$('#erconts').html(result);
checkThis();
}
});
return false;
});
});

PHP обработчик

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

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


    /*ЗДЕСЬ ПРОВЕРЯЕМ ЕСЛИ ХОТЯ БЫ ОДНО ИЗ ПОЛЕЙ НЕ ЗАПОЛНЕНО МЫ ВОЗВРАЩАЕМ СООБЩЕНИЕ*/
    if($name=="" or $email=="" or $tel=="" or $body==""){ 
        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 .= "Телефон: ".$tel."\n";
        $message .= "Сообщение: ".$body."\n";

        /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/
        //print_r($message);

        $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

Рекомендованные

Вам также будет интересно

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

avatar
  Подписаться  
Уведомление о