форма отправки писем на ajax
Как отправить HTML-форму без перезагрузки страницы
Что такое AJAX
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax
Здесь мы создадим демо-проект, который будет включать в себя 3 файла:
Создайте первый файл под названием index.php с таким содержимым:
Выводы
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с 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
Введение
Недавно я уже писал про форму обратной связи на php, но немного подумав, я решил ее немного модернизировать. Сейчас очень много где используется технология ajax, которая позволяет отправлять запросы на сервер без перезагрузки страницы. Давайте тоже не будем отставать от прогресса и сделаем отправку данных с нашей формы обратной связи средствами ajax.
Алгоритм действий будет не на много отличаться от обычной формы. Для начала сверстаем формочку, после чего напишем серверный скрипт и после этого добавим js скрипт, который свяжет клиентскую и серверную части. Работать с ajax будем с помощью библиотеки jQuery, поэтому не забудьте ее подключить.
Простая форма обратной связи на php и ajax. Код
Поскольку в этом примере формы обратной связи мы сделаем четкое разделение на серверную и клиентскую часть, нам потребуется два файла.
В первом будет храниться верстка и js:
И второй файл, в котором будет находиться серверная логика, написанная на php:
Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники — вот они.
Простая форма обратной связи на php и ajax: 47 комментариев
пишет что сообщение отправлено а во входящих его нет
Сообщение лежит на локальном сервере! В папке \userdata\tmp\email!
Там в файле txt откроешь будет отображаться вводимая информация!
Олег, да у меня тоже так же. Проверил несколько раз. Думал что что-то упустил но как вижу не у меня одного проблема.
Еще можно настроить отправку и на локальном сервере! Для этого нужно например в OpenServer зайти в настройки и настроить почту через удаленный SMTP сервер использовав свой аккаунт и настройки SMTP твоей почты!
Обратная связь на PHP + Ajax. Быстрая отправка писем.
Каждый наверное во время разработки сайт сталкивается с желанием установить форму обратной связи на свой сайт, чтобы пользователи с легкостью могли к вам обращаться если у них появились какие-либо вопросы.В этом статье я расскажу как вам сделать ajax форму обратной связи.
На этой стадии мы просто создали HTML форму c id feedback, который мы теперь будем использовать для распознования формы в jQuery скрипте ниже.
jQuery
Скрипт выше сначала проверяет поля на наличие информации и если любое из них пустое показывает окошко и просит пользователя ввести нужные данные. Если ошибок нет, то идет отправка AJAX запроса к файлу mail.php (подробнее об этом файле ниже), который выполняет отправку письма на почту.
PHP код выше проверяет данные полученые через ajax запрос от jQuery, после чего формирует данные и отправляет их на почту. В случае ошибки, данный скрипт отправляет данные обратно к jQuery скрипту и он уже обрабаывает их и показывает пользователю. После успешной отправки письма пользователь получает сообщение об успешной отправке.
Версия PHP выше, не самая безопасная, если вам нужно использовать что-то более стабильное в плане безопасности, то можете восспользоваться вот этой php библиотекой. Так же в ней больше возможностей. Или переписать скрипт самому (если у вас имеются знания в 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 исполнении.