Come mostrare un popup di conferma navigazione per i moduli in WordPress

Non c'è niente di più frustrante che compilare un modulo WordPress, solo per premere accidentalmente il pulsante indietro e perdere tutto. Ci siamo passati tutti, ed è solitamente sufficiente per far desistere qualcuno immediatamente.

Per i proprietari di siti, quel piccolo intoppo può significare vendite perse e meno iscrizioni. I visitatori se ne andranno infastiditi e saranno molto meno propensi a tornare e riprovare.

La buona notizia? C'è una soluzione semplice: un popup di conferma navigazione. Questo semplice avviso offre agli utenti una seconda possibilità prima che lascino una pagina con un modulo non inviato.

In questa guida, ti mostreremo come aggiungere questa funzionalità ai tuoi moduli WordPress in modo da poter creare un'esperienza più fluida e aumentare i tassi di completamento dei tuoi moduli.

Cos'è un popup di conferma navigazione e perché ne hai bisogno?

Un popup di conferma navigazione è un avviso del browser che appare quando un utente con modifiche non salvate in un modulo tenta di lasciare una pagina web.

Probabilmente hai già visto questa funzionalità in azione nella schermata dell'editor di contenuti di WordPress. Se hai modifiche non salvate e provi a lasciare la pagina, appare un popup di avviso per impedirti di perdere il tuo lavoro.

Aggiungere questo ai tuoi moduli è un piccolo cambiamento con grandi benefici:

• Migliora l'esperienza utente: Salva i visitatori dalla frustrazione di perdere accidentalmente i loro progressi, dimostrando che apprezzi il loro tempo.
• Aumenta i tassi di conversione: Impedendo l'abbandono accidentale, dai agli utenti una seconda possibilità di completare il modulo, il che può aumentare i lead.
• Costruisce la fiducia dell'utente: Una funzionalità ponderata come questa dimostra professionalità e attenzione, il che può aiutare a costruire fedeltà e incoraggiare visite di ritorno.

Tenendo presente questo, aggiungiamo questo avviso ai commenti di WordPress e ad altri moduli sul tuo sito.

Ecco tutto ciò che tratteremo in questa guida:

• Metodo 1: Mostra un popup di conferma navigazione per moduli non inviati in WordPress
• Metodo 2: Aggiungi il popup di avviso ad altri moduli sul tuo sito WordPress
• Bonus: Migliora le prestazioni dei tuoi moduli WordPress
• Domande frequenti sui popup di conferma navigazione
• Guide aggiuntive per l'utilizzo dei moduli WordPress

Pronto? Iniziamo.

Metodo 1: Mostra un popup di conferma navigazione per moduli non inviati in WordPress

Questo metodo prevede la creazione di un plugin semplice e personalizzato.

Non preoccuparti se non hai mai codificato prima! Ti guideremo attraverso ogni fase del processo, ed è un ottimo modo per vedere come funzionano i plugin di WordPress.

Inoltre, puoi anche scaricare il plugin alla fine di questo tutorial per installarlo sul tuo sito web.

Tuttavia, ti consigliamo vivamente di creare il plugin da solo per capire meglio come funziona il codice. Puoi seguire una installazione locale o sito di staging per iniziare.

Innanzitutto, devi creare una nuova cartella sul tuo computer e chiamarla confirm-leaving. All'interno della cartella confirm-leaving, creerai un'altra cartella e la chiamerai js.

Ora, apriamo un editor di testo semplice come Blocco note e creiamo un nuovo file. All'interno, incolla semplicemente il seguente codice:

<?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
		
		

Questa funzione PHP utilizza wp_enqueue_script, che è il metodo ufficiale di WordPress per aggiungere JavaScript. Questa è la best practice perché aiuta a prevenire conflitti di script con altri plugin.

Ora, salva questo file come confirm-leaving.php all'interno della cartella principale confirm-leaving.

Ora, dobbiamo creare il file JavaScript che questo plugin sta caricando. Puoi farlo creando un nuovo file nel tuo editor di testo e incollando questo codice al suo interno:

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
		
		

Questo JavaScript rileva se un utente ha iniziato a compilare il modulo dei commenti. Se tenta di abbandonare la pagina prima di inviare, attiva il popup di avviso.

Procedi e salva questo file come confirm-leaving.js all'interno della cartella js che hai creato in precedenza.

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

Ora, devi connetterti al tuo sito WordPress utilizzando un client FTP. Per istruzioni passo-passo, puoi consultare la nostra guida su come utilizzare FTP per caricare file su WordPress per principianti.

Una volta connesso, dovrai caricare la cartella confirm-leaving nella cartella /wp-contents/plugins/ sul tuo sito web.

Dopodiché, dovrai accedere all'area amministrativa di WordPress e andare su 'Plugin'.

Da qui, dovresti vedere il plugin 'Confirm Leaving' nell'elenco dei plugin installati. Puoi quindi fare clic sul collegamento 'attiva' sotto di esso.

Fatto. Ora puoi visitare qualsiasi post sul tuo sito web, digitare qualcosa nel modulo dei commenti e quindi provare ad abbandonare la pagina.

Quindi, apparirà un popup che ti avviserà che hai modifiche non salvate.

Per motivi di sicurezza, i moderni browser web visualizzeranno il proprio messaggio di avviso generico (come "Lasciare il sito? Le modifiche apportate potrebbero non essere salvate.") invece del testo personalizzato dal codice. Lo scopo del codice è semplicemente quello di attivare questo prompt standard del browser.

Metodo 2: Aggiungi il popup di avviso ad altri moduli sul tuo sito WordPress

