Náhodné zatvorenie stránky bez zadania vyplneného formulára je nepríjemné. Nedávno sa nás jeden z našich používateľov spýtal, či je možné zobraziť vyskakovacie okno, ktoré potvrdzuje činnosť používateľa vo formulároch? Toto malé upozornenie používateľov a bráni im v neúmyselnom zatváraní stránok pomocou poloplných formulárov.

V tomto návode vám ukážeme, ako zobraziť okno s potvrdením zatvorenia akcie pre vaše formuláre. WordPress blog.

Čo je vyskakovacie okno s potvrdením prehliadania

Predpokladajme, že používateľ píše komentár k vášmu blogu. už napísal dosť riadkov, ale rozptýlia sa a zabudnú uviesť komentár. Teraz napríklad kliknete na odkaz a stratí sa všetok obsah, ktorý začal písať.

Potvrdenie o prehliadaní im dáva príležitosť dokončiť svoj komentár.

Túto funkciu môžete vidieť z rozhrania editora článkov / stránok. Ak máte nejaké neuložené zmeny a pokúsite sa opustiť stránku alebo zavrieť prehliadač, zobrazí sa upozornenie na vyskakovacie okno.

Pozrime sa, ako môžeme túto varovnú funkciu pridať do komentárov WordPress a iných formulárov vo vašom blogu.

Ako zobraziť potvrdzovacie okno na nevyplnených formulároch v WordPress

Pre tento tutoriál, budeme vytvorte si vlastný doplnok. Už sme vám ukázali, ako vytvoriť a WordPress Plugin rýchlo.

Začnime.

Najskôr musíte vo svojom počítači vytvoriť nový priečinok a pomenovať ho „Potvrdiť akciu“. V tomto priečinku musíte vytvoriť ďalší priečinok a pomenovať ho js.

Teraz otvorte textový editor ako Poznámkový blok a vytvorte nový súbor. Do vnútra vložte nasledujúci kód:

<?php
/**
 * Potvrďte akciu
 * Názov doplnku: Potvrďte akciu
 * Identifikátor URI doplnku: https://blogpascher.com
 * Popis: Tento doplnok zobrazuje používateľom varovanie, keď zabudnú stlačiť tlačidlo Odoslať vo formulári komentára.
 * Verzia: 1.0.0
 * Autor: Vaše MENO
 * Identifikátor URI autora: https://blogpascher.com
 * Licencia: GPL-2.0+
 * Identifikátor URI licencie: 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');

Táto funkcia php jednoducho pridá súbor javascript na prednú časť vašej webovej stránky.

Pokračujte a uložte tento súbor ako „potvrdiť akciu“.php" v priečinku potvrdenie akcie "(Koreň vášho doplnku).

Teraz musíme vytvoriť súbor JavaScript, ktorý tento doplnok načíta. Vytvorte nový súbor a vložte tento kód dovnútra:

jQuery (dokument) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkcie askConfirm () {if (needToConfirm) {// Dajte si vlastné správa sem vrátiť "Vaše neuložené údaje sa stratia.";}} $ ( "# CommentForm") na výmenu (function () {needToConfirm = true;}).})

Premenujte tento súbor potvrdí-leaving.js", Presuňte ho do" podpriečinka " js "Z" potvrdenie akcie„.

Tento kód JavaScript zistí, či používateľ nemá uložené zmeny vo formulári komentárov. Ak sa používateľ pokúsi stránku opustiť, zobrazí sa pop-up varovanie.

Všetko, čo musíte urobiť, je nahrať súbor na server pomocou klienta obľúbené FTP. Potom už stačí iba aktivovať doplnok na vašom paneli.

To je všetko. Teraz môžete navštíviť článok na svojej webovej stránke, pokúsiť sa napísať komentár a potom kliknúť na odkaz, všimnete si vyskakovacie okno podobné tomuto.

Doplnenie varovania o ďalšie formuláre WordPress

Rovnaký kód môžete použiť na zacielenie všetkých formulárov na svojom webe WordPress. Tu vám ukážeme príklad na a Kontaktný formulár.

V tomto príklade používame doplnok WPForms vytvoriť a Kontaktný formulár. Pokyny budú rovnaké, ak použijete iný kontaktný formulár plugin na svojich stránkach.

Prejdite na stránku, na ktorú ste pridali svoje Kontaktný formulár. Presuňte kurzor myši na prvé pole v kontaktnom formulári, kliknite pravým tlačidlom myši a vyberte možnosť „ preskúmať“, Prístup k zdrojovému kódu.

Nájdite riadok, ktorý začína tagu <form>. V značke formulára nájdete atribút ID. V tomto príklade je ID nášho formulára formulaire . Musíte skopírovať atribút ID.

Teraz upravte confirmer-leaving.js súbor a pridajte atribút ID za „ #commentform Oddeľuje sa čiarkou.

Váš kód by mal vyzerať takto:

jQuery (dokument) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkcie askConfirm () {if (needToConfirm) {// Dajte si vlastné správa sem vrátiť "Vaše neuložené údaje sa stratia.";}} $ ( "# CommentForm, forma #") výmena (function () {needToConfirm = true;}).})

Uložte zmeny a nainštalovať plugin na svojom blogu WordPress.

To je pre tento návod všetko. Dúfam, že vám pomôže pridať do vášho blogu vyskakovacie potvrdzovacie okno. Ak nerozumiete bodu, neváhajte sa pýtať.