Hur man visar bekräftelsefönster för navigering för formulär i WordPress

Det finns inget mer frustrerande än att fylla i ett WordPress-formulär, bara för att av misstag trycka på bakåtknappen och förlora allt. Vi har alla varit där – och det räcker oftast för att någon ska ge upp direkt.

För webbplatsägare kan den lilla missen innebära förlorad försäljning och färre registreringar. Besökare kommer att lämna irriterade och är mycket mindre benägna att komma tillbaka och försöka igen.

De goda nyheterna? Det finns en enkel lösning: en popup för bekräftelse av navigering. Denna enkla varning ger användarna en andra chans innan de lämnar en sida med ett ej inskickat formulär.

I den här guiden visar vi hur du lägger till den här funktionen i dina WordPress-formulär så att du kan skapa en smidigare upplevelse och öka dina formulärslutförandefrekvenser.

Vad är en bekräftelse-navigeringspopup och varför behöver du den?

En bekräftelse-navigeringspopup är en varning i webbläsaren som visas när en användare med osparade ändringar i ett formulär försöker lämna en webbsida.

Du har förmodligen sett den här funktionen i aktion på skärmen för WordPress innehållsredigerare. Om du har osparade ändringar och försöker lämna sidan, visas en varningspopup för att förhindra att du förlorar ditt arbete.

Att lägga till detta i dina egna formulär är en liten förändring med stora fördelar:

• Förbättrar användarupplevelsen: Det sparar besökare från frustrationen att oavsiktligt förlora sina framsteg, vilket visar att du värdesätter deras tid.
• Ökar konverteringsgraden: Genom att förhindra oavsiktlig avslutning ger du användarna en andra chans att slutföra formuläret, vilket kan öka antalet leads.
• Bygger användarnas förtroende: En genomtänkt funktion som denna visar professionalism och omsorg, vilket kan bidra till att bygga lojalitet och uppmuntra till återbesök.

Med det i åtanke, låt oss lägga till denna varning till dina WordPress-kommentarer och andra formulär på din webbplats.

Här är allt vi kommer att gå igenom i den här guiden:

• Metod 1: Visa popup för bekräftelse av navigering för ej inskickade formulär i WordPress
• Metod 2: Lägg till varningspopupen till andra formulär på din WordPress-webbplats
• Bonus: Förbättra prestandan för dina WordPress-formulär
• Vanliga frågor om bekräftelse-navigeringspopups
• Ytterligare guider för att använda WordPress-formulär

Redo? Låt oss börja.

Metod 1: Visa popup för bekräftelse av navigering för ej inskickade formulär i WordPress

Denna metod innebär att skapa ett enkelt, anpassat plugin.

Oroa dig inte om du aldrig har kodat tidigare! Vi guidar dig genom varje steg i processen, och det är ett utmärkt sätt att se hur WordPress-plugins fungerar.

Dessutom kan du också ladda ner pluginet i slutet av den här handledningen för att installera det på din webbplats.

Vi rekommenderar dock starkt att du skapar pluginet själv för att bättre förstå hur koden fungerar. Du kan följa med på en lokal installation eller staging-webbplats först.

Först måste du skapa en ny mapp på din dator och namnge den confirm-leaving. Inuti mappen confirm-leaving skapar du en annan mapp och namnger den js.

Nu, låt oss öppna en vanlig textredigerare som Anteckningar och skapa en ny fil. Klistra helt enkelt in följande kod inuti:

<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://014.leahstevensyj.workers.dev
 * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
 * Version:     1.0.0
 * Author:      WPBeginner
 * Author URI:  https://014.leahstevensyj.workers.dev
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

function wpb_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', 'wpb_confirm_leaving_js');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Denna PHP-funktion använder wp_enqueue_script, vilket är den officiella WordPress-metoden för att lägga till JavaScript. Detta är bästa praxis eftersom det hjälper till att förhindra skriptkonflikter med andra plugins.

Spara nu den här filen som confirm-leaving.php inuti huvudmappen confirm-leaving.

Nu behöver vi skapa JavaScript-filen som detta plugin laddar. Du kan göra detta genom att skapa en ny fil i din textredigerare och klistra in den här koden i den:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Denna JavaScript upptäcker om en användare har börjat fylla i kommentarsformuläret. Om de försöker lämna sidan innan de skickar in, utlöses varningspopupen.

Spara filen som confirm-leaving.js i mappen js som du skapade tidigare.

Efter att ha sparat båda filerna, bör din mappstruktur se ut så här:

Nu måste du ansluta till din WordPress-webbplats med en FTP-klient. För steg-för-steg-instruktioner kan du se vår guide om hur man använder FTP för att ladda upp WordPress-filer.

När du är ansluten måste du ladda upp mappen confirm-leaving till mappen /wp-contents/plugins/ på din webbplats.

Därefter vill du logga in i WordPress administratörsområde och gå till 'Plugins'.

Härifrån bör du se pluginet 'Confirm Leaving' i listan över installerade plugins. Du kan sedan klicka på länken 'aktivera' under det.

Det var allt. Du kan nu besöka vilket inlägg som helst på din webbplats, skriva något i kommentarsformuläret och sedan försöka lämna sidan.

Sedan kommer en popup att visas som varnar dig för att du har osparade ändringar.

Av säkerhetsskäl kommer moderna webbläsare att visa sitt eget generiska varningsmeddelande (som "Lämna webbplatsen? Ändringar du har gjort kanske inte sparas.") istället för den anpassade texten från koden. Kodens syfte är helt enkelt att utlösa denna standardprompt i webbläsaren.

Metod 2: Lägg till varningspopupen till andra formulär på din WordPress-webbplats

Du kan använda samma kod för att rikta in dig på andra formulär på din WordPress-webbplats, till exempel ett kontaktformulär.

