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

Chiudere accidentalmente una pagina senza inviare il commento o con un modulo compilato a metà può essere molto frustrante. Recentemente, un nostro utente ci ha chiesto se fosse possibile mostrare ai suoi 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.

Tuttavia, se questa caratteristica non è impostata correttamente, può essere fastidiosa e disturbare il sito, frustrando gli utenti. È necessario un modo affidabile per aggiungerla senza problemi ed evitare questi problemi.

Ecco perché vogliamo mostrarvi come farlo utilizzando un plugin personalizzato. Non preoccupatevi, è più facile di quanto pensiate!

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

Cos’è un popup di conferma della navigazione? Perché ne avete bisogno?

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

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

Questa caratteristica è mostrata in azione nella schermata dell’editor di pubblicazioni di WordPress. Se le modifiche non sono state salvate e si cerca di lasciare la pagina o di chiudere il browser, viene visualizzato un popup di attenzione.

L’impostazione di un popup di conferma della navigazione può migliorare l’esperienza dell’utente, i tassi di conversione e la sua fiducia.

Ecco come: Dare agli utenti una caratteristica di attenzione dimostra che avete a cuore l’esperienza dei vostri utenti, il che può contribuire a promuovere la fedeltà e le visite di ritorno. Gli utenti sono più propensi a completare moduli o commenti se sanno che non perderanno i loro progressi.

Per questo motivo, vi mostreremo come aggiungere questa caratteristica di attenzione ai commenti di WordPress e ad altri moduli sul vostro sito. Ecco una rapida panoramica di tutto ciò di cui parleremo in questa guida:

Pronti? Iniziamo.

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

In questa esercitazione creeremo un plugin personalizzato, ma non preoccupatevi. Potete anche scaricare il plugin alla fine di questa guida 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.

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

Ora, apriamo un editor di testo come Notepad e creiamo un nuovo file. All’interno, incollare 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 è necessario creare il file JavaScript che il plugin sta caricando. È possibile farlo creando un nuovo file nell’editor di testo e incollando questo codice al suo interno:

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

Si dovrà poi 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ì:

Ora è necessario collegarsi al sito WordPress utilizzando un client FTP. Per istruzioni passo passo, potete consultare la nostra guida su come usare FTP per caricare i file di WordPress.

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

Dopodiché, accedete all’area di amministrazione di WordPress e dirigetevi verso “Plugin”.

Da qui, si dovrebbe vedere il plugin “Confirm Leaving” nell’elenco dei plugin installati. Si può quindi fare clic sul link “attiva” sotto di esso.

Tutto-in-uno. Ora potete visitare qualsiasi pagina del vostro sito web, scrivere del testo in qualsiasi campo del modulo di commento e poi provare a lasciare la pagina senza inviare.

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

Aggiungete il popup di attenzione ad altri moduli del vostro sito 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 sul vostro sito web utilizzate un altro plugin per i moduli di contatto.

La prima cosa da fare è andare alla pagina in cui è stato aggiunto il modulo di contatto. Quindi, si porta il mouse sul primo campo del modulo di contatto, si fa clic con il pulsante destro del mouse e si seleziona “Ispeziona” dal menu del browser.

Da qui, si dovrà individuare la riga che inizia con il tag <form> per trovare l’attributo ID. In questo esempio, l’ID del nostro modulo è wpforms-form-170.

Una volta trovato il tag, copiare l’attributo ID.

Ora, modifichiamo il file confirm-leaving.js e aggiungiamo 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]

Se tutto sembra a posto, si possono salvare le modifiche e caricare il file sul 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 conferma-parte qui, quindi installarlo e attivarlo come di consueto. Se avete bisogno di aiuto, potete consultare la nostra guida su come installare un plugin per WordPress.

Si noti che il plugin si rivolge al modulo di commento, ma è possibile modificarlo per indirizzare il modulo di registrazione dell’utente, i sondaggi, il modulo di feedback, il modulo di domanda di lavoro o qualsiasi altro modulo.

Suggerimento bonus: migliorare le prestazioni dei moduli di WordPress

Dopo aver aggiunto il popup di conferma della navigazione, è bene tenere traccia della frequenza con cui gli utenti abbandonano i moduli.

Sapere quante persone abbandonano il sito senza aver terminato il lavoro può aiutarvi a capire quanto il vostro sito stia funzionando per loro. In questo modo è possibile scoprire quali sono le cause dell’abbandono e apportare miglioramenti.

Uno dei migliori strumenti per tracciare l’abbandono dei moduli è MonsterInsights.

È il miglior plugin di Google Analytics, che consente di vedere facilmente come gli utenti interagiscono con i moduli e dove tendono a spegnersi, il tutto-in-uno dal cruscotto di WordPress.

Per maggiori dettagli, consultate la nostra guida su come monitorare e ridurre l’abbandono dei moduli.

Semmai, è possibile eseguire un A/B split test. Ciò significa provare diverse versioni dei vostri moduli per vedere quale ha un rendimento migliore.

Ad esempio, si può modificare la formulazione del popup di conferma della navigazione o personalizzare il modulo. Analizzando i risultati, si può determinare ciò che mantiene gli utenti impegnati e aiuta a ridurre i tassi di abbandono.

Thrive Optimize è il miglior plugin per questo compito. Consente di eseguire split test A/B senza alcuna codifica e mantiene i dati al sicuro.

Per saperne di più, potete fare riferimento alla nostra guida su come effettuare gli split test A/B in WordPress.

Speriamo che questo articolo vi abbia aiutato a mostrare il popup di conferma della navigazione per i moduli di WordPress. Potreste anche voler selezionare le nostre verifiche sui migliori builder di moduli online e la nostra guida su come aggiungere notifiche personalizzate migliori.

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