Come personalizzare i moduli in Contact Form 7 utilizzando CSS in WordPress
Vuoi che i tuoi moduli WordPress siano eleganti quanto il resto del tuo sito? Con Contact Form 7, hai il pieno controllo sull'aspetto del modulo utilizzando il CSS. Questa guida ti accompagna passo dopo passo nel processo di personalizzazione dei moduli Contact Form 7, permettendoti di creare un'esperienza coerente e in linea con il tuo brand per i visitatori.
Perché personalizzare i moduli di Contact Form 7?
Contact Form 7 è uno dei plugin WordPress più popolari per creare moduli, ma il suo aspetto predefinito è basilare. La personalizzazione dello stile nei temi classici di WordPress ti permette di:
Abbina lo stile al tuo brand
Migliora usabilità e accessibilità
Rendi i moduli più accattivanti e professionali
Passaggio 1: Identifica i selettori CSS del modulo
Prima di iniziare a personalizzare, devi sapere quali selettori CSS colpiscono gli elementi del modulo.
Ogni modulo Contact Form 7 è racchiuso in una classe univoca: .wpcf7
Elementi individuali come campi di input, textarea e pulsanti di invio usano i tag HTML standard
Passaggio 2: Aggiungi CSS personalizzato al tuo sito WordPress
Puoi aggiungere CSS in due modi principali:
Tramite il Customizer:
Vai su Aspetto > Personalizza > CSS aggiuntivo e incolla i tuoi stili.
NOTA: Aggiungi il tuo CSS al file style.css del tema child per personalizzazioni più avanzate.
Passaggio 3: Scrivi il tuo CSS personalizzato
Ecco alcuni esempi comuni per iniziare, utilizzando i componenti "text" e "submit" del modulo come esempio:
Personalizza tutti i moduli Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Le pseudo-classi in CSS, come :hover, ti permettono di stilizzare gli elementi in base al loro stato o all'interazione dell'utente. Ad esempio, la pseudo-classe :hover applica gli stili quando un utente passa il mouse su un pulsante o un campo. Questo viene spesso usato per evidenziare i pulsanti o cambiarne il colore al passaggio del mouse, rendendo i moduli più interattivi e accattivanti. Altre pseudo-classi utili sono :focus (quando un input è selezionato) e :active (quando un elemento viene cliccato). Usare le pseudo-classi aiuta a migliorare l'esperienza utente fornendo un feedback immediato mentre i visitatori interagiscono con il modulo.
Personalizza un modulo specifico
Ogni modulo ha un ID univoco, come #wpcf7-f123-o1. Usalo per personalizzare solo quel modulo:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Sostituisci f123-o1 con l'ID reale del tuo modulo. Puoi trovare l'ID univoco visualizzando la pagina in cui è incorporato il modulo Contact Form 7, facendo clic destro sul modulo e selezionando "Ispeziona" (o "Ispeziona elemento") nel browser. Cerca il <div> con la classe .wpcf7: l'ID apparirà come id="wpcf7-f123-o1" nel codice HTML. Usa questo ID nel selettore CSS per personalizzare solo quel modulo specifico.
Passaggio 4: Usa le classi integrate di Contact Form 7
Contact Form 7 aggiunge automaticamente delle classi agli elementi, rendendo ancora più semplice la personalizzazione. Ad esempio:
.wpcf7-form-control – Tutti i controlli del modulo
.wpcf7-submit – Il pulsante di invio
Puoi anche aggiungere le tue classi nell'editor del modulo per un controllo ancora maggiore.
Esempio
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Passaggio 5: Anteprima e regolazioni
Dopo aver salvato il CSS, aggiorna il sito per vedere le modifiche. Usa lo strumento di ispezione del browser per modificare gli stili in tempo reale prima di copiarli nel sito. Ricordati di svuotare la cache del sito dopo aver apportato modifiche, così gli aggiornamenti saranno visibili ai visitatori.
Ecco alcuni esempi prima e dopo di un modulo su un sito demo, dove abbiamo usato il codice CSS del Passaggio 3 per rendere blu i bordi di ogni campo del modulo.
Suggerimenti rapidi per uno stile migliore dei moduli
Mantieni l'accessibilità: Assicurati di avere un buon contrasto di colori e dimensioni dei caratteri leggibili
Usa gli spazi: Aggiungi padding e margini per un aspetto pulito e ordinato
Evidenzia gli errori: Stile i messaggi di errore con un colore evidente (come il rosso) per aiutare gli utenti a correggere gli errori
Testa su mobile: Assicurati che i tuoi moduli siano perfetti su tutti i dispositivi
Risoluzione dei problemi
Se i tuoi stili non vengono visualizzati, prova questi passaggi:
Svuota la cache del browser e del sito – A volte i file in cache impediscono la visualizzazione del nuovo CSS. Se usi un plugin di cache o un hosting gestito, svuota anche quelle cache.
Controlla eventuali problemi di specificità CSS – Se i tuoi stili non vengono applicati, prova a rendere i selettori più specifici per sovrascrivere gli stili esistenti.
Assicurati di modificare il file o la sezione CSS corretta – Controlla di aggiungere il codice nel posto giusto, come il pannello CSS aggiuntivo, il file style.css del tema child o un plugin CSS personalizzato.
Controlla le classi CSS per errori di battitura – Cerca nomi di classi scritti male, spazi inutili o uso accidentale della classe sbagliata. Verifica anche che la classe che stai utilizzando esista effettivamente nell'HTML del modulo.
Controlla classi duplicate o in conflitto – Assicurati che la classe che stai usando non sia già applicata altrove con stili diversi che potrebbero sovrascrivere le tue modifiche.
Segui le best practice generali – Usa nomi chiari e coerenti per le classi, termina ogni regola CSS con un punto e virgola e chiudi sempre correttamente i blocchi di codice con una parentesi graffa (}).
Esaminare attentamente il codice per questi problemi comuni ti aiuterà a garantire che gli stili personalizzati vengano visualizzati correttamente sul sito.
Esempio: CSS personalizzato completo per un modulo Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Ecco un esempio di modulo stilizzato con il codice CSS sopra. Questo codice personalizza l'aspetto di diversi elementi chiave del modulo Contact Form 7. Prende di mira tutti i campi di testo, email e textarea, conferendo loro un bordo grigio chiaro, angoli arrotondati, padding confortevole e larghezza uniforme per un aspetto pulito e moderno.
Il codice stila anche il pulsante di invio con uno sfondo verde, testo bianco, bordi arrotondati e carattere in grassetto e facile da leggere. Quando gli utenti passano il mouse sul pulsante di invio, il colore di sfondo diventa verde scuro, fornendo un feedback interattivo.
Aggiunta di CSS: temi classici vs temi a blocchi
I passaggi di questa guida per personalizzare i moduli Contact Form 7 con CSS sono pensati per i Temi Classici di WordPress. I Temi Classici, come il popolare Astra, usano il Customizer, dove puoi facilmente aggiungere CSS personalizzato nella sezione "CSS aggiuntivo". Questo rende semplice personalizzare i moduli e vedere le modifiche in tempo reale.
Tuttavia, se il tuo sito utilizza un Tema a Blocchi (a volte chiamato anche Full Site Editing o tema FSE), il processo è diverso. I Temi a Blocchi non includono sempre il Customizer o il campo "CSS aggiuntivo" di default. Invece, si utilizza l'Editor del sito per apportare modifiche al design. Mentre puoi regolare gli stili globali per colori, tipografia e layout, l'aggiunta di CSS personalizzato arbitrario non è sempre disponibile nell'interfaccia.
Cosa fare se usi un Tema a Blocchi
Apri la bacheca di WordPress e vai su Aspetto > Editor (Editor del sito).
Nell'Editor del sito, cerca il pannello Stili (l'icona del cerchio mezzo ombreggiato).
Alcuni Temi a Blocchi ora offrono un'opzione "CSS aggiuntivo" nel pannello Stili, ma dipende dal tema e dalla versione di WordPress.
Se non vedi un'opzione per aggiungere CSS personalizzato, puoi usare un plugin come WPCode per aggiungere CSS personalizzato a tutto il sito. WPCode è facile da usare e funziona con qualsiasi tema, assicurandoti di poter comunque personalizzare i moduli anche se il tema non supporta la modifica diretta del CSS nell'interfaccia. Tieni presente che l'installazione di questo plugin potrebbe influenzare lo stile di altri moduli già presenti sul sito.
Risorse aggiuntive
Personalizzare i moduli Contact Form 7 è un modo semplice ma potente per migliorare l'esperienza utente del sito. Con poche righe di CSS, puoi far sì che i tuoi moduli si integrino perfettamente con il tuo brand.