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

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

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

Сергей
Сергей
1 год назад

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

JanleF
8 месяцев назад

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

JanleF
7 месяцев назад

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

JanleF
7 месяцев назад

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

franky
franky
6 месяцев назад

Подскажите как с помощью этой формы отправлять данные 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
6 месяцев назад

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

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

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

834519
6 месяцев назад

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

Б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
6 месяцев назад

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

Rodneyled
5 месяцев назад

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

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

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

975366
5 месяцев назад

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

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

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

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

RafaelBig
5 месяцев назад

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

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

treantinc
treantinc
4 месяцев назад

Vendo Viagra Cialis Propecia Fepuri [url=https://acialisd.com/#]cialis tablets for sale[/url] poopapsima Buy Misoprostol Tablets Online soogma buy cialis pro fenInverne How To Make Female Cialis

RandellSob
4 месяцев назад

[url=https://rosmera.ru/collection/kalibr-probka/product/kalibr-probka-m83x2]Калибр-пробка М83×2[/url]
[imgcomment image[/img]

Shawnjeogy
4 месяцев назад

Расходомеры Micro Motion (f200, f300) по цене от 400000 рублей купить в Норильске и Красноярском крае от компании «Нефтеэлемент». … Лучшая цена! Расходомер MicroMotion F200, F300. Расходомер MICRO MOTION в Норильске. [url=https://neftel.ru/rashodomer-micro-motion]micro motion f200[/url]

Наталья
Наталья
3 месяцев назад

Большое спасибо! Всё работает