At ved et uheld lukke en side uden at indsende din halvfyldte formular er irriterende. For nylig spurgte en af ​​vores brugere os, om det var muligt at vise et pop op-vindue, der bekræfter brugerhandling på formularer? Denne lille lille alarm bruger og forhindrer dem i at lukke sider ved halvfyldte formularer ved et uheld.

I denne vejledning viser vi dig, hvordan du viser et lukkevindue for bekræftelse af handling for dine formularer. WordPress blog.

Hvad er en popup til browsingbekræftelse

Antag at en bruger skriver en kommentar til din blog. han har allerede skrevet en hel række linjer, men de bliver distraheret og glemmer at indsende kommentaren. Ved at klikke på et link for eksempel, går alt det indhold, som han er begyndt at skrive, tabt.

Browsebekræftelsen giver dem en chance for at udfylde deres kommentar.

Du kan se denne funktion fra grænsefladen til artikel / side-editor. Hvis du har ændringer, der ikke er gemt, og du prøver at lukke siden eller lukke browseren, vil du se en pop op-advarsel.

Lad os se, hvordan vi kan tilføje denne advarselfunktion på WordPress-kommentarer og andre former på din blog.

Sådan vises en bekræftelses-popup på ikke-indsendte formularer i WordPress

Til denne tutorial vil vi oprette et tilpasset plugin. Vi har allerede vist dig, hvordan du opretter en WordPress plugin hurtigt.

Lad os starte.

Først skal du oprette en ny mappe på din computer og navngive den "bekræft-handling". I denne mappe skal du oprette en anden mappe og navngive den js.

Åbn nu en teksteditor som Notesblok, og opret en ny fil. Indvendig skal du bare indsætte følgende kode:

<?php
/**
 * Bekræft handling
 * Pluginnavn: Bekræft handling
 * Plugin-URI: https://blogpascher.com
 * Beskrivelse: Dette plugin viser en advarsel til brugere, når de prøver at glemme at trykke på send-knappen på en kommentarformular.
 * Version: 1.0.0
 * Forfatter: YourNAME
 * Forfatter-URI: https://blogpascher.com
 * Licens: GPL-2.0+
 * Licens-URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
funktion bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Bekræft forlader', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Denne php-funktion tilføjer simpelthen en javascript-fil til forsiden af ​​dit websted.

Fortsæt og gem denne fil som "bekræft-handling.php" i mappen bekræfte handling "(Rod af dit plugin).

Nu skal vi oprette den JavaScript-fil, som dette plugin indlæser. Opret en ny fil og indsæt denne kode inde:

jQuery (dokument) .ready (funktion ($) {$ (dokument) .ready (funktion () {needToConfirm = false; window.onbeforeunload = askConfirm;}) funktion askConfirm () () () () () () () () () Følgende er et eksempel på, hvordan du gør dette.

Omdøb denne fil bekræfte-leaving.js", Flyt det til" undermappe " js "Af" bekræfte handling".

Denne JavaScript-kode registrerer, om brugeren har ændringer, der ikke er gemt i kommentarformularen. Hvis brugeren forsøger at lukke siden, viser de en pop op-advarsel.

Alt hvad du skal gøre nu er at uploade din fil til din server ved hjælp af din klient FTP-favoritter. Derefter er alt hvad du skal gøre, at aktivere pluginet fra dit dashboard.

Det er alt. Du kan nu besøge en artikel på dit websted, prøv at skrive en kommentar og derefter klikke på et link, du vil bemærke en popup svarende til denne.

Tilføjelse af advarslen på andre WordPress-formularer

Du kan bruge den samme kode til at målrette mod alle formularer på dit WordPress-websted. Her vil vi vise dig et eksempel på en Kontaktformular.

I dette eksempel bruger vi plugin'et WPForms at oprette en Kontaktformular. Instruktionerne vil være de samme, hvis du bruger en anden plugin til kontaktformular på dit websted.

Gå til siden, hvor du tilføjede din Kontaktformular. Før musen hen over det første felt i din kontaktformular, højreklik, og vælg derefter " inspicere“, For at få adgang til kildekoden.

Find den linje, der begynder med tagget <form>. I formtagget finder du ID-attributten. I dette eksempel er ID for vores formular formulaire . Du skal kopiere ID-attributten.

Rediger nu confirmer-leaving.js fil og tilføj ID-attributten efter " #commentform Adskilt af et komma.

Din kode skal se sådan ud:

jQuery (dokument) .ready (funktion ($) {$ (dokument) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funktion askConfirm () {if (needToConfirm) {// Sæt din brugerdefinerede besked her vende tilbage "Dine gemte data går tabt.";}} $ ( "# CommentForm, formular #") udveksling (function () {needToConfirm = true;}).})

Gem dine ændringer og installer dit plugin på din WordPress blog.

Det er det til denne tutorial. Håber det hjælper dig med at tilføje pop op-bekræftelsesvindue til din blog. Tøv ikke med at stille spørgsmål, hvis du ikke forstår et punkt.