Att oavsiktligt stänga en sida utan att skicka ditt halvfyllda formulär är irriterande. Nyligen frågade en av våra användare oss om det var möjligt att visa ett popup-fönster som bekräftar användarens åtgärd på formulär? Denna lilla lilla varning användare och förhindrar dem från att av misstag stänga sidor med halvfyllda formulär.

I den här handledningen kommer vi att visa dig hur du visar ett bekräftelsefönster för stängning för dina formulär. Wordpress blogg.

Vad är en popup för webbbekräftelse?

Antag att en användare skriver en kommentar på din blogg. han har redan skrivit många rader, men de blir distraherade och glömmer att skicka in kommentaren. Nu, till exempel genom att klicka på en länk, kommer allt innehåll som han har börjat skriva att gå förlorat.

Surfbekräftelsen ger dem en chans att slutföra sin kommentar.

Du kan se den här funktionen från artikel / sidredigerargränssnittet. Om du har ändringar som inte har sparats och du försöker stänga sidan eller stänga webbläsaren ser du en popup-varning.

Låt oss se hur vi kan lägga till den här varningsfunktionen på WordPress-kommentarer och andra formulär på din blogg.

Hur man visar en popup för bekräftelse på icke inlämnade formulär i WordPress

För denna handledning kommer vi skapa ett anpassat plugin. Vi har redan visat dig hur du skapar en Wordpress plugin snabbt.

Låt oss börja.

Först måste du skapa en ny mapp på din dator och ge den namnet "bekräfta-åtgärd". I den här mappen måste du skapa en annan mapp och ge den namnet js.

Öppna nu en textredigerare som Anteckningar och skapa en ny fil. Inuti klistrar du bara in följande kod:

<?php
/**
 * Bekräfta åtgärd
 * Pluginnamn: Bekräfta åtgärd
 * Plugin-URI: https://blogpascher.com
 * Beskrivning: Detta plugin visar en varning till användare när de försöker glömma att trycka på knappen Skicka i ett kommentarsformulär.
 * Version: 1.0.0
 * Författare: YourNAME
 * Författarens URI: https://blogpascher.com
 * Licens: GPL-2.0+
 * Licens-URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Bekräfta att lämna', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Denna php-funktion lägger helt enkelt till en JavaScript-fil i framsidan av din webbplats.

Fortsätt och spara den här filen som "bekräfta-åtgärd.php" i mappen bekräfta åtgärder "(Root of your plugin).

Nu måste vi skapa JavaScript-filen som detta plugin laddar. Skapa en ny fil och klistra in den här koden inuti:

jQuery (dokument) .ready (function ($) {$ (dokument) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}), funktion askConfirm () {if (needToConfirm) {// Sätt din anpassade meddelande här tillbaka "Dina data som inte sparats kommer att gå förlorade.";}} $ ( "# CommentForm") utbyte (function () {needToConfirm = true;}).})

Byt namn på den här filen bekräfta-leaving.js", Flytta den till" undermapp " js "Av" bekräfta åtgärder".

Den här JavaScript-koden upptäcker om användaren har sparat ändringar i kommentarformuläret. Om användaren försöker stänga sidan visar de en popup-varning.

Allt du behöver göra nu är att ladda upp din fil till din server med din klient FTP favoriter. Efter det är allt du behöver göra att aktivera plugin från din instrumentpanel.

Det är allt. Du kan nu besöka en artikel på din webbplats, försök att skriva en kommentar och klicka sedan på en länk, du kommer att märka en popup som liknar den här.

Tillägg av varningen på andra WordPress-formulär

Du kan använda samma kod för att rikta in alla formulär på din WordPress-webbplats. Här kommer vi att visa dig ett exempel på en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP.

I det här exemplet använder vi plugin WPForms att skapa en kontakt~~POS=TRUNC formulär~~POS=HEADCOMP. Instruktionerna kommer att vara desamma om du använder en annan kontaktformulär plugin på din webbplats.

Gå till sidan där du lade till din kontakt~~POS=TRUNC formulär~~POS=HEADCOMP. Flytta musen över det första fältet i ditt kontaktformulär, högerklicka och välj sedan " inspektera“, För att komma åt källkoden.

Hitta raden som börjar med taggen <form>. I formuläret hittar du ID-attributet. I det här exemplet är ID: t för vårt formulär formulaire . Du måste kopiera ID-attributet.

Redigera nu confirmer-leaving.js fil och lägg till ID-attributet efter " #commentform Separerad med komma.

Din kod ska se ut så här:

jQuery (dokument) .ready (function ($) {$ (dokument) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}), funktion askConfirm () {if (needToConfirm) {// Sätt din anpassade meddelande här tillbaka "Dina data som inte sparats kommer att gå förlorade.";}} $ ( "# CommentForm, form #") utbyte (function () {needToConfirm = true;}).})

Spara ändringarna och installera plugin på din Wordpress-blogg.

Det är det för denna handledning. Hoppas det hjälper dig att lägga till popup-bekräftelsefönster i din blogg. Tveka inte att ställa frågor om du inte förstår en punkt.