Как в WordPress отправлять данные формы без обновления страницы

В данной статье мы расскажем, как можно легко предотвратить перезагрузку страницы, когда посетитель отправляет данные, введенные в форму. Секрет заключается в создании формы для WordPress с использованием технологии AJAX.

Зачем использовать отправку форм при помощи AJAX

Как в WordPress отправлять данные формы без обновления страницы

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

Но AJAX — это браузерная, а не серверная технология. Так что с ее помощью можно реализовать отправку данных в фоновом режиме без обновления страницы.

Вот пару основных причин, почему следует использовать AJAX:

  • Обеспечивает лучший пользовательский опыт.
  • Увеличение скорости работы веб-сайта.
  • Удерживает модальные и всплывающие окна открытыми.
  • Может отображать модальные подсказки.

AJAX формы и всплывающие окна

Как в WordPress отправлять данные формы без обновления страницы

AJAX может встроить форму в модальное всплывающее окно. Без использования данной технологии вся веб-страница должна обновиться, что приведет к закрытию всплывающего окна.

Как в WordPress отправить данные формы без обновления страницы

Чтобы создать форму для WordPress на основе AJAX, мы рекомендуем использовать плагин WPForms.

Шаг 1. Создайте новую форму

После установки и активации плагина в панели администрирования WordPress перейдите в меню WPForms > Add New.

Как в WordPress отправлять данные формы без обновления страницы

Выберите шаблон простой контактной формы.

Как в WordPress отправлять данные формы без обновления страницы

После нажатия кнопки « Create» откроется конструктор форм.

В левой части экрана вы увидите разделы « Add Fields» и « Field Options». Используйте их для добавления и параметра полей ввода формы.

Как в WordPress отправлять данные формы без обновления страницы

Плагин WPForms предлагает drag-and-drop конструктор, который может быстро добавлять поля ввода в создаваемую форму и изменять их положение.

Как в WordPress отправлять данные формы без обновления страницы

В разделе « Field Options» можно без проблем настроить метку поля ввода, формат имени, размер шрифта и многое иное.

Как в WordPress отправлять данные формы без обновления страницы

Чтобы добавить в форму возможность загрузки файла, выберите пункт Add Fields > Fancy Fields. Далее кликните по типу поля ввода « File Upload».

Как в WordPress отправлять данные формы без обновления страницы

Шаг 2. Включите AJAX-отправку формы

Для этого перейдите на вкладку « Settings», « General». Здесь вы сможете настроить имя формы, добавить описание, текст кнопки и многое иное.

Ниже расположено пару чек-боксов. Нажмите на «Enable AJAX Form Submission». Сохраните внесенные изменения.

Как в WordPress отправлять данные формы без обновления страницы

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

В первом поле ввода введите адрес электронной почты, на который будут приходить уведомления. Вы также можете изменить тему письма, имя отправителя, адрес получателя, а также добавить собственное сообщение.

Не забудьте изменить сообщение, которое получат пользователи веб-сайта после отправки формы.

Шаг 3. Опубликуйте форму

Для этого перейдите в меню Страницы > Добавить новую в панели администрирования WordPress. В редакторе страниц нажмите на кнопку « Add Form».

Как в WordPress отправлять данные формы без обновления страницы

Выберите нужную форму из выпадающего меню, далее нажмите на кнопку « Add Form ». После этого вы увидите код для вставки.

Как в WordPress отправлять данные формы без обновления страницы

Чтобы увидеть, как форма будет выводиться для пользователей веб-сайта, нажмите на кнопку « Просмотр».

Как в WordPress отправлять данные формы без обновления страницы

Нажмите кнопку « Опубликовать», и форма моментально появится на веб-сайте! Мы только что создали форму для WordPress с использованием AJAX, которая сможет отправлять пользовательские данные без обновления страницы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *