Perché dovresti parlare di campi dei form, focus e preset quando potresti infilarti in un bel bagno caldo con le paperelle?

E perché passare tempo tra checkbox e pulsanti radio quando là fuori potrebbe aspettarti un caffè con George Clooney?

Domande sensate, eh. Almeno finché un form non inizia a farti perdere richieste.

Il punto è questo: se lavori con il web, con Divi o come freelance, i form non sono un pezzetto appoggiato lì tanto per.

Spesso sono il punto esatto in cui una persona decide se scriverti, chiedere un preventivo, iscriversi… oppure mollare tutto perché “non si capisce dove devo cliccare”.

Un modulo fatto bene non deve solo essere carino. Deve dare fiducia, guidare l’utente e restare coerente con l’identità del sito.

E quando devi gestire più form, magari su un sito del cliente, avere strumenti più ordinati ti evita una bella collezione di piccole rogne. Quelle invisibili, ma fastidiose.

Le migliori, praticamente.

Ecco, nell'articolo di oggi voglio farti vedere le nuove opzioni che Divi ha introdotto per personalizzare moduli di contatto e campi di inserimento dati.

Molto brevemente: ora puoi gestire in modo più coerente lo stile dei campi compilabili, comprese caselle di spunta, pulsanti radio e stati interattivi come hover e checked (roba che in divi 4 ce la sognavamo).

Tradotto: puoi decidere meglio come appare un campo quando l’utente ci clicca dentro, quando ci passa sopra con il cursore o quando seleziona una checkbox.

Qui non parliamo solo di grafica carina. Parliamo di far capire meglio cosa sta succedendo dentro il form.

In più, i gruppi di campi supportano i preset.

Quindi puoi definire uno stile una volta sola e riutilizzarlo su più moduli. Se hai mai modificato a mano dieci form simili cercando di farli sembrare parenti stretti e non vicini di casa finiti lì per sbaglio, capisci subito il vantaggio.

C’è anche un nuovo modulo per Contact Form 7, utile se usi già CF7 ma vuoi gestire l’aspetto dei form direttamente con le opzioni di design di Divi.

Un flusso di lavoro pratico per form coerenti su tutto il sito

Avere nuove opzioni è utile. Però, se le usi a caso, diventano solo nuovi pulsanti da cliccare.

E di pulsanti da cliccare, diciamolo, ne abbiamo già abbastanza.

Il punto è inserirle in un processo semplice e ripetibile. Se lavori su un sito Divi con più form — di contatto, per preventivi, per newsletter, di login, per richieste di informazioni — puoi seguire questo ordine.

1. Definisci prima i preset di campo. Parti dagli elementi più comuni: campi di testo, email, textarea, select, checkbox e radio. Imposta font, padding, bordi, colori e sfondi. Così crei una base visiva coerente prima di costruire i singoli moduli.
2. Configura gli stati interattivi. Lavora su focus, hover e checked. Il focus è fondamentale: quando l’utente entra in un campo, deve capirlo subito. Qui l’estetica c’entra, ma il punto vero è l’usabilità. Ed è ancora più importante per chi naviga con la tastiera.
3. Usa il modulo Contact Form 7 quando serve. Se il progetto usa CF7 per form più complessi, puoi inserirli dentro Divi e applicare lo stesso sistema di stile. Così eviti di scrivere CSS extra solo per farli sembrare parte dello stesso sito.

Questo ordine — preset, stati interattivi, integrazione con CF7 — ti aiuta a ridurre il lavoro ripetitivo.

E soprattutto ti permette di aggiornare lo stile in futuro senza dover riaprire ogni singolo modulo come se stessi cercando un calzino perso in lavatrice.

Se lavori con altri collaboratori o con clienti che modificano il sito in autonomia, avere una base centralizzata riduce anche gli errori nel tempo.

Nuove opzioni per i campi del modulo

Partiamo da una cosa semplice: prima le impostazioni dei campi nei moduli Divi non erano sempre così coerenti.

Alcuni moduli permettevano di personalizzare certi dettagli, altri no. Alcuni gestivano meglio il focus, altri ti lasciavano più lavoro manuale.

Ora i moduli basati su form hanno un sistema più ordinato. Le opzioni di design sono organizzate in gruppi più chiari e sono disponibili in modo più uniforme tra i diversi tipi di campo.

Questo significa meno interventi a mano, meno CSS scritto solo per tappare buchi e più controllo direttamente dal builder.

Che detta così suona tecnico, lo so. In pratica: lavori più pulito e rischi meno incoerenze.

Checklist per form più chiari e accessibili

Un form ben fatto non deve solo “stare bene nel layout”. Deve essere leggibile, comprensibile e facile da usare.

Anche per chi naviga da tastiera, ha difficoltà visive o semplicemente va di fretta.

Prima di considerare finito un modulo, controlla questi punti.

• Focus visibile: ogni campo deve mostrare chiaramente quando è selezionato. Non affidarti solo a un cambio di colore quasi invisibile. Usa un bordo, un outline o un contrasto sufficiente.
• Errori chiari: se qualcosa non va, dillo bene. “Campo non valido” aiuta poco. Meglio indicare cosa correggere: email mancante, numero troppo corto, campo obbligatorio non compilato.
• Contrasto adeguato: testo, etichette e segnaposto devono essere leggibili. Il placeholder, cioè il testo dentro al campo, spesso è troppo chiaro. Controllalo.
• Etichette sempre visibili: non usare il segnaposto al posto dell’etichetta. Quando l’utente scrive, il segnaposto sparisce. E a quel punto può non ricordare più cosa stava compilando.
• Spaziatura coerente: margini e padding regolari rendono il form più leggibile. Definiscili nei preset invece di sistemarli campo per campo.
• Stato selezionato evidente: checkbox e radio button devono far capire subito cosa è stato scelto. Meglio usare anche segni grafici, non solo differenze di colore.
• Ordine di tabulazione logico: prova a navigare il form usando il tasto Tab. Il percorso deve seguire l’ordine visivo dei campi. Se salta da una parte all’altra, c’è qualcosa da sistemare.
• Feedback dopo l’invio: dopo il click su “Invia”, il form deve dire cosa è successo: messaggio inviato, errore, campo da correggere, problema di rete. Il silenzio totale è misterioso solo nei film. In un form è scomodo.

Questi controlli valgono sia per i moduli nativi di Divi sia per quelli costruiti con Contact Form 7.

Farlo subito ti evita correzioni più pesanti quando il progetto è già avanti.

Campi di testo, checkbox e pulsanti radio: ora si gestiscono separatamente

Prima c’era un gruppo generico chiamato Campo. Dentro ci finivano impostazioni diverse, non sempre adatte a tutti i tipi di elemento.

Il risultato? Personalizzazione possibile, sì, ma con qualche limite e un po’ di pazienza extra.

Ora Divi divide le opzioni in tre gruppi distinti: campi di testo, caselle di controllo e pulsanti di scelta.

Così puoi lavorare su ogni tipo di campo in modo più mirato.

Per esempio, puoi dare ai campi di testo un certo bordo e una certa spaziatura, alle checkbox uno stile più evidente e ai pulsanti di scelta un aspetto coerente con il resto del sito.

Senza trattare tutto come se fosse la stessa cosa, perché non lo è.

Sono state aggiunte anche impostazioni specifiche per le etichette e per il testo segnaposto, cioè quel testo che appare dentro il campo prima che l’utente scriva qualcosa.

Se poi combini queste opzioni con le Impostazioni Componibili di Divi, puoi spingerti ancora oltre e intervenire sui sotto-elementi del modulo.

E se serve davvero, puoi sempre aggiungere CSS personalizzato. Ma almeno non parti già con il cacciavite in mano.

Il modulo per Contact Form 7

Il nuovo modulo Contact Form 7 permette di selezionare un form CF7 e inserirlo dentro un’area di contenuto Divi.

Da lì puoi personalizzarne l’aspetto usando le impostazioni di design dedicate ai campi e i preset di Divi.

È utile soprattutto quando hai già form costruiti con Contact Form 7, magari perché ti servono logiche più articolate, integrazioni specifiche o configurazioni già presenti sul sito.

Il vantaggio pratico è questo: non devi scegliere tra “uso CF7 perché mi serve” e “uso Divi perché voglio controllo visivo”.

Puoi far lavorare i due strumenti insieme, mantenendo il form coerente con il resto del layout.

Prima di consegnare un sito, però, fai sempre una verifica. Controlla i messaggi di errore, le conferme di invio, i campi obbligatori e il comportamento su mobile.

CF7 può variare in base alla configurazione del form e agli altri plugin attivi.

Opzioni più uniformi tra i diversi moduli

Divi include molti moduli basati su form, ma fino a poco tempo fa non tutti offrivano lo stesso livello di controllo.

Alcuni permettevano di gestire il focus, altri no. Alcuni avevano opzioni per le etichette, altri erano più limitati.

Ora input, checkbox e radio condividono un set di impostazioni più coerente.

Questo rende più semplice mantenere lo stesso stile tra un form di contatto, un modulo newsletter, un form di login o un modulo più articolato.

Il vantaggio pratico è questo: se stai costruendo un sito con più punti di contatto, puoi evitare l’effetto “ogni form vive nel suo piccolo mondo”.

E sì, l’utente se ne accorge quando un sito è coerente. Magari non te lo scrive in chat con gli applausi, ma lo sente.

Indicatore delle impostazioni modificate

Nel pannello delle impostazioni compare ora un punto blu quando un’opzione è stata modificata o quando un gruppo contiene modifiche attive.

Sembra un dettaglio piccolo, ma nella pratica aiuta parecchio. Quando apri un modulo e devi capire cosa è stato personalizzato, il punto blu ti fa vedere subito dove guardare.

Insieme al filtro per cercare le impostazioni modificate, diventa più facile orientarsi dentro elementi complessi.

Meno tempo a chiedersi “ma qui cosa avevo cambiato?”, più tempo a sistemare davvero le cose.

Nuovi stili interattivi: focus, hover e checked

Qui arriviamo a una parte che sembra piccola.

Invece pesa parecchio.

Chi usa Divi conosce già lo stato :hover: è l’aspetto che un elemento assume quando l’utente ci passa sopra con il cursore.

Ora questa logica si estende meglio anche ad altri stati dei campi del form.

Il primo è :focus. Succede quando un campo è attivo, cioè quando l’utente ci clicca dentro o ci arriva usando la tastiera.

Per esempio: clicchi nel campo “email” e il bordo diventa blu.

Il secondo è :checked. Si attiva quando una checkbox o un pulsante radio viene selezionato.

Per esempio: spunti una casella e questa cambia colore o mostra un segno più evidente.

Questi stati si chiamano anche pseudo-classi, cioè condizioni particolari in cui un elemento cambia aspetto.

Nome un po’ da laboratorio, concetto molto semplice: il form reagisce a quello che fa l’utente.

Perché conta?

Perché un modulo non deve solo raccogliere dati. Deve anche guidare.

Se una persona capisce chiaramente dove si trova, cosa ha selezionato e cosa deve correggere, compila con meno fatica.

Le opzioni di focus che prima erano sparse in altri punti dell’interfaccia sono state raccolte in una modalità dedicata.

Meno caccia al tesoro, più lavoro utile.

Un passaggio utile: le Impostazioni Componibili di Divi

Di recente abbiamo parlato anche delle Impostazioni Componibili di Divi. Se lavori spesso sui dettagli dei moduli, questo pezzo si collega bene al discorso.

Le Impostazioni Componibili permettono di abilitare opzioni di design su sotto-elementi specifici di un modulo.

Detto meglio: puoi decidere di intervenire non solo sul modulo nel suo insieme, ma anche su parti più precise.

Per esempio, puoi abilitare opzioni di dimensionamento per i pulsanti, opzioni di animazione per i titoli o controlli aggiuntivi per elementi interni che prima richiedevano CSS personalizzato.

Il CSS continuerà a servire in diversi casi. Però, per molte situazioni comuni, puoi lavorare in modo più visuale e più ordinato direttamente dal pannello di Divi.

Preset per i campi del modulo

I gruppi di campi ora supportano i preset. Un preset è uno stile salvato che puoi riutilizzare più volte: font, colori, bordi, spaziature, sfondi e altre impostazioni.

Invece di personalizzare ogni form da zero, definisci una base comune e la applichi dove serve.

Per esempio: tutti i campi di testo del sito hanno bordo arrotondato, sfondo chiaro, padding comodo e un certo colore quando sono attivi.

Se poi cambi idea, modifichi il preset e aggiorni tutto in modo più ordinato.

Questo è particolarmente utile quando lavori su siti con molti form o quando consegni il progetto a un cliente che poi continuerà a gestirlo.

Iniziamo da qui: se un sito ha più moduli, i preset non sono un vezzo.

Sono una piccola assicurazione contro il caos visivo.

Cosa puoi fare adesso su un progetto reale

Ok, bella panoramica. Ma da dove inizi se hai davanti un sito vero, magari già online, magari con form costruiti in momenti diversi?

Parti da questi controlli:

Metti ordine nei preset prima di costruire altri form

Se il sito ha più moduli, crea o sistema prima i preset. Definisci uno stile base per campi, etichette, checkbox, radio e stati interattivi.

Evita di ridefinire colori, bordi e tipografia modulo per modulo. È il modo più veloce per ritrovarti con form simili, ma non uguali.

E quel “quasi uguali” di solito è il punto esatto in cui nasce il disordine.

Controlla il focus con la tastiera

Dopo aver stilizzato i campi, usa il tasto Tab e attraversa tutto il form senza mouse. Lo stato di focus si vede bene? Il percorso è logico? Si capisce sempre in quale campo ti trovi?

Se la risposta è no, sistemalo subito. Il focus serve a guidare chi compila, non a fare scena.

Verifica Contact Form 7 dentro il tema attivo

Se usi il modulo CF7 per Divi, testa il form nel contesto reale del sito. Controlla che erediti correttamente font, colori e spaziature, ma soprattutto che i messaggi di errore e di conferma siano chiari e leggibili.

Non dare per scontato che tutto funzioni allo stesso modo su ogni installazione. Plugin aggiuntivi, configurazioni CF7 e impostazioni del tema possono cambiare il risultato finale.

Fai una revisione veloce prima della consegna

Prima di chiudere il progetto, passa in rassegna i form principali: contatto, preventivo, newsletter, login o checkout se presenti. Controlla coerenza visiva, accessibilità di base, messaggi di errore e comportamento da mobile.

È una di quelle verifiche poco glamour, lo so. Però evita figuracce molto concrete.

Tiriamo le fila

Le novità di Divi per i form vanno in una direzione abbastanza chiara: più controllo, più coerenza e meno lavoro ripetitivo.

I preset ti aiutano a mantenere uno stile uniforme. Gli stati come focus e checked migliorano l’interazione.

Il modulo per Contact Form 7 rende più semplice integrare form già esistenti dentro il sistema visivo di Divi. L’indicatore delle impostazioni modificate ti aiuta a non perderti nei pannelli.

Il punto, però, non è usare tutte le opzioni perché ci sono. Il punto è capire quali servono davvero al progetto che hai davanti.

Se stai cercando di uniformare la UX dei form su un sito Divi esistente, o vuoi capire come strutturare i preset per un nuovo progetto per cliente, scrivimi: vediamo insieme cosa funziona meglio per te e da dove conviene iniziare.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.