Så här visar du popup för bekräftelse av navigation för formulär i WordPress

Att av misstag stänga en sida utan att skicka in din kommentar eller med ett halvfyllt formulär kan vara superfrustrerande. Senast frågade en av våra användare oss om det var möjligt att visa sina läsare en popup för bekräftelse av navigation.

Den här lilla popupen varnar användarna och förhindrar att de av misstag lämnar halvfyllda och oskickade formulär. Det är ett bra sätt att förbättra upplevelsen för användarna och förhindra att besökarna måste börja om från början.

Men om den här funktionen inte är rätt inställd kan den vara irriterande och störa din webbplats och göra användarna frustrerade. Du behöver ett tillförlitligt sätt att lägga till den på ett smidigt sätt och undvika dessa problem.

Det är därför vi vill visa dig hur du gör detta med hjälp av ett anpassat tillägg. Oroa dig inte, det är lättare än du tror!

I den här artikeln kommer vi att visa dig hur du visar popup för bekräftelse av navigation för WordPress formulär.

Vad är en popup för bekräftelse av navigation? Varför behöver du det?

Låt oss anta att en användare skriver en kommentar på din WordPress blogg. De har redan skrivit en hel del rader, men de blir distraherade och glömmer att skicka in kommentarer. Om de nu stänger sin webbläsare kommer kommentaren att gå förlorad.

Popupen för bekräftelse av navigation ger dem en chans att slutför sin comment.

Den här funktionen visas i działanie på vyn för redigeraren av WordPress inlägg. Om du har ändringar som inte sparats och försöker lämna sidan eller stänga webbläsaren visas en varningsfönsterruta.

Inställningar av en popup för bekräftelse av navigation kan förbättra användarupplevelsen, konverteringen och användarnas förtroende.

Så här gör du: Att ge användarna en utvald funktion visar att du bryr dig om dina användares upplevelse, vilket kan bidra till lojalitet och återkommande besök. Användare gillar oftare att fylla i formulär eller kommentera om de vet att de inte kommer att förlora sina framsteg.

Med detta i åtanke kommer vi att visa dig hur du lägger till denna utvalda funktion i WordPress kommentarer och andra formulär på din webbplats. Här är en snabb översikt över alla saker vi kommer att prata om i den här przewodniken:

Är du redo? Låt oss komma igång.

Visa popup för bekräftelse av navigation för ej inskickade formulär i WordPress

För denna poradnik kommer vi att skapa ett anpassat tillägg, men oroa dig inte. Du kan också ladda ner tillägget i slutet av denna handledning för att installera det på din webbplats.

För att få en bättre förståelse för koden ber vi dig dock att försöka skapa ditt eget tillägg. Du kan göra detta kl en lokal installation eller en webbplats först.

Först måste du skapa en ny mapp på din dator och döpa den till confirm-leaving. I mappen confirm-leaving skapar du en annan mapp och döper den till js.

Låt oss nu öppna en oformaterad textredigerare som Notepad och skapa en ny fil. Inuti klistrar du helt enkelt in följande kod:

[php]
<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://www.wpbeginner.com
 * 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://www.wpbeginner.com
 * 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
		
		
[/php]

Denna PHP-funktion addar helt enkelt en JavaScript-fil till front-enden på din website.

Gå vidare och save denna fil confirm-leaving .php i huvud confirm-leaving folder.

Nu måste vi skapa JavaScript-filen som detta tillägg hämtar. Du kan göra detta genom att skapa en ny fil i din textredigerare och klistra in den här koden i den:

[javascript]
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
		
		
[/javascript]

Denna JavaScript-kod upptäcker om användaren har unsaved ändringar i formuläret för kommentarer. Om en användare försöker navigera bort från page eller close fönstret visas en popup med en varning.

Du vill sedan spara den här filen som confirm-leaving.js i mappen js.

När du har saved båda filerna, är det så här din folder struktur ska gilla att se ut:

Nu måste du ansluta till din WordPress webbplats med hjälp av en FTP-klient. För steg-för-steg-instruktioner kan du se vår przewodnik om hur du använder FTP för att uppladare WordPress-filer.

När du har anslutit dig måste du uppladda mappen confirm-leaving till mappen/wp-contents/plugins/ på din webbplats.

Efter det vill du logga in på WordPress obszar administracyjny och gå till ”Tillägg”.

Härifrån bör du se tillägget ”Confirm Leaving” i listan över installerade tillägg. Du kan sedan klicka på länken ”aktivera” under den.

Det var allt. Du kan nu besöka vilket inlägg som helst på din webbplats, skriva lite text i vilket fält som helst i formuläret för kommentarer och sedan försöka lämna sidan utan att skicka in.

En popup visas som varnar you för att du är på väg att lämna en page med unsaved ändringar.

Lägg till varnings-popupen i andra formulär på din webbplats i WordPress

Du kan använda samma kodbas för att rikta in dig på alla formulär på din WordPress site. Här visar vi dig ett exempel på hur du använder den för att rikta in dig på ett kontaktformulär.

I det här exemplet använder vi tillägget WPForms för att skapa ett kontaktformulär. Instruktionerna kommer att vara desamma om du använder ett annat tillägg för kontaktformulär på din webbplats.

Det första du ska göra är att gå till den sida där du har lagt till ditt kontaktformulär. Sedan för du musen till det första fältet i ditt kontaktformulär, högerklickar och markerar sedan ”Inspektera” i menyn i webbläsaren.

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

När du har hittat märket, gå vidare och kopiera ID:n attribut.

Låt oss nu redigera filen confirm-leaving.js och lägga till attributet ID:n efter #commentform. Se bara till att du avgränsar #commentform ditt formulärs ID:n med ett kommatecken. Du måste också lägga till ett #-tecken som ett prefix till ditt formulärs ID:n-attribut.

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

[javascript]
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
		
		
[/javascript]

Om allt ser bra ut kan du spara dina ändringar och uppladda filen till din webbplats.

Nu kan du enter valfri text i valfritt fält i ditt Contact Form och sedan försöka lämna page utan att submit formuläret. En popup kommer att visas med en varning om att du har unsaved ändringar.

Du kan ladda ner tillägget confirm-leaving här och sedan installera och aktivera tillägget som vanligt. Om du behöver hjälp kan du gå igenom vår przewodnik om hur du installerar ett tillägg till WordPress.

Observera att det riktar sig till formuläret för kommentarer, men du kan redigera tillägget för att rikta in dig på din användares registreringsformulär, undersökningar, återkopplingsformulär, jobbansökningsformulär eller andra formulär.

Bonustips: Förbättra dina WordPress-formulärs prestanda

När du har lagt till popup-fönstret för bekräftelse av navigation är det en bra idé att spåra hur ofta användare överger sina formulär.

Att veta hur många som lämnar webbplatsen utan att ha slutfört den kan hjälpa dig att se hur väl din webbplats fungerar för dem. På så sätt kan du ta reda på vad som kan få dem att lämna och göra förbättringar.

Ett av de bästa verktygen för att spåra övergivna formulär är MonsterInsights.

Det är det bästa Google Analytics-tillägget, som gör det enkelt att se hur användare interagerar med dina formulär och var de tenderar att insticksprogram, allt från din WordPress kokpit.

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

Om något kan du också köra ett A / B split-test. Detta innebär att du testar olika versioner av dina formulär för att se vilken som utförs bättre.

Du kan till exempel ändra ordalydelsen i popup-fönstret för bekräftelse av navigation 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 antalet övergivna kunder.

Thrive Optimize är det bästa tillägget för denna uppgift. Det låter dig köra A/B-splittester utan någon kodning och håller dina data säkra.

Om du vill veta mer kan du läsa vår przewodnik om hur du gör A/B-splittester i WordPress.

Vi hoppas att den här artikeln hjälpte dig att visa popup-fönstret för bekräftelse av navigation för WordPress-formulär. Du kanske också vill kontrollera våra expertval av de bästa formulärbyggarna online och vår przewodnik om hur du lägger till bättre anpassade aviseringar.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.