Hur man visar Bekräfta navigerings popup för formulär i WordPress

Oavsiktligt stänga en sida utan att skicka in din kommentar eller med en halvfylld blankett är irriterande. Nyligen frågade en av våra användare om det var möjligt att visa sina läsare en bekräftelse av navigerings popup? Dessa små lilla popup-varningsanvändare och förhindrar att de av misstag lämnar halvfylld och oanmäld form. I den här artikeln visar vi hur du ska visa bekräftelse på navigationspopup för WordPress-formulär.

Vad är Confirm Navigation Popup?

Låt oss anta att en användare skriver en kommentar på din blogg. De har redan skrivit en hel del rader, men de blir distraherade och glömmer att skicka in kommentarer. Nu om de stängde webbläsaren kommer kommentaren att gå vilse.

Bekräfta navigations popup ger dem chansen att avsluta sin kommentar.

Du kan se den här funktionen i åtgärd på WordPress-postredigeringsskärmen. Om du har olagrade ändringar, och du försöker lämna sidan eller stänga webbläsaren, så kommer du att se en varningspopp.

Låt oss se hur vi kan lägga till denna varningsfunktion i WordPress-kommentarer och andra formulär på din webbplats.

Visa Bekräfta navigerings popup för obesvarade blanketter i WordPress

För den här handledningen skapar vi ett anpassat plugin, men oroa dig inte, du kan också ladda ner pluginet i slutet av denna handledning för att installera på din webbplats.

För att du ska kunna förstå koden kommer vi dock att be att du försöker skapa ditt eget plugin. Du kan göra det på en lokal installering eller en platsplats först.

Låt oss börja.

Först måste du skapa en ny mapp på din dator och namnge den bekräfta-lämnande. Inom mappen Bekräfta lämnar måste du skapa en annan mapp och namnge den js.

Öppna nu en vanlig textredigerare som Anteckningsblock och skapa en ny fil. Innehåll klistra in följande kod:

  
Denna php-funktion lägger helt enkelt till en JavaScript-fil till framsidan av din webbplats. 
 
Fortsätt och spara den här filen som bekräfta-leaving.php inuti huvudbekräftelsemappen. 
 
Nu måste vi skapa JavaScript-filen som det här pluginet laddar. 
 
Skapa en ny fil och klistra in den här koden inuti den: 
 
 jQuery (dokument) .ready (funktion ($) $ (dokument) .ready (funktion () needToConfirm = false; window.onbeforeunload = askConfirm;); funktion askConfirm () om (needToConfirm) // Sätt din anpassat meddelande här returnerar "Din obefordrade data kommer att gå vilse."; $ ("# commentform"). ändra (funktion () needToConfirm = true;);) 
 
Denna JavaScript-kod upptäcker om användaren har olagrade ändringar i kommentarformuläret. Om en användare försöker navigera bort från sidan eller stänga fönstret, kommer det att visas en varningspopp. 
 
Du måste spara den här filen som bekräfta-leaving.js inuti mappen js. 
 
När du har sparat båda filerna så är det här din mappstruktur ska se ut: 
 
 
Nu måste du ansluta till din WordPress-webbplats med hjälp av en FTP-klient. Se vår guide om hur du använder FTP för att ladda upp WordPress-filer. 
 
När du är ansluten måste du ladda upp bekräfta-lämnande mapp till / wp-innehåll / plugins / mapp på din webbplats. 
 
 
Därefter måste du logga in på WordPress-administratörsområdet och besöka Plugins-sidan. Leta reda på "Bekräfta lämnar" -programmet i listan med installerade plugin-program och klicka på länken "aktivera" nedanför den. 
 
 
Det är allt. Du kan nu besöka något inlägg på din webbplats, skriva lite text i något fält i kommentarformuläret och försök sedan lämna sidan utan att skicka in. En popup skulle dyka upp och varna dig om att du ska lämna en sida med obehandlade ändringar. 
 
 
Lägga till varningen till andra formulär i WordPress
 
Du kan använda samma kodbas för att rikta in alla formulär på din WordPress-webbplats. Här kommer vi att visa dig ett exempel på att använda det för att rikta in en kontaktformulär. 
 
I det här exemplet använder vi WPForms plugin för att skapa en kontaktformulär. Anvisningarna kommer att vara desamma om du använder ett annat kontaktformulär på din webbplats. 
 
Gå till sidan där du har lagt till ditt kontaktformulär. Ta musen över till det första fältet i din kontaktformulär, högerklicka och välj sedan Inspektera från webbläsarmenyn. 
 
 
Leta upp linjen som börjar med  märka. I formtaggen hittar du ID-attributet. 
 
I detta exempel är vår formuljes ID wpforms-formen-170. Du måste kopiera ID-attributet. 
 
Redigera nu bekräfta-leaving.js fil och lägg till ID-attributet efter #commentform.
 
Se till att du skiljer #commentform och ditt formulärs ID med ett komma. Du måste också lägga till # logga in som prefix till din blanketts ID-attribut. 
 
Din kod kommer nu att se ut så här:
 
 jQuery (dokument) .ready (funktion ($) $ (dokument) .ready (funktion () needToConfirm = false; window.onbeforeunload = askConfirm;); funktion askConfirm () om (needToConfirm) // Sätt din anpassat meddelande här returneras "Din obefordrade data kommer att gå vilse."; $ ("# commentform, # wpforms-form-170") .ändring (funktion () needToConfirm = true;);) 
 
Spara dina ändringar och ladda upp filen till din webbplats. 
 
Nu kan du skriva in någon text i något fält i din kontaktformulär och försök sedan lämna sidan utan att skicka formuläret. En popup visas med en varning om att du har olagrade ändringar. 
 
Du kan ladda ner plugin för bekräftelse och lämnande här. Det riktar sig bara till formuläret, men ändå kan du redigera pluginet för att rikta in andra former. 
 
Det här är allt, vi hoppas att den här artikeln hjälpte dig att visa bekräftelse av navigations popup för WordPress-formulär. Du kanske också vill pröva dina 8 bästa jQuery-handledning för WordPress-nybörjare. 
 
Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.