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

Det är irriterande att av misstag stänga en page utan att ha submittat your comment eller med ett halvfyllt formulär. 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 alertar 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 användarupplevelsen och förhindra att visitorerna måste börja om från scratch.

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?

Låt oss anta att en användare skriver en comment på din blogg. De har redan skrivit en hel del rader, men de blir distraherade och glömmer att submit kommentarer. Nu, om de 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.

Du kan se den här funktionen i action på WordPress post editor vy. Om du har unsaved ändringar och du försöker lämna page eller close webbläsaren, kommer du att se en varning popup.

Låt oss se hur vi kan lägga till denna varningsfunktion till WordPress comments och andra formulär på din site:

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

För denna tutorial kommer vi att skapa ett custom plugin, men oroa dig inte, du kan också ladda ner plugin i slutet av denna tutorial för att installera på din webbplats.

Men för att få en bättre förståelse för koden ber vi dig att försöka skapa ditt eget plugin. Du kan göra detta på en lokal install eller en staging site först.

Låt oss komma igång.

Först måste du skapa en new folder på din dator och döpa den till confirm-leaving. Inuti mappen confirm-leaving måste du skapa en annan folder och döpa den till js.

Öppna nu en plain text editor som Notepad och skapa en new 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 den JavaScript-fil som detta plugin hämtar.

Skapa en new fil 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 måste 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 site med hjälp av en FTP-klient. Se vår guide om hur du använder FTP för att uploada WordPress-filer.

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

Efter det måste du logga in i WordPress admin area och besöka Plugins page.

Leta reda på tillägget ”Confirm Leaving” i listan över installerade plugins och klicka på länken ”activate” under det.

Det är all. You can now visit any post on your website, write some text in any field of the comment form, and then try leaving the page without submitting.

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

Lägga till varningen i andra formulär 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 WPForms plugin för att skapa ett kontaktformulär. Instruktionerna kommer att vara desamma om du använder ett annat plugin för kontaktformulär på din website.

Gå till den page där du har addat ditt kontaktformulär. För muspekaren till det första fältet i ditt kontaktformulär, högerklicka och välj sedan ”Inspect” i webbläsarens menu.

Locate the line that starts with the <form> tag. I formuläret taggen hittar du ID-attributet.

I det här exemplet är vårt formulärs ID:n wpforms-form-170. Du måste kopiera attributet ID:n.

Edit nu filen confirm-leaving.js och add to ID:n efter #commentform.

Se till att du separerar #commentform ditt formulärs ID:n med ett kommatecken. You will also need to add a # sign as a prefix to your form’s ID:n attribute.

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]

Save your changes and upload the file back to your website.

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 downloada confirm-leaving plugin här. Det riktar sig bara till formuläret comment, men du får gärna editera pluginet för att rikta det mot andra formulär.

Det var all; vi hoppas att den här artikeln hjälpte dig att visa popupen för bekräftelse av navigation för WordPress-formulär. Du kanske också vill kontrollera våra tillägg och tools för WordPress som du måste ha för webbplatser för företag eller läsa vår ultimata guide om hur du ökar trafiken till din blogg.

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.