Как показать всплывающее окно подтверждения для форм в WordPress

/

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

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

Что такое всплывающее окно подтверждения?

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

Всплывающее окно подтверждения навигации дает им возможность закончить свой комментарий.

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

Всплывающее окно с предупреждением о несохраненных изменениях в редакторе сообщений WordPress

Давайте посмотрим, как мы можем добавить это предупреждение в комментарии WordPress и другие формы на вашем сайте.

Показывать всплывающее окно подтверждения в WordPress

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

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

Давайте начнем.

Для начала вам нужно создать новую папку на вашем компьютере и назвать ее «подтверждение выхода». Внутри папки подтверждения выхода вам нужно создать другую папку и назвать ее js.

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

<?php
/**
 * Confirm Leaving 
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.example.com
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form. 
 * Version:     1.0.0
 * Author:      WP
 * Author URI:  https://www.example.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

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-leave.php внутри основной папки подтверждения выхода.

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

Создайте новый файл и вставьте в него этот код:

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-leave.js внутри папки js.

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

Файловая структура плагина

Теперь вам нужно подключиться к вашему сайту WordPress с помощью FTP-клиента. См. Наше руководство о том, как использовать FTP для загрузки файлов WordPress.

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

Загрузка файлов плагинов на ваш сайт WordPress

После этого вам нужно войти в админку WordPress и перейти на страницу плагинов. Найдите плагин «Подтвердить выход» в списке установленных плагинов и нажмите на ссылку «активировать» под ним.

Активировать плагин

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

всплывающее уведомление, предупреждающее пользователя о несохраненных изменениях

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

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

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

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

Поиск идентификатора формы

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

В этом примере идентификатор нашей формы - wpforms-form-170. Вам нужно скопировать атрибут ID.

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

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

Теперь ваш код будет выглядеть так:

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;
    });
})

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

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

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как скопировать базу данных WordPress с помощью phpMyAdmin

Вы хотите дублировать базу данных WordPress с помощью phpMyAdmin? WordPress хранит все данные вашего сайта в базе данных MySQL. Иногда вам может потребоваться быстрое

Как настроить автоматическое резервное копирование WordPress с помощью CodeGuard

Хотите создать для своего сайта машину времени? Создание автоматической резервной копии вашего сайта WordPress в облаке - это первый шаг к защите вашего

Как легко массово удалить все комментарии WordPress

Вы хотите удалить все комментарии со своего сайта WordPress? Это редко, но в некоторых случаях владелец сайта может решить удалить все комментарии

Как ограничить длину комментария в WordPress

Комментарии WordPress поощряют обсуждение вашей темы. Однако вы можете обнаружить, что комментарии ниже определенной длины или выше определенной