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

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

подтверждение закрытия окна на WordPress

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

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

Подтверждение просмотра дает им возможность завершить свой комментарий.

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

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

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

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

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

Сначала вам нужно создать новую папку на вашем компьютере и назвать ее «confirm-action». В этой папке вам нужно создать другую папку и назвать ее js.

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

<?php
/**
 * Подтвердить действие
 * Название плагина: Подтвердить действие
 * URI плагина: https://blogpascher.com.
 * Описание: Этот плагин показывает предупреждение пользователям, когда они забывают нажать кнопку «Отправить» в форме комментария.
 * Версия: 1.0.0
 * Автор: ВашеИМЯ
 * URI автора: https://blogpascher.com.
 * Лицензия: GPL-2.0+.
 * URI лицензии: http://www.gnu.org/licenses/gpl-2.0.txt.
 */
 
функция bpc_confirm_leaving_js() {

     wp_enqueue_script('Подтвердить выход', плагины_url('js/confirm-leaving.js', __FILE__), array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

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

Продолжайте и сохраните этот файл как «confirm-action.php" в папке подтвердить действие "(Корень вашего плагина).

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

JQuery (документ) .ready (функция ($) {$ (документ) .ready (функция () {needToConfirm = ложь; window.onbeforeunload = askConfirm;}); функция askConfirm () {если (needToConfirm) {// Поместите свой пользовательские сообщения здесь вернуться "Ваши несохраненные данные будут потеряны.";}} $ ( "# CommentForm") обмен (функция () {needToConfirm = истина;}).})

Переименовать этот файл подтвердить-leaving.js", Переместите в" подпапку " js «Из» подтвердить действие".

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

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

Действие подтвердить WordPress плагин

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

закрытие демо-подтверждение

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

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

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

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

восстановление кода из текстового поля WordPress

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

Теперь отредактируйте confirmer-leaving.js файл и добавьте атрибут ID после " #commentform Разделяется запятой.

Ваш код должен выглядеть так:

JQuery (документ) .ready (функция ($) {$ (документ) .ready (функция () {needToConfirm = ложь; window.onbeforeunload = askConfirm;}); функция askConfirm () {если (needToConfirm) {// Поместите свой пользовательские сообщения здесь вернуться "Ваши несохраненные данные будут потеряны.";}} $ ( "# CommentForm, форма #") обмен (функция () {needToConfirm = TRUE;}).})

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

Это все для этого урока. Надеюсь, это поможет вам добавить всплывающее окно подтверждения в свой блог. Не стесняйтесь задавать вопросы, если вам что-то непонятно.