Хотите построить AJAX контактную форму в WordPress?
Контактные формы AJAX позволяют пользователям отправлять форму без перезагрузки страницы. Это позволит вам повысить вовлеченность пользователей, предлагая им лучший опыт отправки формы.
Это очень удобно, когда вы управляете сайтом электронной коммерции и хотите собирать отзывы пользователей, не отвлекая их внимание.
Вы также можете использовать ту же функциональность AJAX для других пользовательских форм на вашем сайте. Например, пользовательская форма входа в систему позволит пользователям входить в систему без дополнительной загрузки страницы.
В этой статье мы покажем вам, как легко создать контактную форму WordPress AJAX с помощью пошаговых инструкций.
Что такое Ajax и зачем его использовать для ваших форм?
Ajax, сокращение от Asynchronous Javascript и XML, является техникой программирования JavaScript, которая позволяет разработчикам передавать данные без перезагрузки страницы.
Наиболее часто используется в веб-формах, позволяя пользователям отправлять данные формы без перезагрузки страницы. Это делает отправку формы легкой и быстрой, что улучшает общий пользовательский опыт.
How to make an Ajax request in WordPress? Primary guide, working with admin-ajax.php
Такие веб-приложения, как Gmail и Facebook (признана экстремистской организацией на территории РФ), широко используют эту технику, чтобы удержать пользователей, обеспечивая бесперебойную работу в фоновом режиме.
Вы также можете использовать Ajax для своих форм WordPress. Это избавит пользователей от ненужной перезагрузки страницы и сохранит их на странице, которую они в настоящее время просматривают.
Учитывая это, давайте рассмотрим, как легко сделать контактную форму WordPress Ajax за 4 простых шага.
1. Установите плагин WPForms
Первое, что вам нужно сделать, это установить и активировать плагин WPForms. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
WPForms — лучший плагин для построения форм WordPress на рынке. Он позволяет легко создавать формы с поддержкой Ajax, а также.
После активации вам необходимо посетить WPForms » Настройки страница для ввода лицензионного ключа.
После ввода лицензионного ключа вы сможете получать автоматические обновления и устанавливать дополнения.
Теперь вы готовы к созданию красивых ajax-форм в WordPress.
2. Создайте свою первую форму
Давайте продолжим и создадим вашу первую форму.
Просто посетите WPForms » Добавить новую страница в области администрирования WordPress. Вам будет предложено дать название вашей форме и выбрать шаблон в качестве отправной точки.
В этом учебнике мы создадим контактную форму. Однако вы можете создать любой другой тип формы, который вам необходим.
Теперь WPForms загрузит вашу форму с уже добавленными в нее основными полями. Вы можете просто навести и нажать на любое поле формы, чтобы отредактировать его.
Вы также можете добавить любое новое поле формы из левой колонки, просто нажав на него. Новое поле появится в нижней части вашей формы прямо над кнопкой отправки.
Вы можете легко перетаскивать поля формы, чтобы перемещать их вверх и вниз по форме.
Как только вы закончите редактирование формы, вы можете переходить к следующему шагу.
3. Включить функцию Ajax отправки формы
По умолчанию WPForms не включает функцию отправки форм Ajax. Вам нужно будет вручную включить его для вашей формы.
Просто перейдите на вкладку «Настройки» в конструкторе форм и установите флажок напротив опции «Включить отправку формы AJAX».
Установка флажка включит функциональность Ajax для этой формы.
Теперь давайте настроим, что произойдет после отправки формы.
Сначала переключитесь на вкладку ‘Подтверждение’ в настройках. Здесь вы сообщаете пользователям, что получили их форму.
WPForms позволяет вам сделать это различными способами. Например, вы можете перенаправить пользователей на URL, показать им определенную страницу или просто вывести сообщение на экран.
Поскольку мы включили функцию Ajax для формы, перенаправление пользователей на другую страницу будет противоречить цели создания Ajax-формы.
Вам нужно выбрать опцию сообщения и отредактировать сообщение подтверждения. Не стесняйтесь использовать панель форматирования в редакторе или добавьте пару ссылок, чтобы указать пользователям, куда идти дальше.
После этого вы можете настроить, как вы хотите получать уведомления об отправке формы.
Перейдите на вкладку «Уведомления» в настройках формы и настройте параметры электронной почты для уведомлений.
Как только вы закончите, вы можете сохранить свою форму и выйти из конструктора форм.
4. Добавление вашей формы с поддержкой Ajax в WordPress
WPForms позволяет очень легко добавлять формы в посты, страницы и виджеты боковой панели WordPress.
Просто отредактируйте пост или страницу, куда вы хотите добавить форму, и вставьте блок WPForms в область контента.
После этого вам нужно выбрать только что созданную форму в настройках блока. WPForms немедленно загрузит живой предварительный просмотр формы в редакторе контента.
Теперь вы можете сохранить или опубликовать свой контент, а затем посетить свой сайт, чтобы проверить функциональность ajax формы.
Вы также можете добавить свою форму в виджет боковой панели в WordPress. Для этого перейдите по ссылке Внешний вид » Виджеты страница и добавьте виджет WPForms в боковую панель.
Выберите форму, созданную ранее, и нажмите на кнопку Сохранить, чтобы сохранить настройки виджета. Теперь вы можете посетить свой сайт, чтобы увидеть свою форму, работающую на Ajax, в действии.
Мы надеемся, что эта статья помогла вам узнать, как создать контактную форму WordPress Ajax для вашего сайта. Вы также можете посмотреть наше руководство о том, как создать всплывающую контактную форму в WordPress.
Источник: www.wpbeginner.com