如何顯示WordPress表單的確認導航彈出窗口


意外關閉頁面而沒有提交您的評論或表單有一半填充很煩人。 最近,我們的一位用戶問我們是否可以向其讀者顯示確認的導航彈出窗口? 這個小小的彈出窗口會提醒用戶,並防止他們意外地留下一半未填寫的表單。 在本文中,我們將向您展示如何顯示WordPress表單的確認導航彈出窗口。

當用戶保留未提交的表單時,確認導航彈出窗口

什麼是確認導航彈出窗口?

假設用戶正在您的博客上發表評論。 他們已經寫了很多行,但是他們分心了,忘了發表評論。 現在,如果他們關閉瀏覽器,則該評論將丟失。

確認導航彈出窗口使他們有機會完成他們的評論。

您可以在WordPress帖子編輯器屏幕中看到此功能的運行情況。 如果您有未保存的更改,並且嘗試離開頁面或關閉瀏覽器,則將看到警告彈出窗口。

未保存的更改警告WordPress帖子編輯器中的彈出窗口

讓我們看看如何將這個警告功能添加到您站點上的WordPress註釋和其他表單中。

在WordPress中顯示未提交表單的確認導航彈出窗口

對於本教程,我們將創建一個自定義插件,但是不用擔心,您也可以在本教程末尾下載該插件以安裝在您的網站上。

但是,為了更好地理解代碼,我們將要求您嘗試創建自己的插件。 您可以先在本地安裝或登台站點上執行此操作。

讓我們開始吧。

首先,您需要在計算機上創建一個新文件夾並將其命名 confirm-leaving。 在confirm-leaving文件夾內,您需要創建另一個文件夾並將其命名為js。

現在打開一個純文本編輯器(如記事本)並創建一個新文件。 在內部,只需粘貼以下代碼:

這個php函數只是將JavaScript文件添加到您的網站的前端。

繼續將此文件另存為 confirm-leaving.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-leaving.js 在js文件夾中。

保存兩個文件後,文件夾結構應如下所示:

插件文件結構

現在,您需要使用FTP客戶端連接到WordPress網站。 請參閱我們的指南,了解如何使用FTP上傳WordPress文件。

連接後,您需要上傳 confirm-leaving 文件夾到 /wp-contents/plugins/ 網站上的文件夾。

將插件文件上傳到您的WordPress網站

之後,您需要登錄WordPress管理區域並訪問“插件”頁面。 在已安裝插件列表中找到“確認離開”插件,然後單擊其下方的“激活”鏈接。

激活插件

就這樣。 現在,您可以訪問網站上的任何帖子,在評論表單的任何字段中寫一些文字,然後嘗試不提交就離開頁面。 將會出現一個彈出窗口,警告您即將離開未保存更改的頁面。

彈出通知警告用戶有關未保存的更改

在WordPress中將警告添加到其他形式

您可以使用相同的代碼庫來定位WordPress網站上的任何表單。 在這裡,我們將向您展示一個使用它定位聯繫表單的示例。

在此示例中,我們使用WPForms插件創建聯繫表單。 如果您在網站上使用其他聯繫表格插件,則說明將相同。

轉到添加了聯繫表的頁面。 將鼠標移到聯繫表單的第一個字段中,右鍵單擊,然後從瀏覽器菜單中選擇“檢查”。

查找表格ID

找到以

標籤。 在表單標記中,您將找到ID屬性。

在此示例中,表單的ID為 wpforms-form-170。 您需要復制ID屬性。

現在編輯 confirm-leaving.js 文件並在之後添加ID屬性 #commentform

確保分開 #commentform 以及您的表單ID(帶逗號)。 您還需要添加 # 簽名作為表單ID屬性的前綴。

您的代碼現在將如下所示:

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表單的確認導航彈出窗口。 您可能還想嘗試這些針對WordPress初學者的8種最佳jQuery教程。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。