Perche Personalizzare lo Stile di Contact Form 7
Contact Form 7, nella sua installazione predefinita, genera un modulo funzionale ma visivamente essenziale. Il plugin si limita a creare il markup HTML necessario senza aggiungere stili particolarmente elaborati, delegando la presentazione visiva al tema WordPress attivo. Questo approccio minimalista e intenzionale: permette al modulo di adattarsi a qualsiasi tema, ma spesso il risultato non e sufficientemente curato per un sito web professionale. Campi troppo piccoli, pulsanti anonimi, spaziatura inadeguata e mancanza di feedback visivo possono compromettere la esperienza utente e ridurre il tasso di completamento del modulo.
La personalizzazione CSS di Contact Form 7 ti permette di trasformare un modulo generico in un elemento di design coerente con la identita visiva del tuo sito, migliorando al contempo la usabilita e la accessibilita. In questa guida esploreremo la struttura HTML generata da CF7, le classi CSS disponibili, tecniche di styling avanzate e 5 snippet CSS pronti da utilizzare.
La Struttura HTML di Contact Form 7
Per personalizzare efficacemente un modulo, e fondamentale comprendere il markup HTML che Contact Form 7 genera. Ecco la struttura base:
<div class="wpcf7" id="wpcf7-f123-p456-o1">
<form class="wpcf7-form" action="..." method="post">
<p>
<label>Il tuo nome
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input type="text" name="your-name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" />
</span>
</label>
</p>
<p>
<input type="submit" value="Invia" class="wpcf7-form-control wpcf7-submit has-spinner" />
</p>
</form>
</div>
Classi CSS Principali
Le classi CSS piu importanti per lo styling sono:
.wpcf7— il contenitore esterno del modulo.wpcf7-form— il tag form.wpcf7-form-control— classe base di tutti i campi di input.wpcf7-text— campi di tipo testo.wpcf7-email— campi di tipo email.wpcf7-tel— campi di tipo telefono.wpcf7-textarea— aree di testo.wpcf7-select— menu a tendina.wpcf7-submit— pulsante di invio.wpcf7-not-valid— campi con errore di validazione.wpcf7-response-output— messaggio di risposta (successo o errore).wpcf7-not-valid-tip— messaggi di errore accanto ai singoli campi.wpcf7-validation-errors— messaggio di errore generale.wpcf7-mail-sent-ok— messaggio di successo
Styling dei Campi di Input
Il primo passo per migliorare la aspetto del modulo e personalizzare i campi di input. Un campo di input ben progettato dovrebbe avere bordi visibili, spaziatura interna adeguata, dimensioni confortevoli per la digitazione e un feedback visivo chiaro quando il visitatore interagisce con esso.
/* Stile base per tutti i campi di input */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-date {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
line-height: 1.5;
color: #333333;
background-color: #fafafa;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
}
/* Stato focus — quando il visitatore clicca sul campo */
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
background-color: #ffffff;
outline: none;
}
/* Stile textarea */
.wpcf7-form-control.wpcf7-textarea {
width: 100%;
min-height: 150px;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
line-height: 1.6;
resize: vertical;
font-family: inherit;
}Il valore font-size: 16px e particolarmente importante: su dispositivi iOS, input con font-size inferiore a 16px causano uno zoom automatico della pagina quando il visitatore tocca il campo, peggiorando la esperienza mobile.
Styling del Pulsante di Invio
Il pulsante di invio e la elemento piu importante del modulo dal punto di vista della conversione. Deve essere visivamente prominente, facilmente identificabile e invitare al clic.
/* Pulsante di invio */
.wpcf7-form-control.wpcf7-submit {
display: inline-block;
padding: 14px 40px;
background-color: #2563eb;
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
letter-spacing: 0.5px;
}
/* Hover — quando il mouse passa sopra */
.wpcf7-form-control.wpcf7-submit:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
}
/* Active — durante il clic */
.wpcf7-form-control.wpcf7-submit:active {
transform: translateY(0);
}
/* Focus — per accessibilita da tastiera */
.wpcf7-form-control.wpcf7-submit:focus {
outline: 3px solid rgba(37, 99, 235, 0.5);
outline-offset: 2px;
}Styling dei Messaggi di Errore e Successo
I messaggi di errore e successo devono essere chiaramente visibili e distinguibili. Utilizza colori convenzionali: rosso per gli errori, verde per il successo.
/* Messaggio di errore accanto al campo */
.wpcf7-not-valid-tip {
color: #dc2626;
font-size: 13px;
margin-top: 6px;
display: block;
font-weight: 500;
}
/* Campo con errore */
.wpcf7-not-valid {
border-color: #dc2626 !important;
background-color: #fef2f2 !important;
}
/* Messaggio di risposta — successo */
.wpcf7-form.sent .wpcf7-response-output {
border: 2px solid #16a34a;
background-color: #f0fdf4;
color: #166534;
padding: 16px 20px;
border-radius: 8px;
font-weight: 500;
}
/* Messaggio di risposta — errore */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
border: 2px solid #dc2626;
background-color: #fef2f2;
color: #991b1b;
padding: 16px 20px;
border-radius: 8px;
}Per una guida completa alla personalizzazione dei messaggi di testo, consulta la guida alla validazione e ai messaggi di errore.
Design Responsive per Dispositivi Mobili
Oltre la meta del traffico web proviene da dispositivi mobili. Il tuo modulo deve funzionare perfettamente su schermi di ogni dimensione.
/* Layout base del modulo */
.wpcf7-form p {
margin-bottom: 20px;
}
.wpcf7-form label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
color: #374151;
}
/* Responsive — schermi piccoli */
@media (max-width: 768px) {
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-textarea {
font-size: 16px; /* Previene lo zoom su iOS */
padding: 14px;
}
.wpcf7-form-control.wpcf7-submit {
width: 100%;
padding: 16px;
font-size: 18px;
}
}
Layout con CSS Grid e Flexbox
Per disporre i campi su piu colonne, puoi utilizzare CSS Grid o Flexbox. Questo e particolarmente utile per posizionare campi come Nome e Cognome, o Email e Telefono, sulla stessa riga su desktop.
Per utilizzare un layout a griglia, modifica il template del modulo utilizzando <div> al posto dei tag <p>:
<div class="form-grid">
<div class="form-field">
<label>Nome [text* your-name]</label>
</div>
<div class="form-field">
<label>Cognome [text* your-surname]</label>
</div>
<div class="form-field">
<label>Email [email* your-email]</label>
</div>
<div class="form-field">
<label>Telefono [tel your-phone]</label>
</div>
</div>E il CSS corrispondente:
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
}5 Snippet CSS Pronti per Contact Form 7
Snippet 1: Stile Minimalista Moderno
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
border: none;
border-bottom: 2px solid #d1d5db;
border-radius: 0;
padding: 12px 4px;
background: transparent;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {
border-bottom-color: #2563eb;
box-shadow: none;
}Snippet 2: Campi con Icone
.wpcf7-form .field-icon {
position: relative;
}
.wpcf7-form .field-icon::before {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 18px;
}
.wpcf7-form .field-icon input {
padding-left: 44px;
}Snippet 3: Pulsante con Gradiente
.wpcf7-submit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 16px 48px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.wpcf7-submit:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}Snippet 4: Modulo con Ombra e Bordo Arrotondato
.wpcf7-form {
background: #ffffff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
max-width: 600px;
margin: 0 auto;
}Snippet 5: Tema Scuro (Dark Mode)
.wpcf7-form {
background: #1a1a2e;
padding: 40px;
border-radius: 12px;
}
.wpcf7-form label { color: #e0e0e0; }
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
background: #16213e;
border: 1px solid #2a3a5c;
color: #e0e0e0;
}
.wpcf7-form .wpcf7-submit {
background: #e94560;
border: none;
color: white;
}Dove Inserire il CSS Personalizzato
Puoi aggiungere il CSS personalizzato in diversi punti:
Personalizzatore WordPress: vai su Aspetto > Personalizza > CSS aggiuntivo. Questo e il metodo piu semplice e sicuro, poiche il CSS viene mantenuto anche quando aggiorni il tema.
File style.css del tema figlio: se utilizzi un tema figlio, aggiungi il CSS nel file style.css. Questo metodo e preferibile per personalizzazioni estese.
Plugin CSS dedicato: plugin come “Simple Custom CSS” offrono una interfaccia nella bacheca per gestire il CSS personalizzato senza toccare i file del tema.
Guide Correlate della Serie Contact Form 7
- Come Installare e Configurare Contact Form 7 su WordPress
- Creare un Form di Contatto Perfetto Passo Passo
- Tutti i Tag e Campi — Guida Completa
- Configurare Email, Notifiche e SMTP
- Validazione Campi, Messaggi di Errore e Conferma
- Protezione Spam con reCAPTCHA, Honeypot e Quiz
- Form Avanzati — Condizionali, Multi-Step e File Upload
- Integrazioni con Mailchimp, CRM e Zapier
- Personalizzare lo Stile con CSS — Guida Design
- Email Non Arrivano? Problemi Comuni e Soluzioni
Desideri un design personalizzato e professionale per i tuoi moduli di contatto? Il team di G Tech Group crea soluzioni su misura per ogni progetto. Contattaci per trasformare i tuoi moduli.