наверх

Всплывающая форма с отправкой через Ajax

В этой статье рассмотрим простой способ создания модального окна внутри которого будет форма обратной связи, отправляющая данные с помощью AJAX.

Эффект всплывания будем делать с помощью fancybox. Как подключить fancybox подробно рассказано в статье «Подключение и настройка FancyBox 3». И конечно не забываем подключить библиотеку jQuery.

1. Для начала следует создать кнопку и повесить на нее fancybox:

Стили кнопки:

2. После этого создать саму форму:

Атрибут action не указан, так как отправка будет происходить на этой же странице.

В стилях данную форму необходимо скрыть:

Форма будет всплывать по клику на кнопку благодаря тому, что в атрибуте data-src кнопки мы указали id формы которая должна всплывать.

3. Теперь следует написать скрипт который будет отправлять форму без перезагрузки и плавно скрывать ее после отправки:

Данный скрипт вешает событие отправки формы на форму с идентификатором form__popup. Если кнопка отправки нажата, проверяется заполнены ли поля с соответствующими id и если все хорошо то выполняется ajax запрос.

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

4. В последнюю очередь создаем простой обработчик формы на стороне сервера:

Здесь идет проверка формы на знаполненность полей и отправка данных функцией mail().

В результате должна получиться вот такая красота:

Оформить заявку

Оформить заявку