Puoi usare lo stesso codice per puntare a qualsiasi altro modulo sul tuo sito WordPress, come un modulo di contatto.

In questo esempio, stiamo puntando a un modulo creato con il plugin WPForms, ma questi passaggi funzioneranno se utilizzi un diverso plugin per moduli di contatto sul tuo sito web.

Non hai un modulo di contatto e vuoi crearne uno? Allora puoi consultare la nostra guida su come creare un modulo di contatto.

Su WPBeginner, utilizziamo WPForms per incorporare molti moduli diversi, tra cui il nostro modulo di contatto, il sondaggio annuale per i lettori e le richieste di migrazione. Se sei curioso riguardo allo strumento e a ciò che può fare, puoi consultare la nostra recensione completa di WPForms.

La prima cosa da fare è andare alla pagina in cui hai incorporato il tuo modulo di contatto.

Quindi, sposta il mouse sul primo campo del tuo modulo di contatto, fai clic con il pulsante destro del mouse e seleziona 'Ispeziona' dal menu del browser.

Da qui, dovrai 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, procedi e copia l'attributo ID.

Ora, apri il tuo file confirm-leaving.js per modificare il selettore jQuery. Dovrai aggiungere l'ID del tuo modulo subito dopo #commentform, separato da una virgola. Assicurati di aggiungere un prefisso # al tuo nuovo ID, proprio come ha il modulo dei commenti.

Il tuo codice ora apparirà così:

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
		
		

Se tutto sembra a posto, puoi salvare le modifiche al file confirm-leaving.js e caricarlo nuovamente sul tuo server, sovrascrivendo il file precedente.

Ora, puoi inserire qualsiasi testo in qualsiasi campo del tuo modulo di contatto e quindi provare a lasciare la pagina senza inviare il modulo. Apparirà un popup con un avviso che indica che hai modifiche non salvate.

📥 Download Plugin: Puoi scaricare il plugin confirm-leaving qui, quindi installa e attiva il plugin come al solito. Se hai bisogno di aiuto, puoi consultare la nostra guida su come installare un plugin WordPress.

Tieni presente che si rivolge al modulo dei commenti, ma puoi modificare il plugin per indirizzare il tuo modulo di registrazione utente, sondaggi, modulo di feedback, modulo di candidatura lavoro, o qualsiasi altro modulo.

Bonus: Migliora le prestazioni dei tuoi moduli WordPress

Dopo aver aggiunto il popup di conferma navigazione, è una buona idea monitorare quante volte gli utenti abbandonano i loro moduli. Conoscere questi dati può aiutarti a trovare e correggere i problemi che causano l'abbandono.

Uno dei migliori strumenti per tracciare l'abbandono dei moduli è MonsterInsights. È il miglior plugin di Google Analytics per WordPress. Il suo componente aggiuntivo Moduli (disponibile nella versione Pro) rende facile tracciare automaticamente le visualizzazioni e gli invii dei moduli.

In questo modo, puoi vedere come gli utenti interagiscono con i tuoi moduli direttamente dalla tua dashboard.

Su WPBeginner, utilizziamo MonsterInsights per tracciare tutte le nostre conversioni importanti, inclusi moduli, pulsanti e link di affiliazione. Dai un'occhiata alla nostra recensione completa di MonsterInsights per conoscere tutte le sue funzionalità.

Per maggiori dettagli, consulta la nostra guida su come tracciare e ridurre l'abbandono dei moduli.

Puoi anche eseguire test A/B split per vedere quale versione del tuo modulo funziona meglio. Ad esempio, potresti testare diversi stili di modulo o testo del pulsante per vedere cosa incoraggia più completamenti.

Ad esempio, potresti cambiare la formulazione del tuo popup di navigazione di conferma o personalizzare il tuo modulo. Analizzando i risultati, puoi determinare cosa mantiene gli utenti coinvolti e aiuta a ridurre i tassi di abbandono.

Thrive Optimize è il miglior plugin per questo compito. Ti permette di eseguire facilmente test A/B split senza alcuna codifica.

Per saperne di più, consulta la nostra guida su come eseguire test A/B split in WordPress.

Domande frequenti sui popup di conferma navigazione

L'aggiunta di questo codice rallenterà il mio sito web?

No, affatto. Il codice JavaScript è molto leggero e viene eseguito solo quando un utente tenta di abbandonare una pagina con un modulo modificato. Non avrà alcun impatto apprezzabile sulle prestazioni del tuo sito.

Posso cambiare il messaggio nel popup di conferma?

Purtroppo, no. Per motivi di sicurezza, i browser moderni non consentono più ai siti web di visualizzare un messaggio personalizzato nel popup di conferma. Mostreranno sempre un avviso generico e standard all'utente.

Questo popup di conferma funziona sui browser mobili?

Sì, l'evento onbeforeunload è supportato dalla maggior parte dei browser mobili moderni, inclusi Chrome e Safari sia su Android che su iOS. Il comportamento sarà lo stesso che su un desktop.

Guide aggiuntive per l'utilizzo dei moduli WordPress

Speriamo che questo articolo ti abbia aiutato a mostrare il popup di conferma della navigazione per i tuoi moduli WordPress.

Potresti anche voler consultare queste altre guide e scelte degli esperti:

• Come creare un modulo di contatto con destinatari multipli
• Come inviare email di conferma dopo l'invio di moduli WordPress
• Modi per utilizzare la logica condizionale nei tuoi moduli WordPress
• I migliori creatori di moduli online (scelte degli esperti)
• La guida definitiva all'uso dei moduli WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.