Как отобразить уведомление об уходе со страницы для форм в WordPress

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

Отображаем всплывающее окно-уведомление для не отправленных форм в WordPress

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

Однако, для лучшего понимания кода, давайте всё же попробуем создать собственный плагин. Протестировать его можно будет и на локальном сайте.

Начинаем.

Для начала создаем новую папку на своем компьютере и называем ее confirm-leaving. Внутри папки confirm-leaving создаем еще одну и называем ее — js.

Теперь открываем текстовый редактор типа Блокнота и создаем новый файл. Внутри него вставляем следующий код:

<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  http://www.wpbeginner.com
 * Description: Этот плагин показываем уведомление пользователям, если они забудут нажать на кнопку Отправить в форме комментариев.
 * Version:     1.0.0
 * Author:      WPBeginner
 */

function devise_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', 'devise_confirm_leaving_js');

Эта php функция просто добавляет JavaScript файл на ваш сайт.

Продолжаем, и сохраняем этот файл с именем confirm-leaving.php внутри основной папки confirm-leaving.

Теперь нужно создать JavaScript файл, который наш плагин будет загружать.

Создаем новый файл и вставляем в него следующий код:

jQuery(document).ready(function($) {

$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});

function askConfirm() {
    if (needToConfirm) {
        // Здесь указываем свое сообщение
        return "Ваши не сохраненные данные будут утеряны.";
    }
}

$("#commentform").change(function() {
    needToConfirm = true;
});

 })

Этот код JavaScript определяет, есть ли у пользователя не сохраненные изменения в форме комментариев. Если пользователь попытается уйти со страницы или закрыть окно, плагин отобразит всплывающее предупреждение.

Нужно сохранить этот файл как confirm-leaving.js внутри папки js.

После того, как мы сохранили все файлы, структура папок должна выглядеть вот так:

Теперь вам нужно подключиться к своему WordPress сайту с помощью FTP клиента.

После подключения загружаем папку confirm-leaving в директорию /wp-contents/plugins/ своего сайта.

Далее, логинимся в административную панель WordPress и переходим на страницу Плагины. Находим плагин ‘Confirm Leaving’ в списке установленных и активируем его.

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

Добавляем предупреждение в другие формы WordPress

Вы можете использовать тот же самый код для указания любых форм на вашем сайте. Ниже мы покажем вам пример использования его в контактной форме.

В примере будем использовать плагин WPForms для создания формы контактов. Инструкция не будет отличаться, если вы решите использовать любой другой плагин контактных форм на своем сайте.

Переходим на страницу, где добавлена нужная нам форма. Наводим курсор мыши на первое поле формы, клик правой кнопкой, и выбираем «Исследовать элемент» из меню браузера.

Находим строку, которая начинается с тега <form>. В теге form вы увидите атрибут ID.

В нашем примере ID формы будет wpforms-form-170. Копируем этот атрибут.

Теперь переходим к редактированию файла confirm-leaving.js, и добавляем ID атрибута после #commentform.

Убедитесь в том, что вы отделили #commentform и ID вашей формы с помощью запятой. Также вам потребуется добавить знак # в качестве префикса к ID атрибуту вашей формы.

Итоговая измененная строка будет выглядеть примерно так:

$("#commentform,#wpforms-form-170").change(function() {

Сохраните изменения и загрузите файл обратно на свой сайт.

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

Вы можете скачать плагин confirm-leaving здесь. Он будет работать только с формой комментариев, но мы ведь уже научились редактировать его и заставить работать с любой формой на сайте.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.