Náhodné zavření stránky bez odeslání vyplněného formuláře je nepříjemné. Nedávno se nás jeden z našich uživatelů zeptal, zda je možné zobrazit vyskakovací okno, které potvrzuje akci uživatele na formulářích? Tento malý uživatel upozorňuje uživatele a brání jim v neúmyslném zavírání stránek s napůl vyplněnými formuláři.

V tomto tutoriálu vám ukážeme, jak zobrazit okno potvrzení zavření akce pro vaše formuláře. WordPress blog.

potvrzení uzavření okna na WordPress

Co je vyskakovací okno s potvrzením procházení

Předpokládejme, že uživatel píše komentář k vašemu blogu. již napsal spoustu řádků, ale ty se rozptýlí a zapomenou odeslat komentář. Nyní například kliknutím na odkaz bude ztracen veškerý obsah, který začal psát.

Potvrzení procházení jim dává šanci dokončit svůj komentář.

Tuto funkci můžete vidět z rozhraní editoru článků / stránek. Pokud máte nějaké neuložené změny a pokusíte se stránku opustit nebo zavřít prohlížeč, zobrazí se vyskakovací upozornění.

Podívejme se, jak můžeme tuto varovnou funkci přidat do komentářů WordPress a dalších formulářů na váš blog.

Jak zobrazit vyskakovací okno s potvrzením na nevyplněných formulářích ve WordPressu

Pro tento tutoriál, budeme vytvořit vlastní pluginJiž jsme vám ukázali, jak vytvořit WordPress Plugin rychle.

Začněme.

Nejprve musíte ve svém počítači vytvořit novou složku a pojmenovat ji „Potvrdit akci“. V této složce musíte vytvořit jinou složku a pojmenovat ji js.

Nyní otevřete textový editor, jako je Poznámkový blok, a vytvořte nový soubor. Uvnitř stačí vložit následující kód:

<?php
/**
 * Potvrďte akci
 * Název pluginu: Potvrďte akci
 * URI pluginu: https://blogpascher.com
 * Popis: Tento plugin zobrazuje uživatelům varování, když se pokusí zapomenout stisknout tlačítko Odeslat ve formuláři komentáře.
 * Verze: 1.0.0
 * Autor: Vaše JMÉNO
 * URI autora: https://blogpascher.com
 * Licence: GPL-2.0+
 * URI licence: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function bpc_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', 'bpc_confirm_leaving_js');

Tato funkce php jednoduše přidá soubor javascript na přední část vašeho webu.

Pokračujte a uložte tento soubor jako „potvrzovací akci.php" ve složce potvrzení akce "(Kořen vašeho pluginu).

Nyní musíme vytvořit soubor JavaScript, který tento plugin načte. Vytvořte nový soubor a vložte tento kód dovnitř:

jQuery (dokument) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkce askConfirm () {if (needToConfirm) {// Dejte si změna zprávy (funkce () {needToConfirm = true;});}) ("# commentform").

Přejmenujte tento soubor potvrdí-leaving.js", Přesuňte jej do" podsložky " js »Od« potvrzení akce".

Tento kód JavaScript zjistí, zda má uživatel ve formuláři komentářů neuložené změny. Pokud se uživatel pokusí stránku opustit, zobrazí se vyskakovací varování.

Vše, co musíte udělat, je nahrát soubor na server pomocí klienta oblíbené FTP. Poté už stačí pouze aktivovat plugin z palubní desky.

Akce potvrzují WordPress plugin

To je vše. Nyní můžete navštívit článek na svém webu, zkusit napsat komentář a poté kliknout na odkaz, všimnete si vyskakovacího okna podobného tomuto.

Potvrzení demo zavírání

Přidání upozornění na jiné formuláře WordPress

Stejný kód můžete použít k cílení na všechny formuláře na vašem webu WordPress. Zde vám ukážeme příklad na a kontaktní formulář.

V tomto příkladu používáme plugin WPForms vytvořit kontaktní formulář. Pokyny budou stejné, pokud použijete jiný kontaktní formulář plugin na svých stránkách.

Přejděte na stránku, kam jste přidali svůj kontaktní formulář. Najeďte myší na první pole v kontaktním formuláři, klikněte pravým tlačítkem a vyberte „ prozkoumat“, Přístup ke zdrojovému kódu.

obnovení kódu z textového pole WordPress

Najděte řádek, který začíná tagu <form>. Ve značce formuláře najdete atribut ID. V tomto příkladu je ID našeho formuláře formulaire . Musíte zkopírovat atribut ID.

Nyní upravte confirmer-leaving.js soubor a přidejte atribut ID za " #commentform Oddělena čárkou.

Váš kód by měl vypadat takto:

jQuery (dokument) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkce askConfirm () {if (needToConfirm) {// Dejte si Vlastní zpráva sem vrátit "Vaše neuložená data budou ztracena.";}} $ ( "# CommentForm, forma #") výměna (function () {needToConfirm = true;}).})

Uložte změny a nainstalovat plugin na svém blogu WordPress.

To je pro tento tutoriál vše. Doufám, že vám pomůže přidat do svého blogu vyskakovací potvrzovací okno. Pokud nerozumíte bodu, neváhejte se zeptat.