Avviso modulo WordPress JavaScript: tutorial sicuro

Un avviso modulo WordPress JavaScript può impedire che un visitatore perda dati inseriti in un modulo quando chiude la scheda, ricarica la pagina o apre un altro indirizzo. La soluzione usa l’evento beforeunload, supportato dai browser moderni, e si attiva solo dopo una modifica reale nei campi. L’avviso visualizzato non può contenere un testo personalizzato: per motivi di sicurezza, Chrome, Firefox, Safari e gli altri browser mostrano un messaggio generico. Il codice va caricato in modo corretto tramite il tema child o un piccolo plugin personalizzato.

Come funziona l’avviso prima di abbandonare un modulo WordPress

L’evento JavaScript beforeunload viene eseguito quando l’utente sta per lasciare una pagina, ricaricarla o chiudere la scheda. Se il modulo contiene dati non ancora inviati, lo script richiede al browser di mostrare una finestra di conferma.

Un avviso modulo WordPress JavaScript efficace deve rispettare tre condizioni:

  • Si attiva solo quando l’utente ha modificato almeno un campo.
  • Si disattiva quando il modulo viene inviato correttamente.
  • Non compare quando l’utente visita normalmente una pagina senza aver scritto nulla.

I browser moderni non permettono più di impostare liberamente il testo della finestra. Anche se il codice assegna una frase personalizzata alla proprietà returnValue, il browser mostra generalmente un messaggio standard.

La protezione non è assoluta su smartphone. Alcuni sistemi operativi mobili possono terminare il browser senza attivare beforeunload, quindi l’evento non deve essere considerato un sistema di salvataggio automatico dei dati.

Come aggiungere il codice JavaScript in WordPress

Il metodo più ordinato consiste nel creare un file JavaScript nel tema child e caricarlo con wp_enqueue_script(). Modificare direttamente il tema principale è sconsigliato perché gli aggiornamenti possono cancellare le personalizzazioni.

Passo 1: creare il file JavaScript

Nel tema child crea una cartella chiamata js, se non esiste già, e al suo interno crea il file avviso-modulo.js.

Inserisci nel file questo codice:

(function () {
'use strict';

var moduloModificato = false;
var moduli = document.querySelectorAll('form');

if (!moduli.length) {
return;
}

moduli.forEach(function (modulo) {
var campi = modulo.querySelectorAll(
'input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), textarea, select'
);

campi.forEach(function (campo) {
campo.addEventListener('input', function () {
moduloModificato = true;
});

campo.addEventListener('change', function () {
moduloModificato = true;
});
});

modulo.addEventListener('submit', function () {
moduloModificato = false;
});
});

window.addEventListener('beforeunload', function (evento) {
if (!moduloModificato) {
return;
}

evento.preventDefault();
evento.returnValue = '';
});
})();

Il selettore considera i campi di testo, le aree di testo e i menu a discesa. I pulsanti di invio, reset e azione non vengono trattati come contenuti da proteggere.

L’evento input intercetta la digitazione nei campi testuali, mentre change rileva le modifiche ai menu a discesa e ad altri controlli. La variabile moduloModificato diventa false al momento dell’invio, evitando un avviso quando il modulo sta già partendo.

Passo 2: caricare lo script dal tema child

Apri il file functions.php del tema child e aggiungi questo codice:

