Як подати форму без оновлення сторінки в WordPress

подайте форму без оновлення сторінки


Ви хочете не допустити оновлення сторінки, коли відвідувач подає форму? За замовчуванням вся сторінка перезавантажується після натискання на кнопку подання форми. І це коли дані, внесені у форму, передаються і зберігаються на сервері.

У цій статті ми розповімо, як увімкнути подання Ajax у ваші форми WordPress та запобігти перезавантаженню сторінки..

Чому ввімкнути подання форми Ajax у WordPress

Подання форми Ajax особливо корисно, якщо ви хочете вставити форму в модальне спливаюче вікно. Без ввімкнення подання форми AJAX всю сторінку потрібно буде оновити, що призведе до закриття спливаючого вікна. Таким чином користувачі можуть пропустити важливе повідомлення про підтвердження, яке підтримує їх.

Якщо ввімкнено подання форми AJAX, ваші користувачі могли бачити повідомлення про підтвердження після подання форми на одній сторінці без перезавантаження.

аякс форми подань

Щоб увімкнути надсилання форми ajax на ваш сайт WordPress, ми рекомендуємо WPForms, найкращий плагін для WordPress.

Крок 1: Створення нової форми

Щоб почати створювати форму, спочатку доведеться встановити плагін WPForms на вашому веб-сайті WordPress.

Не знаєте, як? Нема проблем. Ви можете перейти до нашого посібника про те, як встановити плагін WordPress, щоб вирішити все.

Після того, як плагін буде встановлений і активований, перейдіть на свою інформаційну панель WordPress і перейдіть до WPForms »Додати нове. Тепер ви будете перенаправлені на сторінку, де ви зможете вибрати шаблон для своєї форми.

WPForms пропонує на вибір 7 різних шаблонів форм. Виберемо Проста контактна форма для цього підручника, а потім додайте у форму поле для завантаження файлу.

Налаштування форми WPForms

Тепер ви побачите конструктор форм на екрані. У лівій частині екрана у вас є Додати поля і Параметри поля вкладка. За допомогою цих вкладок можна налаштувати контактну форму.

видалити поле з wpforms

WPForms полегшує вам додавання полів до форми за допомогою перетягування. Ви також можете змінити положення полів, перетягуючи та опускаючи. Якщо ви хочете видалити поле, це теж просто. Просто наведіть курсор на непотрібне поле та натисніть на видалити піктограму, яка з’явиться у верхньому правому куті поля.

Під Параметри поля Ви можете змінити мітку поля, змінити формат поля імені, змінити розмір шрифту та ввімкнути або вимкнути мітки та підмітки. У вас також є можливість включити умовна логіка варіант.

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

Тепер, коли ми створили просту контактну форму, додамо до неї функцію завантаження файлів.

Щоб додати функцію завантаження файлів, все, що вам потрібно зробити, це натиснути на поле «Завантажити файл» на панелі зліва. Можна також перетягнути поле Форма завантаження файлів і перенести його на бажане місце у конструкторі форм.

форма завантаження файлів

Крок 3: Увімкнення подання форми Ajax

Після збереження змін натисніть на Налаштування вліво на сторінці конструктора сторінок. Тут ви побачите кілька варіантів. Перейти до Загальні варіант. Під цим ви побачите ряд полів. Тут ви можете змінити назву форми, додати опис форми, змінити текст кнопки тощо.

Якщо прокрутити далі вниз по екрану, ви побачите кілька прапорців. Ви можете встановити прапорець, що говорить Увімкнути подання форми Ajax. Завершіть процес, натиснувши на Зберегти кнопка у верхньому правому куті екрана.

включити подання форми Ajax

Тепер перейдіть до Повідомлення вкладку нижче Загальні вкладка. Цей параметр буде повідомляти вас щоразу, коли хтось надсилає вашу форму. Тож у першому полі введіть адресу електронної пошти адміністратора або того, хто відповідає за отримання електронної пошти. Ви також можете ввести тему електронної пошти, ім’я відправника, адресу одержувача та власне повідомлення.

Після цього переконайтеся, що ви зберегли зміни. Ви також можете встановити повідомлення про підтвердження, яке відвідувачі отримають після натискання кнопки “Надіслати”.

налаштування підтвердження форми завантаження файлу

Крок 4: Опублікування вашої форми за допомогою програми Ajax

Останнім кроком є ​​опублікування на веб-сайті вашої форми з підтримкою подання Ajax. Для цього перейдіть на сторінку, на якій потрібно відобразити форму.

Почати можна, перейшовши на Сторінки »Додати нове на інформаційній панелі WordPress. Тепер додайте назву на свою сторінку. У текстовому редакторі вашої сторінки натисніть на Додати форму варіант. На вашому екрані з’явиться нове вікно.

wpforms вставляють форму

Клацніть на стрілку випадаючого меню та виберіть форму, щойно створену. Тепер натисніть на Додати форму кнопка. Ви побачите, що вбудований код відображається в текстовому редакторі вашої сторінки. Ви можете перевірити, як виглядає форма, натиснувши на Попередній перегляд кнопка в правій частині екрана.

Потім ви можете натиснути на Опублікувати щоб остаточно відпустити форму.

Це було легко, чи не так?

Тепер ви можете відстежити кількість натискань кнопок, які отримує ваша контактна форма. Для цього перегляньте наш посібник далі відстеження посилань та натискань кнопок.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map