Найти тему
Алексей Вавилов

Как сделать AJAX-форму на сайте? Форма заявки без перезагрузки страницы

В начале моей работы веб-разработчиком мне необходимо было делать различные формы и окна на сайтах. Я набросал для себя минимальные рабочие варианты и поделился ими на youtube. Судя по лайкам и комментариям, я помог некоторому количеству людей, поэтому решил поделиться этим и здесь.

Если вкратце, то я использую тег form в html, в который помещаю нужные мне элементы формы.

Форма заявки на сайте
Форма заявки на сайте

В футере верстаю окно «спасибо», которое откроется после отправки данных из формы.

Окно «спасибо» на сайт
Окно «спасибо» на сайт

В отдельном файле у меня идет небольшой php-обработчик, который собирает данные с формы и отправляет их на почтовый ящик администратора.

PHP-обработчик заявки на сайте
PHP-обработчик заявки на сайте

А для того, чтобы страница не перезагружалась после срабатывания формы и появлялось окно «спасибо за заявку» использую js-скрипт. В нем я делаю проверку полей формы на то, что они не пустые и отправляю данные. После отправки открываю это окно и даю возможность закрыть его по клику в любом месте или на крестик.

Данное окно используется для того, чтобы оповестить пользователя, что его данные получены вашим сотрудником и вы свяжитесь с ним. Можно дополнительно указать ваши соц. сети, чтобы вести пользователя дальше, а так же стилизовать само окно как угодно при помощи CSS.
Данное окно используется для того, чтобы оповестить пользователя, что его данные получены вашим сотрудником и вы свяжитесь с ним. Можно дополнительно указать ваши соц. сети, чтобы вести пользователя дальше, а так же стилизовать само окно как угодно при помощи CSS.

Так же, использую плагин maskedinput для создания маски ввода номера. Так как без нее пользователи часто ошибаются, пишут лишнюю цифру или пропускают нужную и мы теряем клиента не узнав его правильный номер.

Скрипт отправки заявки с сайта
Скрипт отправки заявки с сайта

Процесс создания формы показан на видео:

Есть вопросы или пожелания? Пишите в комментарии!