форма обратной связи для сайта без перезагрузки страницы
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 технологии. Также я подготовил красивое оформление полей, используя фреймворк 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
Вы должны авторизоваться, чтобы оставлять комментарии.
Отправка формы без перезагрузки страницы
Дата публикации: 2009-11-04
В этом уроке Вам будет показано, как сделать контактную форму, через которую Вы будите посылать электронное сообщение без обновления страницы с помощью jQuery. Давайте начнем.
Обязательно советую Вам скачать исходный код всего урока. Там будут и php скрипт, который реализует процесс доставки сообщения.
Одним словом, урок очень полезный!
В сегодняшнем примере мы имеем простую форму с возможностью ввода имени, адреса электронной почты и номера телефона. Как я уже и говорил, форма содержит и php скрипт и родной jQuery, в том смысле, что не нужно устанавливать и скачивать никаких дополнительных плагинов.
Шаг 1 – создаем непосредственно саму HTML форму
Давайте взглянем на наш html код. Мы начинаем с нашей основной html формы:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вы могли заметить, что я включил div id contact_ form, который охватывает весь код формы. Вы также могли заметить, что я оставил параметры action и method пустыми. Это я сделал специально, т.к. об этом позже позаботиться jQuery.
Еще одна важная вещь. Не забудьте включить значение id в каждое поле ввода (строка начинается с тега input). Эти id значения jQuery сценарий будет искать для обработки формы.
Я добавил некоторый css стили и фоновое изображение в Photoshop для получения данной формы:
Шаг 2 – начинаем добавлять jQuery
Следующим шагом мы начнем добавлять по частям jQuery код. Я буду считать, что В уже скачали jQuery.
Далее открываем новый файл JavaScript, ссылаемся на него в xtml документе также, как и на любой другой файл JavaScript. Добавляем следующий код:
Первая функция (function()) он начинает загружать события, как только html документ готов. Если Вы уже делали какие-либо работы с jQuery, то функция такая же, как и document.ready функция. По коду можно понять, что мы имеем функцию клика по кнопке, с именем класса «button». Таким образом мы тут достигли такого же самого эффекта, как и если бы мы в поле input нашей формы добавили функцию onClick кнопки «отправить».
Шаг 3 – написание формы проверки введенных данных
Проверка первого поля: если поле для имени было оставлено пользователем пустым, мы показываем сообщение, записанное в теге label с идентификатором name_error. Затем мы помещаем фокус на поле ввода имени, на случай если пользователь запутался с тем, что ему делать дальше. (Я думаю, не стоит сильно напрягаться, когда речь идет о форме пользователей)
Объясняю, как данная вещь работает. В переменную “name” мы записываем значение, которое было введено в поле с идентификатором “name” – это всего одна строчка на jQuary.