БЛОГ 2410

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

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

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

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

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

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

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

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

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

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

Давайте посмотрим, как мы можем добавить это предупреждение в комментарии 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.

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

Файловая структура плагина
Файловая структура плагина Изображение с сайта wpbeginner.com

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

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

Загрузка файлов плагинов на ваш сайт WordPress
Загрузка файлов плагинов на ваш сайт WordPress Изображение с сайта wpbeginner.com

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

Активировать плагин
Активировать плагин Изображение с сайта wpbeginner.com

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

всплывающее уведомление, предупреждающее пользователя о несохраненных изменениях
всплывающее уведомление, предупреждающее пользователя о несохраненных изменениях Изображение с сайта wpbeginner.com

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

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

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

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

Поиск идентификатора формы
Поиск идентификатора формы Изображение с сайта wpbeginner.com

Найдите строку, которая начинается с тега <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 | Блог 2410

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее