Как создать AJAX-форму для сайта на WordPress

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

Что такое Ajax и зачем его использовать для форм?

Что такое Ajax и зачем его использовать для форм?

Ajax (Asynchronous Javascript and XML) – это метод JavaScript- программирования, который позволяет передавать данные без перезагрузки страницы.

Чаще всего он используется в формах. Ajax делает отправку формы простой и быстрой. Эту технологию используют такие платформы, как Gmail и Facebook.

Вы также можете использовать Ajax для форм на WordPress. Это избавит пользователей от перезагрузки страницы.

Рассмотрим, как можно создать AJAX-форму для WordPress.

1. Установите плагин WPForms

Установите и активируйте плагин WPForms. Это лучший  плагин WordPress для создания форм на AJAX.

После активации в административной панели WordPress перейдите в меню «WPForms» - «Настройки», чтобы ввести приобретенный лицензионный ключ.

Установите плагин WPForms

После ввода ключа вы будете получать автоматические обновления и сможете устанавливать необходимые дополнения.

2. Создайте свою первую форму

Перейдите в меню «WPForms» - «Добавить новую». После этого введите название создаваемой формы и выберите исходный шаблон.

Создайте свою первую форму

Затем WPForms загрузит форму с уже добавленными базовыми полями. Кликните по любому полю формы, чтобы отредактировать его.

Создайте свою первую форму - 2

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

Вы можете перемещать поля формы, перетаскивая их курсором.

3. Активируйте режим отправки данных формы с помощью AJAX

Плагин WPForms не использует AJAX по умолчанию. Для активации данного метода в конструкторе форм перейдите на вкладку «Настройки» и установите флажок «Включить AJAX-отправку форм».

Активируйте режим отправки данных формы с помощью AJAX

Это действие подключит Ajax для созданной формы. Затем перейдите на вкладку «Подтверждение» в разделе настроек. Здесь можно управлять информированием пользователей о получении отправленных ими данные.

Активируйте режим отправки данных формы с помощью AJAX - 2

Плагин WPForms позволяет делать это различными способами: перенаправлением на другой URL-адрес, отображением определенной страницы или сообщения.

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

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

4. Добавление Ajax-формы в WordPress

Плагин WPForms упрощает добавление форм в записи, на страницы и боковые панели WordPress. Отредактируйте страницу, на которой хотите разместить форму, и вставьте блок WPForms в область содержимого.

Добавление Ajax-формы в WordPress

После этого выберите созданную форму в настройках блока. Затем WPForms загрузит предварительный просмотр выбранной формы в визуальном редакторе.

Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!

Пожалуйста, опубликуйте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!

Вадим Дворниковавтор-переводчик статьи «How to Build a WordPress AJAX Form (in 4 Easy Steps)»