Форма обратной связи php ajax
Ajax-форма без перезагрузки страницы
Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.
Отправка формы без перезагрузки страницы:
Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html.
AJAX + PHP + JQuery
Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.
Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:
Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.
Готовая схема выглядит так:
Пользователь нажатием кнопки отправляет данные
файл JS отправляет их в PHP через Ajax, функцию JQuery
обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе
в первом случае владелец сайта также получает готовую заявку.
Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.
Инструкция по созданию формы без перезагрузки
Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).
Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):
Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.
Обработчик, в JS элементе выше мы уже назвали его formx.php:
Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.
Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.
Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.
Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).
Уникальная форма обратной связи с ajax на php
Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте http://webdesign-master.ru/blog/tools/578.html и использую уже очень давно.
Выложу здесь коды, чтобы было проще копировать, но все исходники есть на GitHub https://github.com/agragregra/uniMail.
В чем уникальность этого скрипта – в том, что у вас может быть любая форма с любым количеством различных полей, и не нужно под каждое поле создавать вывод данных в письме, скрипт просто проходит по всем полям и выводит все данные из них. Например, при добавлении нового поля в файле html, нет необходимости добавлять еще какие-то параметры в mail.php. И это очень круто и просто. То есть форма будет работать уже при минимальных правках из коробки.
index.html
В скрытые поля вносим данные для отправки письма – Имя отправителя, имя отправителя (он же и получатель), тема письма.
script.js
Перед подключением скрипта обязательно подключаем jquery, если он еще не подключен:
В данном скрипте при успешной отправке сообщения выводится alert, который при необходимости можно заменить на всплывающее сообщение или что-то другое
mail.php
Файл mail.php – основной, он собирает все данные из полей формы и отправляет на почту.
Видео
Комментарии (14) к “Уникальная форма обратной связи с ajax на php”
Владимир
Спасибо, очень удобно! Явно человек с понятием о масштабируемых системах писал) Супер!
WahaWaher
Кому интересно. Универсальный плаг обратной связи https://github.com/WahaWaher/sendmail-js
Любые поля форм + файлы, авто оформление в таблицу и отправка на почту. jq php phpmailer ajax
Как сделать чтобы сообщение отправлялось мне на почту после паузы 5 минут?
Алексей
Здравствуйте, подскажите пожалуйста почему она не отправляет на mail.ru на яндекс отправляет на ура а на mail.ru не приходят
Denis Creative
Если сервер сайта находится в Украине, то на yandex.ru и mail.ru почта не будет отправляться.
Лариса
Здравствуйте! Интересно.
А как прикрутить приложения … прикрепленные файлы?
Николай
Алексей
Добрый день.
Подскажите как сделать, чтобы письмо приходило на 2 почты?
Пробовал почту через запятую, не выходит.
Сергей
Denis Creative
Спасибо, надо будет протестировать.
Drakonoved
See alternative variant with using Java+Spring and AngularJS+Material: https://drakonoved.org/blog/2020/04/30/simple-feedback-form.html
Здравствуйте, подскажите пожалуйста, как убрать e-mail (куда отправлять) из формы на странице, в php скрипт?
Заметки Веб-разработчика
Полезная информация для исполнителей и заказчиков
Как сделать простую Форму Обратной связи с AJAX обработкой
Форма обратной связи сейчас есть практически на каждом лендинге или просто на сайте каким-либо образом связанным с продажей своей услуги. По сути, это уже почти обязательный атрибут любого сайта ориентированного на продажу услуг или товаров.
Мы с вами сделаем небольшую форму с полями для имени, телефона и сообщения. Также, мы добавим AJAX запрос для того, чтобы избавить пользователя от неудобного переадресовывания на другую страницу после отправки письма. То есть, после отправки, выскочит сообщение под формой: «Ваше сообщение успешно отправлено».
ШАГ 1. Добавление формы в HTML файл
Для начала нам необходимо в html файл добавить нашу форму. Вставьте вот такой код:
Появляется несколько вопросов:
«Что за блок erconts?»
«Почему мы оставили action пустым?»
«Почему блок erconts имеет display: none?»
Блок erconts будет использован как контейнер для сообщения, которое будет выводится после отправки письма. То есть, в него с помощью ajax мы будем выводить всякого рода ошибки или сообщения с подтверждением отправки.
Action мы оставили пустым, чтобы небыло переадресации на другую страницу после отправки письма, ведь мы используем ajax метод и переадресация нам уже просто не к чему.
Блок erconts будет анимировано появляться с сообщением об успешной отправке сообщения. Анимация будет прописана в коде следующего шага.
ПРИМЕЧАНИЕ! Советую не убирать id callbacks и id submit у елемента form и input соответственно. По этим id мы сможем напрямую обращатся к ним в ajax запросе.
ШАГ 2. Добавление AJAX запроса в javascript файл
Далее, создаем javascript файл, подключаем его в наш html файл. Затем помещаем в javascript файл код ниже:
Как вы видите, мы отлавливаем событие нажатия кнопки с id submit и начинаем вызывать ajax функцию. В строке url: «send.php» вызывается php файл с обработчиком формы, который мы создадим в следующем шаге. В строке data: «$(«#callbacks»).serialize()» собираются данные для обработки, которые ввел пользователь в форму. В функции error выводится сообщение при ошибке отправки. Такое сообщение будет выводится, если вдруг у человека не будет работать интернет или если не был подключен обработчик о котором я писал ранее. В функции beforeSend выводится сообщение перед отправкой. Это сообщение часто даже не видно при отправке, потому что оно мелькает буквально на пару сотен долисекунд из-за быстрой обработки письма. Функция success выводит сообщение при удачной отправки данных письма обработчику.
По сути, этот ajax запрос просто берет данные которые ввел пользователь и передает их в файл обработчика, который мы сейчас будем создавать. А уже из того файла берет сообщение об ошибке или об успешной отправки письма.
ШАГ 3. Создание обработчика формы в PHP файле
Вам нужно в папке вашего сайта создать файл send.php и вставить в него этот код:
Кратко опишу, что делает этот код.
Первая часть кода заносит данные, которые ему передал ajax в свои переменные под названием name, phone и body. Затем, эти переменные проверяются на их содержание. Если хоть одна из них будет пустая, обработчик вернет сообщение об ошибке: «Пожалуйста, заполните все поля». Далее, если эти переменные содержат какие-то данные, то есть, пользователь ввел свои данные, обработчик начинает прорабатывать письмо. Наш обработчик начинает вычислять ip пользователя и его браузер. Далее он конструирует письмо с темой, которую мы можем указать в этом обработчике. Он вставляет переменные с данными в это письмо и проводит отправку на почту, которую вы должны указать в переменной $to в коде этого обработчика. В моем случае я написал свою почту, а вы должны написать свою или ту на которую должно прийти письмо.
Конец кода с помощью функции mail() определяет, получилось ли отправить письмо или нет. Если обработчик смог отправить письмо, он пишет одно сообщение, а если нет, другое.
Вы можете изменять сообщения, которые должен написать этот обработчик пользователю при отправке.
ВСЕ ГОТОВО! Теперь на вашем сайте есть абсолютно работающая форма обратной связи в Ajax исполнении.
Простая форма обратной связи на php и ajax
Введение
Недавно я уже писал про форму обратной связи на php, но немного подумав, я решил ее немного модернизировать. Сейчас очень много где используется технология ajax, которая позволяет отправлять запросы на сервер без перезагрузки страницы. Давайте тоже не будем отставать от прогресса и сделаем отправку данных с нашей формы обратной связи средствами ajax.
Алгоритм действий будет не на много отличаться от обычной формы. Для начала сверстаем формочку, после чего напишем серверный скрипт и после этого добавим js скрипт, который свяжет клиентскую и серверную части. Работать с ajax будем с помощью библиотеки jQuery, поэтому не забудьте ее подключить.
Простая форма обратной связи на php и ajax. Код
Поскольку в этом примере формы обратной связи мы сделаем четкое разделение на серверную и клиентскую часть, нам потребуется два файла.
В первом будет храниться верстка и js:
И второй файл, в котором будет находиться серверная логика, написанная на php:
Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники — вот они.
Простая форма обратной связи на php и ajax: 47 комментариев
пишет что сообщение отправлено а во входящих его нет
Сообщение лежит на локальном сервере! В папке \userdata\tmp\email!
Там в файле txt откроешь будет отображаться вводимая информация!
Олег, да у меня тоже так же. Проверил несколько раз. Думал что что-то упустил но как вижу не у меня одного проблема.
Еще можно настроить отправку и на локальном сервере! Для этого нужно например в OpenServer зайти в настройки и настроить почту через удаленный SMTP сервер использовав свой аккаунт и настройки SMTP твоей почты!
Создание формы обратной связи в модальном окне на PHP + AJAX
На заре русского сегмента интернета электронная коммерция не имела такого бурного роста как сейчас. Это обусловливалось тем что доступ к сети интернет имело ограниченное число лиц и это не начало 90-х, а уже в начале 00-х. Я помню те времена кода для выхода в интернет использовали dial up модемы, скорость загрузки страниц был очень медленной, а о скачивании файлов я вообще молчу. Далее на смену dial up пришли DSL технологии и интернет заиграл другими красками. Скорость доступа выросла в разы. В это время началась общая интернатизация общества России. Но и DSL продержался не долго, на смену ему пришел широкополосный интернет использующий Ethernet технологию.
За эти 16 лет интернет прочно вошел в нашу повседневную жизнь и является не отъемлемой частью бизнес-процессов. Соответственно и бизнес сайтов в сети стало очень много, а как вы понимаете бизнесу нужны клиенты. Исходя из потребностей рынка мы свами создадим форму обратной связи в модальном окне и будем использовать AJAX + PHP.
Этапы создания формы обратной связи AJAX + PHP:
Структура каталогов
Для работы мы будем использовать:
Для быстрой верстки формы и создания модального окна воспользуемся Фреймворком Bootstrap 3. Данный Фреймворк очень сильно облегчает жизнь верстальщикам. Чтобы быть в тренде будем использовать технологию AJAX для отправки данных с формы без перезагрузки самой страницы.
Создаем файл index.html в нем создаем разметку нашей формы обратной связи.
Файл index.html
После создания формы нам необходим обработчик данной формы на стороне клиента. Для этого будем использовать библиотеку JQuery. С помощью ее мы подготовим наш AJAX запрос далее методом POST передадим данные серверу для дальнейшей обработки.
Создаем файл command.js в котором опишем отправку данных с помощью AJAX технологии.
Файл command.js
Как видно из скрипта command.js мы отлавливаем событие формы submit, далее все данные с формы отправляем на сервер. На сервере данные проверяются и если форма валидна, то письмо отправляется адресату. Если форма не валидна, то выводим ошибки пользователю.
Создадим файл mail.php обработчик формы с отправкой письма данных с формы.
Файл mail.php
Чтобы не было проблем с кодировкой, рекомендую создать в корневой директории файл .htaccess с вот таким содержимым: AddDefaultCharset utf-8