Come mostrare il popup di conferma della navigazione per i moduli in WordPress

Chiudere accidentalmente una pagina senza inviare il proprio commento o con un modulo compilato a metà è fastidioso. Recentemente, uno dei nostri utenti ci ha chiesto se fosse possibile mostrare ai lettori un popup di conferma della navigazione.

Questo piccolo popup avvisa gli utenti e impedisce loro di lasciare accidentalmente moduli non compilati e non inviati. È un buon modo per migliorare l’esperienza dell’utente ed evitare che i visitatori debbano ricominciare da capo.

In questo articolo vi mostreremo come mostrare il popup di conferma della navigazione per i moduli di WordPress.

Che cos’è un popup di conferma della navigazione?

Supponiamo che un utente stia scrivendo un commento sul vostro blog. Ha già scritto un bel po’ di righe, ma si distrae e dimentica di inviare i commenti. Ora, se chiude il browser, il commento andrà perso.

Il popup di conferma della navigazione dà loro la possibilità di terminare il commento.

È possibile vedere questa funzione in azione nella schermata dell’editor di post di WordPress. Se le modifiche non sono state salvate e si tenta di lasciare la pagina o di chiudere il browser, verrà visualizzato un popup di avviso.

Vediamo come aggiungere questa funzione di avviso ai commenti di WordPress e ad altri moduli del vostro sito:

Mostrare il popup di conferma della navigazione per i moduli non inviati in WordPress

Per questa esercitazione, creeremo un plugin personalizzato, ma non preoccupatevi, potete anche scaricare il plugin alla fine di questa esercitazione per installarlo sul vostro sito web.

Tuttavia, per una migliore comprensione del codice, vi chiediamo di provare a creare il vostro plugin. Potete farlo prima su un’installazione locale o su un sito di staging.

Cominciamo.

Per prima cosa, è necessario creare una nuova cartella sul computer e chiamarla confirm-leaving. All’interno della cartella confirm-leaving, è necessario creare un’altra cartella e chiamarla js.

Ora aprite un editor di testo semplice come Notepad e create un nuovo file. All’interno, incollate semplicemente il seguente codice:

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

Questa funzione PHP aggiunge semplicemente un file JavaScript al front-end del vostro sito web.

Salvare il file confirm-leaving.php all’interno della cartella principale confirm-leaving.

Ora dobbiamo creare il file JavaScript che questo plugin sta caricando.

Creare un nuovo file e incollarvi questo codice:

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

Questo codice JavaScript rileva se l’utente ha effettuato modifiche non salvate nel modulo dei commenti. Se l’utente tenta di abbandonare la pagina o di chiudere la finestra, viene visualizzato un popup di avviso.

È necessario salvare questo file come confirm-leaving.js all’interno della cartella js.

Dopo aver salvato entrambi i file, la struttura delle cartelle dovrebbe apparire così:

A questo punto, è necessario collegarsi al sito WordPress utilizzando un client FTP. Consultate la nostra guida su come utilizzare FTP per caricare i file di WordPress.

Una volta collegati, è necessario caricare la cartella confirm-leaving in /wp-contents/plugins/ la cartella del proprio sito web.

Successivamente, è necessario accedere all’area di amministrazione di WordPress e visitare la pagina del plugin.

Individuare il plugin “Confirm Leaving” nell’elenco dei plugin installati e fare clic sul link “activate” sotto di esso.

Questo è tutto. Ora potete visitare un qualsiasi post del vostro sito web, scrivere un testo in un qualsiasi campo del modulo di commento e poi provare a lasciare la pagina senza inviare il messaggio.

Verrà visualizzato un popup che avverte che si sta per lasciare una pagina con modifiche non salvate.

Aggiunta dell’avviso ad altri moduli in WordPress

È possibile utilizzare la stessa base di codice per indirizzare qualsiasi modulo del vostro sito WordPress. Qui vi mostriamo un esempio di utilizzo per indirizzare un modulo di contatto.

In questo esempio, utilizziamo il plugin WPForms per creare un modulo di contatto. Le istruzioni sono le stesse anche se si utilizza un altro plugin per i moduli di contatto sul proprio sito web.

Andate alla pagina in cui avete aggiunto il modulo di contatto. Passare il mouse sul primo campo del modulo di contatto, fare clic con il tasto destro del mouse e selezionare “Ispeziona” dal menu del browser.

Individuare la riga che inizia con il tag <form>. Nel tag form, si trova l’attributo ID.

In questo esempio, l’ID del nostro modulo è wpforms-form-170. È necessario copiare l’attributo ID.

Ora modificare il file confirm-leaving.js e aggiungere l’attributo ID dopo #commentform.

Assicurarsi di separare #commentform dall’ID del modulo con una virgola. È inoltre necessario aggiungere un segno # come prefisso all’attributo ID del modulo.

Il codice sarà ora simile a questo:

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

Salvate le modifiche e caricate il file sul vostro sito web.

Ora è possibile inserire qualsiasi testo in qualsiasi campo del modulo di contatto e poi provare a lasciare la pagina senza inviare il modulo. Verrà visualizzato un popup con l’avviso che le modifiche non sono state salvate.

È possibile scaricare il plugin di conferma della partenza qui. Si rivolge solo al modulo dei commenti, ma si può modificare il plugin per indirizzare altri moduli.

Questo è tutto; speriamo che questo articolo vi abbia aiutato a mostrare il popup di navigazione di conferma per i moduli di WordPress. Potreste anche voler dare un’occhiata ai nostri plugin e strumenti WordPress indispensabili per i siti aziendali o leggere la nostra guida definitiva su come aumentare il traffico del vostro blog.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.