форма обратной связи 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, отправке достижения целей в метрику и настройке капчи.
Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).
Отправка формы без перезагрузки страницы на PHP и Ajax
Постоянно приходится пользоваться этой заготовкой. Вы можете модернизировать ее под любые нужды, будь то форма обратной связи, форма обратного звонка или заказ какой-либо услуги или товара.
Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как например маска телефона. Это вы сможете сделать при необходимости в зависимости от задачи.
Используя только одно включение кода из этого примера, можно создать неограниченное количество различных форм на странице. Это будет актуально, например для сайтов лендингов, где на одной странице используется множество различных форм.
HTML-код формы
Для начала создадим саму форму на HTML. Для примера будем использовать только 3 поля: имя, телефон и сообщение.
Один важный момент: у тега
В форме используем атрибут type в зависимости от типа поля. Это даст дополнительное преимущество при проверке вводимых данных. Чаще всего приходится использовать такие поля как:
Так же на данный момент для полей существуют различные атрибуты, которые избавят от лишних проверок на JavaScript. В этом примере используется атрибут required устанавливающий поле обязательным. А вот например в атрибуте pattern можно указать регулярное выражение для проверки маски ввода. Но я все же для этих целей использую соответствующий плагин jQuery.
Отправка формы без перезагрузки страницы
Тут самое интересное. Но как всегда на самом деле все просто. Приведенный ниже код можно подключить в отдельном .js скрипте или прямо в теле страницы перед закрывающим тегом
Уникальная форма обратной связи с 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 скрипт?
Простая форма обратной связи на php и ajax
Введение
Недавно я уже писал про форму обратной связи на php, но немного подумав, я решил ее немного модернизировать. Сейчас очень много где используется технология ajax, которая позволяет отправлять запросы на сервер без перезагрузки страницы. Давайте тоже не будем отставать от прогресса и сделаем отправку данных с нашей формы обратной связи средствами ajax.
Алгоритм действий будет не на много отличаться от обычной формы. Для начала сверстаем формочку, после чего напишем серверный скрипт и после этого добавим js скрипт, который свяжет клиентскую и серверную части. Работать с ajax будем с помощью библиотеки jQuery, поэтому не забудьте ее подключить.
Простая форма обратной связи на php и ajax. Код
Поскольку в этом примере формы обратной связи мы сделаем четкое разделение на серверную и клиентскую часть, нам потребуется два файла.
В первом будет храниться верстка и js:
И второй файл, в котором будет находиться серверная логика, написанная на php:
Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники — вот они.
Простая форма обратной связи на php и ajax: 47 комментариев
пишет что сообщение отправлено а во входящих его нет
Сообщение лежит на локальном сервере! В папке \userdata\tmp\email!
Там в файле txt откроешь будет отображаться вводимая информация!
Олег, да у меня тоже так же. Проверил несколько раз. Думал что что-то упустил но как вижу не у меня одного проблема.
Еще можно настроить отправку и на локальном сервере! Для этого нужно например в OpenServer зайти в настройки и настроить почту через удаленный SMTP сервер использовав свой аккаунт и настройки SMTP твоей почты!
Удобная форма обратной связи без перезагрузки страницы
Очень часто клиенты просят сделать у них на сайте удобную форму обратной связи. Удобство заключается в том, что после отправки заявки страница сайта не перезагружается, а мгновенно выдает пользователю сообщение об успешной операции. Также если пользователь забудет заполнить необходимые поля, то получит сообщение об ошибке.
Для этой тривиальной задачи, я заранее нашел и модифицировал скрипт, который работает на AJAX технологии. Также я подготовил красивое оформление полей, используя фреймворк Bootstrap 3. Достаточно скопировать мои CSS-стили и форма примет готовый для использования вид.
Этот скрипт размещается непосредственно под HTML формой и после объявления jQuery.
Для корректного отображения формы должен быть подключен Bootstrap 3.
Вот и все! Наша форма готова. Скачивайте и оставляйте свои комментарии.
Заказать установку формы обратной связи на сайт
Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?
Похожие статьи:
Комментарии ( )
Здравствуйте! Я не тестировал, но должно сработать вот так:
После этой строчки
$(‘.messages’).html(data.result);
Нужно добавить в select атрибут name, вот так:
Здравствуйте Алексей. Все сделал как вы сказали но что то не работает. Не отправляет форма. Показывает что поле select не заполнено.
в файл PHP дополнительно добавил следующее ниже скрипт. Вроде скрипт php делает проверку поля select но само поле в html остается чистым незаполненным возможно что то с не стыковка с bootstrap.CSS или надо дописать CSS к форме. Если не трудно посмотрите приложил архив form_select.rar
Вы должны авторизоваться, чтобы оставлять комментарии.