I det här exemplet riktar vi oss mot ett formulär skapat med pluginet WPForms, men dessa steg fungerar även om du använder ett annat kontaktformulärsplugin på din webbplats.

Har du inget kontaktformulär och vill skapa ett? Då kan du kolla in vår guide om hur man skapar ett kontaktformulär.

På WPBeginner använder vi WPForms för att bädda in många olika formulär, inklusive vårt kontaktformulär, årliga läsarundersökning och migrationsförfrågningar. Om du är nyfiken på verktyget och vad det kan göra, kan du gå till vår kompletta WPForms-recension.

Det första du ska göra är att gå till sidan där du har bäddat in ditt kontaktformulär.

Sedan för du musen över det första fältet i ditt kontaktformulär, högerklickar och väljer sedan 'Inspektera' från webbläsarens meny.

Härifrån vill du lokalisera raden som börjar med taggen <form> för att hitta ID-attributet. I det här exemplet är vårt formulärs ID wpforms-form-170.

När du har hittat taggen, kopiera attributet ID.

Öppna nu din confirm-leaving.js -fil för att redigera jQuery-väljaren. Du måste lägga till ditt formulärs ID direkt efter #commentform, separerat med ett kommatecken. Se till att lägga till ett # prefix till ditt nya ID, precis som kommentarsformuläret har.

Din kod kommer nu att se ut så här:

jQuery(document).ready(function($) { 
 
$(document).ready(function() {
    needToConfirm = false;
    window.onbeforeunload = askConfirm;
});
 
function askConfirm() {
    if (needToConfirm) {
        // Put your custom message here
        return "Your unsaved data will be lost.";
    }
}
 
$("#commentform,#wpforms-form-170").change(function() {
    needToConfirm = true;
});
 
 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		

Om allt ser bra ut kan du spara dina ändringar i filen confirm-leaving.js och ladda upp den tillbaka till din server och skriva över den gamla filen.

Nu kan du ange valfri text i vilket fält som helst i ditt kontaktformulär och sedan försöka lämna sidan utan att skicka formuläret. Ett popup-fönster visas med en varning om att du har osparade ändringar.

📥 Plugin-nedladdning: Du kan ladda ner pluginet confirm-leaving här, installera och aktivera sedan pluginet som vanligt. Om du behöver hjälp kan du gå igenom vår guide om hur man installerar ett WordPress-plugin.

Notera att den riktar sig till kommentarsformuläret, men du kan redigera pluginet för att rikta in dig på ditt användarregistreringsformulär, enkäter, feedbackformulär, jobbansökningsformulär, eller andra formulär.

Bonus: Förbättra prestandan för dina WordPress-formulär

Efter att du har lagt till bekräftelse-navigeringspopupen är det en bra idé att spåra hur ofta användare överger sina formulär. Att känna till dessa data kan hjälpa dig att hitta och åtgärda problem som får folk att lämna.

Ett av de bästa verktygen för att spåra formuläravhopp är MonsterInsights. Det är det bästa Google Analytics-pluginet för WordPress. Dess Forms-tillägg (tillgängligt i Pro-versionen) gör det enkelt att automatiskt spåra formulärvisningar och inskickningar.

På så sätt kan du se hur användare interagerar med dina formulär direkt från din instrumentpanel.

På WPBeginner använder vi MonsterInsights för att spåra alla våra viktiga konverteringar, inklusive formulär, knappar och affiliate-länkar. Läs vår kompletta MonsterInsights-recension för att lära dig om alla dess funktioner.

För mer information, se vår guide om hur man spårar och minskar övergivna formulär.

Du kan också köra A/B-tester för att se vilken version av ditt formulär som presterar bättre. Du kan till exempel testa olika formulärstilar eller knapptexter för att se vad som uppmuntrar till fler slutföranden.

Till exempel kan du ändra formuleringen i din bekräftelsedialogruta för navigering eller anpassa ditt formulär. Genom att analysera resultaten kan du avgöra vad som håller användarna engagerade och hjälper till att minska avhoppsfrekvensen.

Thrive Optimize är det bästa pluginet för denna uppgift. Det låter dig köra A/B-delningstester enkelt utan någon kodning.

För att lära dig mer, se vår guide om hur man gör A/B-split-testning i WordPress.

Vanliga frågor om bekräftelse-navigeringspopups

Kommer tillägget av denna kod att sakta ner min webbplats?

Nej, inte alls. JavaScript-koden är mycket lättviktig och körs bara när en användare försöker lämna en sida med ett ändrat formulär. Det kommer inte att ha någon märkbar inverkan på din webbplats prestanda.

Kan jag ändra meddelandet i bekräftelsepopupen?

Tyvärr, nej. Av säkerhetsskäl tillåter moderna webbläsare inte längre webbplatser att visa ett anpassat meddelande i bekräftelsepopupen. De kommer alltid att visa en generell, standardvarning till användaren.

Fungerar denna bekräftelsepopup på mobilwebbläsare?

Ja, händelsen onbeforeunload stöds av de flesta moderna mobilwebbläsare, inklusive Chrome och Safari på både Android och iOS. Beteendet kommer att vara detsamma som på en stationär dator.

Ytterligare guider för att använda WordPress-formulär

Vi hoppas att den här artikeln hjälpte dig att visa popup-fönstret för bekräftelse av navigering för dina WordPress-formulär.

Du kanske också vill kolla in dessa andra guider och experttips:

• Hur man skapar ett kontaktformulär med flera mottagare
• Hur man skickar bekräftelsemejl efter WordPress-formulärinlämningar
• Sätt att använda villkorsstyrd logik i dina WordPress-formulär
• Bästa onlineformulärbyggare (expertval)
• Den ultimata guiden för att använda WordPress-formulär

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.