Як показати у Wordpress спливаюче вікно підтвердження при виході, Coma Web Development
Що це таке?
Давайте подивимося, як можна додати цю функцію до форм на вашому сайті.
Показуємо спливаюче вікно для невідправлених форм WordPress
У цій статті ми будемо створювати свій плагін, однак ви можете завантажити плагін в кінці матеріалу та встановити його на свій сайт. Але якщо ви бажаєте краще розібратися в суті коду, обов'язково спробуйте створити свій власний плагін. Це можна зробити як на своєму комп'ютері, так і на тестовому сайті.
Для початку вам необхідно створити нову папку на вашому комп'ютері та назвати її confirm-leaving. У цій папці створіть ще одну папку та назвіть її js.
Вам необхідно зберегти файл під іменем confirm-leaving.js в папку js.
Після збереження обох файлів структура вашої папки повинна виглядати так:
Тепер вам потрібно приєднатися до вашого сайту WordPress через FTP клієнта. Перегляньте наш посібник, як використовувати FTP для завантаження файлів WordPress.
Як тільки ви підключитеся, необхідно завантажити папку confirm-leaving у папку /wp-contents/plugins/ на вашому сайті.
Після цього вам потрібно увійти в панель адміністратора WordPress і зайти на сторінку з плагінами. Знайдіть плагін під назвою 'Confirm Leaving' у списку встановлених плагінів та натисніть на 'activate' під назвою.
Додаємо оповіщення до інших форм WordPress
Цей код можна використовувати для інших форм на вашому сайті WordPress. Наразі ми вам покажемо приклад використання скрипту на контактній формі.
У цьому прикладі ми будемо використовувати WPForms плагін, щоб створити контактну форму.Інструкції будуть такими ж, якщо ви використовуєте іншу плагін контактної форми на вашому сайті.
Перейдіть до сторінки, де ви додали контактну форму. Наведіть мишу на перше поле в контактній формі, натисніть праву кнопку миші і з меню виберіть Inspect.
Знайдіть рядок, який починається з тега . У цьому мітці ви знайдете атрибут ID.
У цьому прикладі, ID нашої форми - wpforms-form-170. Потрібно скопіювати цей атрибут.
Тепер відкрийте файл confirm-leaving.js і додайте атрибут ID після #commentform .
Переконайтеся, що ви розділили комою #commentform та ID вашої форми. Також необхідно додати знак # як префікс до ID атрибуту вашої форми.
У результаті, ваш код виглядатиме так:
Збережіть усі зміни та завантажте цей файл на ваш веб-сайт.
Тепер ви можете ввести будь-який текст у будь-яке поле вашої контактної форми та спробувати залишити сторінку без надсилання даних. З'явиться pop-up вікно із попередженням, що у вас є незбережені дані.