<?php
function backdigit_avviso_modulo_script() {
wp_enqueue_script(
'backdigit-avviso-modulo',
get_stylesheet_directory_uri() . '/js/avviso-modulo.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_avviso_modulo_script');

get_stylesheet_directory_uri() punta alla cartella del tema child, mentre l’ultimo parametro true chiede a WordPress di caricare il file prima della chiusura del documento HTML. Il file viene caricato in tutte le pagine del sito, ma il codice termina subito quando non trova alcun modulo.

Dopo aver salvato functions.php, svuota eventuali sistemi di cache presenti in WordPress, nel plugin di ottimizzazione o nel servizio CDN. Un vecchio file JavaScript memorizzato nella cache può impedire di vedere subito le modifiche.

Come limitare l’avviso a una pagina o a un modulo

Caricare lo script ovunque è generalmente accettabile per un sito piccolo, ma una pagina con molti script può beneficiare di un caricamento più mirato. WordPress permette di usare is_page() per limitare lo script a una pagina specifica.

<?php
function backdigit_avviso_modulo_script() {
if (is_page('contatti')) {
wp_enqueue_script(
'backdigit-avviso-modulo',
get_stylesheet_directory_uri() . '/js/avviso-modulo.js',
array(),
'1.0.0',
true
);
}
}
add_action('wp_enqueue_scripts', 'backdigit_avviso_modulo_script');

In questo esempio lo script viene caricato nella pagina con lo slug contatti. Puoi sostituire contatti con lo slug reale della pagina che contiene il modulo.

Il codice JavaScript osserva tutti gli elementi form presenti nella pagina. Se vuoi proteggere un solo modulo, assegna una classe specifica, per esempio modulo-da-proteggere, e sostituisci questa riga:

var moduli = document.querySelectorAll('form');

con questa:

var moduli = document.querySelectorAll('form.modulo-da-proteggere');

La classe deve essere inserita nell’elemento HTML del modulo oppure nelle impostazioni del plugin usato per costruirlo. In questo modo un modulo di ricerca o un modulo per filtri temporanei non genera un avviso inutile.

Come verificare che l’avviso funzioni correttamente

Apri la pagina del modulo in una finestra normale del browser e modifica almeno un campo. Prova poi a ricaricare la pagina oppure a digitare un altro indirizzo nella barra del browser: il browser dovrebbe mostrare una finestra di conferma generica.

Esegui anche queste verifiche:

  • Apri la pagina senza compilare il modulo e ricaricala: non deve apparire alcun avviso.
  • Inserisci un testo, poi elimina manualmente il testo: lo script considera comunque il modulo modificato.
  • Compila il modulo e invialo: dopo l’invio non dovrebbe comparire l’avviso durante il caricamento della pagina successiva.
  • Seleziona un’opzione in un menu a discesa e prova a uscire: il controllo change deve attivare la protezione.
  • Verifica il comportamento su Chrome, Firefox, Safari e Microsoft Edge.

Il codice impedisce soltanto l’abbandono accidentale della pagina; non conserva i valori inseriti. Se il browser viene chiuso forzatamente o il dispositivo perde alimentazione, i dati possono andare persi.

Compatibilità con i plugin per moduli e gli invii AJAX

Il codice funziona con i moduli HTML standard e con molti plugin WordPress che mantengono un normale elemento form. I moduli inviati tramite AJAX richiedono invece attenzione, perché la pagina potrebbe non ricaricarsi e l’evento submit potrebbe essere gestito dal plugin.

Se il plugin esegue un invio AJAX, il flag potrebbe essere azzerato troppo presto oppure restare attivo anche dopo un invio riuscito. In questo caso è necessario collegare l’azzeramento di moduloModificato all’evento di successo specifico del plugin, usando la documentazione ufficiale del componente installato.

Non aggiungere un avviso a ogni modulo senza verificare l’esperienza utente. Un modulo di ricerca, un filtro prodotti o un campo per una newsletter breve possono rendere fastidiosa la richiesta di conferma, mentre il controllo è più utile per moduli lunghi, richieste di preventivo e procedure con molti dati.

Per maggiore affidabilità, usa sempre una versione aggiornata di WordPress, del tema child e del plugin che gestisce il modulo. Il codice JavaScript deve essere testato anche dopo aggiornamenti del plugin, perché una modifica alla struttura HTML o al sistema di invio può cambiare il comportamento dell’avviso.

Un avviso modulo WordPress JavaScript protegge dalle uscite accidentali, ma non sostituisce il salvataggio automatico o una funzione di bozza lato server.

Potrebbe interessarti anche:

FAQ

No, i browser moderni mostrano un messaggio generico per l’evento beforeunload e ignorano il testo personalizzato per motivi di sicurezza.

No, lo script imposta l’avviso solo dopo una modifica rilevata in un campo del modulo.

Inserisci il codice nel file functions.php del tema child oppure in un plugin personalizzato, evitando il tema principale.

Può funzionare, ma l’evento di successo AJAX deve azzerare il flag JavaScript; il collegamento dipende dal plugin utilizzato.

No, l’avviso evita soltanto l’uscita accidentale e non salva automaticamente i dati inseriti.

Altri articoli di questa serie:

PDF Strumenti PDF gratis Nel browser, senza upload Apri gli strumenti