Как в WordPress отправлять данные формы без обновления страницы
В этой статье мы расскажем, как можно предотвратить перезагрузку страницы, когда пользователь отправляет данные, введенные в форму. Секрет заключается в создании формы для WordPress с использованием технологии AJAX.
Зачем использовать отправку форм с помощью AJAX
По умолчанию, когда пользователь нажимает на кнопку отправки формы, перезагружается вся страница. В этот момент данные формы передаются на сервер.
Но AJAX - это браузерная, а не серверная технология. Поэтому с ее помощью можно реализовать отправку данных в фоновом режиме без обновления страницы.
Вот несколько основных причин, почему стоит использовать AJAX:
- Обеспечивает лучший пользовательский опыт.
- Увеличение скорости работы сайта.
- Удерживает модальные и всплывающие окна открытыми.
- Позволяет выводить модальные подсказки.
AJAX формы и всплывающие окна
AJAX позволяет встроить форму в модальное всплывающее окно. Без использования данной технологии вся веб-страница должна обновиться, что приведет к закрытию всплывающего окна.
Как в WordPress отправить данные формы без обновления страницы
Чтобы создать форму для WordPress на основе AJAX, мы рекомендуем использовать плагин WPForms.
Шаг 1. Создайте новую форму
После установки и активации плагина в панели администрирования WordPress перейдите в меню WPForms > Add New.
Выберите шаблон простой контактной формы.
После нажатия кнопки «Create» откроется конструктор форм.
В левой части экрана вы увидите разделы «Add Fields» и «Field Options». Используйте их для добавления и настройки полей формы.
Плагин WPForms предоставляет drag-and-drop конструктор, который позволяет быстро добавлять поля в создаваемую форму и изменять их положение.
В разделе «Field Options» можно изменить метку поля, формат имени, размер шрифта и многое другое.
Чтобы добавить в форму функцию загрузки файла, выберите пункт Add Fields > Fancy Fields. Затем кликните по типу поля «File Upload».
Шаг 2. Включите AJAX-отправку формы
Для этого перейдите на вкладку «Settings», «General». Здесь вы сможете изменить имя формы, добавить описание, текст кнопки и многое другое.
Ниже расположено несколько чек-боксов. Нажмите на «Enable AJAX Form Submission». Сохраните внесенные изменения.
Теперь настроим уведомления. Для этого перейдите на вкладку «Notifications» в разделе «General». По умолчанию вы будете получать уведомления каждый раз, когда кто-то отправляет данные формы.
В первом поле введите адрес электронной почты, на который будут приходить уведомления. Вы также можете настроить тему письма, имя отправителя, адрес получателя, а также добавить собственное сообщение.
Не забудьте настроить сообщение, которое получат посетители вашего сайта после отправки формы.
Шаг 3. Опубликуйте форму
Для этого перейдите в меню Страницы > Добавить новую в панели администрирования WordPress. В редакторе страниц нажмите на кнопку «Add Form».
Выберите нужную форму из выпадающего меню, затем нажмите на кнопку «Add Form». После этого вы увидите код для вставки.
Чтобы увидеть, как форма будет отображаться для посетителей сайта, нажмите на кнопку «Просмотр».
Нажмите кнопку «Опубликовать», и форма моментально появится на сайте! Мы только что создали форму для WordPress с использованием AJAX, которая позволит отправлять пользовательские данные без обновления страницы.