Как показать всплывающее окно подтверждения для форм в 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

Вы хотите, чтобы в WordPress отображались самые популярные записи по дням, неделям, месяцам и за все время? Популярные сообщения позволяют вашим посетителям

Как создать приветственную форму в WordPress

Вы хотите добавить Welcome Gate на свой сайт WordPress? Welcome Gates - одна из самых эффективных методик построения списков на рынке. Недавно один из наших пользователей

Как легко отображать код на вашем сайте WordPress

Вы хотите, чтобы код отображался в сообщениях блога WordPress? Если вы попытались добавить код в виде обычного текста, WordPress не отобразит его правильно. WordPress

Как правильно настроить Google AMP на своем сайте WordPress

Вы хотите установить Google AMP на свой сайт WordPress? Ускоренные мобильные страницы или AMP - это способ ускорить загрузку вашего сайта на мобильных устройствах.