форма обратной связи на 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

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

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

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

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

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

JanleF
Гость

Fish Doxycycline 100 Tablets [url=http://apcialisle.com/#]Cialis[/url] Viagra For Sale Overnight п»їcialis Good Generic Propecia

JanleF
Гость

Cialis Rezeptfrei Bestellen Online [url=https://buyciallisonline.com/#]Cialis[/url] Brand Viagra With Fast Delivery Cialis No Prescription Amoxicillin Cheap

JanleF
Гость

Acheter Priligy 30mg [url=https://buyciallisonline.com/#]buy generic cialis online[/url] Generic Levitra 40mg Buy Cialis Viagra Aus Der Turkei

franky
Гость
franky

Подскажите как с помощью этой формы отправлять данные checkbox?
Добавил в html:

input type=”checkbox” class=”chkserv” name=”service” id=”service1″ value=”Сервис 1″
и
input type=”checkbox” class=”chkserv” name=”service” id=”service1″ value=”Сервис 2″
убрал скобки, т.к. в комментариях видаться запрещен html

Добавил в jQuery кодЖ
var service = $(‘.chkserv:checked’).val();
и
“service”: service

Добавил в PHP обработчик:
$message .= “Отмеченные чекбоксы:” . $_POST[‘service’] . ““;
Но в письме приходят данные только из одного (первого) отмеченного чекбокса, все остальные отмеченные игнорируются. Чего не хватает?
Заранее спасибо!

398365
Гость

Предлагаем Вам несложную работу на дому.

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

Более подробная информация на нашем сайте: https://v.ht/zarabotok_mask

834519
Гость

Получай деньги за просмотры фильмов без вложений.

Бeз влoжeний!
Бeз свoeгo сaйтa!
Бeз тeхничeских знaний!
Бeз вoзрaстных oгрaничeний!
Рaбoтaя 1-3 чaсa в дeнь!

Ознакомтесь с условиями у нас на сайте: http://v.ht/money_na_video

BillyNeith
Гость

Интернет-журнал Info Drive(Drive-Journal). Публикуем хорошие новости о событиях в России и мире. Ежедневно мы интересно рассказываем о политике, искусстве, путешествиях, фильмах, книгах и не только. Вкусные рецепты блюд и много рекомендаций для кулинаров. Большое количество лайфхаков для жизни. На сайте Вы можете публиковать свои новости, участвовать в обсуждениях. Много интересного, познавательного и увлекательного на одном ресурсе. Ждем Вас на страницах портала [url=https://drive-journal.ru]Drive-Journal.ru[/url]!

Rodneyled
Гость

Листая просторы рунета для глаза попался любопытный блог, в котором композитор – Александр Усанин в интересном формате рассказывает о глобальных проблемах и предлагает их решение. Хочу с вами поделиться: https://zen.yandex.ru/media/id/5eccc6b9f4a1862d8f90f984/netradicionnye-tradicii-sovremennogo-obscestva-5ede480af51e57794e8146b5

Пишите ваше заключение, что об этом думаете?

Грозит ли нам цифровизация и чипизация? Что будет после капитализма? Как улучшить взаимоотношения с родными, близкими, коллегами?
Как научиться жить правильно?

975366
Гость

Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
– Первый заработок в течении 60 минут.
– Стабильный доход 24 часа в сутки.
– Поступление денег без задержек.
– Для России, стран СНГ и Европы.
– Без вложений и установки ПО.
– Специально для новичков и людей без опыта.

Ознакомтесь с условиями на нашем блоге: https://v.ht/prosto_money

Ваша активация:
Ваш ID: E78BNN5MN9

RafaelBig
Гость

Поступок Филиппа Киркорова может спровоцировать создание Комитета по этике или Общественной группы для оценки контента по нравственным критериям. Основными задачами такой организации будет выработка ограничений и этических норм для публичного контента, а также контроль за их исполнением. Это не цензура, Премия «На Благо Мира», которая стала инициатором данной инициативы, не призывает контролировать темы и мнения, она призывает ограничивать средства выразительности, которые авторы используют, снижая общий культурный уровень граждан.

Источник: https://nablagomira.ru/events/627