Contact Form 7: come portare il focus sul campo con errore in WordPress

Chi utilizza WordPress per gestire un sito web sa bene quanto sia importante offrire un’esperienza utente fluida e accessibile. Uno degli strumenti più diffusi per la creazione di moduli di contatto è Contact Form 7 (CF7), plugin storico e versatile che permette di realizzare form personalizzati in pochi minuti.

Tuttavia, nonostante la sua popolarità, CF7 presenta un piccolo limite: quando un utente compila un form in maniera errata (ad esempio dimenticando un campo obbligatorio o inserendo un’email in formato non valido), il plugin porta il focus in cima al modulo, invece che sul campo specifico che ha generato l’errore.

Questo comportamento sarebbe molto utile, in quanto permetterebbe all’utente di individuare immediatamente l’errore commesso, correggerlo, e migliorare l’esperienza utente complessiva del tuo sito web. Invece, il comportamento attuale del plugin può creare confusione, soprattutto nei form più lunghi, e ridurre l’usabilità.

In questo articolo analizzeremo il problema, vedremo perché accade e proporremo una soluzione pratica per portare il focus sul campo con errore in Contact Form 7.

Il problema del focus in Contact Form 7

Quando un form viene inviato con errori di validazione, CF7:

• evidenzia i campi errati con la classe .wpcf7-not-valid;
• mostra un messaggio di errore accanto al campo;
• sposta automaticamente il focus in cima al modulo.

Dal punto di vista dell’utente, questo comportamento non è ottimale:

• chi compila un form lungo deve scorrere manualmente per trovare il campo sbagliato;
• chi ha difficoltà visive o motorie rischia di non accorgersi subito dell’errore;
• l’esperienza complessiva risulta meno accessibile e meno intuitiva.

In termini di user experience (UX) e accessibilità, questo è un punto critico. Un form dovrebbe guidare l’utente passo passo, riducendo al minimo la frustrazione.

Analisi del comportamento

Per capire come intervenire, è utile analizzare il funzionamento interno di CF7:

• alla validazione fallita, il plugin lancia l’evento JavaScript wpcf7invalid;
• i campi errati ricevono la classe .wpcf7-not-valid;
• il focus viene spostato sul contenitore del form, non sul campo specifico.

Questo significa che possiamo intercettare l’evento wpcf7invalid e sovrascrivere il comportamento di default, forzando il focus sul primo campo con errore.

La soluzione: JavaScript personalizzato

La soluzione consiste nell’aggiungere un piccolo script JavaScript che, nel momento il cui viene caricata la pagina web contente il form con errori:

1. individua il primo campo con la classe .wpcf7-not-valid;
2. porta il focus su quel campo;
3. opzionalmente, effettua lo scroll automatico per renderlo visibile.

Codice di esempio

Tutto questo si traduce nel seguente codice JavaScript

// Individuo il primo campo con la classe .wpcf7-not-valid:
var firstError = document.querySelector('.wpcf7-not-valid');

// Se è stato trovato un campo con la classe .wpcf7-not-valid:
if (firstError) {
    setTimeout(function() {
        // Porto il focus su quel campo:
        firstError.focus();
        // Scrollo la pagina fino ad evidenziare il campo errato:
        firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
        console.log("Focus forzato su:", firstError);
    }, 2000);   // Timeout che permette le elaborazioni da parte di CF7
}

Perché funziona

• Il setTimeout con 2000 ms di delay assicura che il codice venga eseguito dopo che CF7 ha applicato le classi di errore.
• querySelector('.wpcf7-not-valid') individua il primo campo errato.
• focus() porta il cursore direttamente sul campo.
• scrollIntoView() garantisce che l’utente lo veda, anche se si trova più in basso nella pagina.

Inserimento del codice in WordPress

Per mantenere il sito ordinato e facilmente gestibile, conviene inserire il codice in un file JavaScript esterno, ad esempio custom.js, e caricarlo tramite functions.php del tema child.

E’ estremamamente conveniente fare tutte le modifiche e le personalizzazioni di un tema WordPress all’interno di un tema child. In questa pagina è spiegato come implementare il tema child sul tuo sito web.

Passaggi

1. Crea la cartella /js/ nel tuo tema child.
2. Crea in questa cartella il file custom.js con il codice sopra riportato.
3. Aggiungi nel file functions.php del tema child:

function my_enqueue_custom_js() {
    wp_enqueue_script(
        'my-custom-js',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array('jquery'),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'my_enqueue_custom_js');

In questo modo, ogni modifica futura al comportamento del form potrà essere gestita direttamente editando custom.js, senza toccare più il functions.php.

Benefici della soluzione

Implementare questa modifica porta diversi vantaggi:

• Migliore usabilità: l’utente viene guidato subito al campo errato.
• Accessibilità: chi utilizza screen reader o ha difficoltà visive beneficia di un flusso più chiaro.
• Riduzione degli abbandoni: meno frustrazione = più probabilità che il form venga completato.
• SEO indiretto: Google valuta positivamente i siti con buona UX e accessibilità, quindi anche piccoli miglioramenti possono contribuire al ranking.

Conclusioni

Il problema del focus nei form di Contact Form 7 è un dettaglio che spesso passa inosservato, ma che può avere un impatto significativo sull’esperienza utente.

Con poche righe di JavaScript e una corretta integrazione in WordPress, è possibile portare il focus direttamente sul campo con errore, migliorando accessibilità, usabilità e soddisfazione dell’utente.

In un web sempre più competitivo, curare questi aspetti fa la differenza tra un form che scoraggia e uno che converte.

Se gestisci un sito WordPress con CF7, ti consiglio di implementare subito questa soluzione: semplice, efficace e a prova di futuro.