1. Що це таке?
2. Показуємо спливаюче вікно для невідправлених форм в WordPress
3. Додаємо оповіщення до решти формам в WordPress

Як правило, ненавмисне закриття сторінки з вашим коментарем або який-небудь заповненою формою, яку ви не встигли відправити, сильно дратує. Нещодавно один з наших користувачів запитав, чи можливо показувати читачам вікно підтвердження при виході зі сторінки. Ця маленька форма попереджає користувачів і запобігає випадкове закриття сторінки із заповненою інформацією, яка не була відправлена. У цій статті ми вам покажемо, як зробити таке спливаюче вікно для WordPress.

Що це таке?

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

Спливаюче вікно (pop-up) дозволяє завершити написання коментаря.

Таке вікно можна побачити в редакторі WordPress. Якщо у вас є незбережені зміни, і ви спробуєте закрити сторінку або ж закрити браузер, то ви побачите попереджувала спливаюче вікно.

Давайте подивимося, як можна додати цю функцію до форм на вашому сайті.

Показуємо спливаюче вікно для невідправлених форм в WordPress

У цій статті ми будемо створювати свій плагін, однак ви можете завантажити плагін в кінці матеріалу і встановити його на свій сайт. Але якщо ви бажаєте краще розібратися в самій суті коду, обов'язково спробуйте створити свій власний плагін. Це можна зробити як на своєму комп'ютері так і на тестовому сайті .

Почнемо!

Для початку вам необхідно створити нову папку на вашому комп'ютері і назвати її confirm-leaving. У цій папці створіть ще одну папку і назвіть її js.

Тепер відкрийте будь-який текстовий редактор. наприклад Блокнот, і створіть новий файл. У цей файл вставте наступний код:

<? Php function wpb_confirm_leaving_js () {wp_enqueue_script ( 'Confirm Leaving', plugins_url ( 'js / confirm-leaving.js', __FILE__), array ( 'jquery'), '1.0.0', true); } Add_action ( 'wp_enqueue_scripts', 'wpb_confirm_leaving_js');

Ця php функція просто додає файл JavaScript для вашого сайту. Збережіть цей файл під ім'ям confirm-leaving.php в папці confirm-leaving

Тепер необхідно створити файл JavaScript, який буде завантажувати даний плагін.

Створіть новий файл і вставте в нього даний код:

<? Php jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); function askConfirm () {if (needToConfirm) {/ / Put your custom message here return "Your unsaved data will be lost.";}} $ ( "# commentform"). change (function () {needToConfirm = true;});})

Цей код JavaScript визначає, чи є незбережені зміни в формі для коментарів. Якщо користувач намагається піти зі сторінки або ж закриває вікно, буде показано попереджувала спливаюче вікно.

Вам необхідно зберегти даний файл під ім'ям confirm-leaving.js в папку js.

Після збереження обох файлів, структура вашої папки повинна виглядати так:

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

Як тільки ви підключіться, необхідно завантажити папку confirm-leaving в папку / wp-contents / plugins / на вашому сайті.

Після цього, вам треба увійти в Панель Адміністратора WordPress і зайти на сторінку з плагінами. Знайдіть плагін під назвою 'Confirm Leaving' в списку встановлених плагінів і натисніть на 'activate' під назвою.

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

Додаємо оповіщення до решти формам в WordPress

Ви можете використовувати цей код для інших форм на вашому сайті WordPress. Зараз ми вам покажемо приклад використання скрипта на контактній формі.

У цьому прикладі ми будемо використовувати плагін WPForms , Щоб створити контактну форму. Інструкції будуть такими ж, якщо ви використовуєте інший плагін контактної форми на вашому сайті.

Перейдіть на сторінку, де ви можете розмістити фотографії контактну форму. Наведіть мишу на перше поле в контактній формі, натисніть праву кнопку миші і з меню, що випадає виберіть Inspect.

Знайдіть рядок, яка починається з тега <form>. У цьому тезі ви знайдете атрибут ID.

У цьому прикладі, ID нашої форми - wpforms-form-170. Потрібно скопіювати цей атрибут.

Тепер відкрийте файл confirm-leaving.js і додайте ID атрибут після #commentform.

Переконайтеся, що ви розділили коми #commentform і ID вашої форми. Також необхідно додати знак # в якості префікса до ID атрибуту вашої форми.

У підсумку, ваш код буде виглядати так:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); function askConfirm () {if (needToConfirm) {// Put your custom message here return "Your unsaved data will be lost.";}} $ ( "# commentform, # wpforms-form-170"). change (function () {needToConfirm = true;});})

Збережіть всі зміни і завантажте цей файл на ваш вебсайт.

Тепер ви можете ввести будь-який текст в будь-яке поле вашої контактної форми і спробувати покинути сторінку без відправки даних. З'явиться pop-up вікно з попередженням, що у вас є незбережені дані.

Також ви можете скачати плагін confirm-leaving . Він діє лише по відношенню до форм коментарів, але ви можете відредагувати код, щоб він діяв і на інші форми.

Ось і все, сподіваємося, що ця стаття допомогла вам розібратися, як робити спливаючі вікна для форм WordPress. Також ви можливо захочете ознайомитися з 8 кращими посібниками по jQuery для новачків в WordPress .

Якщо вам сподобалася ця стаття, то ласкаво просимо підписатися на наш канал в YouTube, де ви знайдете відеопідручники по WordPress. Також нас можна знайти на Twitter або Facebook.

Наша спеціальність - розробка та підтримка сайтів на WordPress. Контакти для безкоштовної консультації - [email protected] , +371 29394520