Personalizzare lo Stile dei Form WPForms con CSS
WPForms genera moduli con un aspetto pulito e professionale che si adatta automaticamente alla maggior parte dei temi WordPress. Tuttavia, potresti voler personalizzare l’aspetto dei tuoi form per allinearli perfettamente al design del tuo sito: cambiare colori, font, dimensioni, spaziature, stile dei pulsanti e molto altro. In questa guida vedremo come personalizzare lo stile dei moduli WPForms utilizzando CSS personalizzato, dai ritocchi più semplici alle personalizzazioni più avanzate.
Come WPForms Gestisce gli Stili
Prima di iniziare a scrivere CSS, è importante capire come WPForms struttura il markup HTML dei suoi moduli. Ogni form è racchiuso in un container con classi CSS specifiche che puoi utilizzare come selettori:
Container principale: div.wpforms-container — racchiude l’intero modulo, incluso il titolo e la descrizione.
Form element: form.wpforms-form — l’elemento form HTML che contiene tutti i campi.
Campo singolo: div.wpforms-field — il container di ogni singolo campo, con classi aggiuntive che identificano il tipo (es. wpforms-field-text, wpforms-field-email, wpforms-field-select).
Etichetta: label.wpforms-field-label — l’etichetta del campo.
Input: input.wpforms-field-medium — il campo di input vero e proprio, con classi per la dimensione (small, medium, large).
Pulsante di invio: button.wpforms-submit — il pulsante per inviare il modulo.
Messaggio di errore: label.wpforms-error — il testo di errore visualizzato quando la validazione fallisce.
Ogni modulo ha anche un ID univoco nel formato wpforms-form-123 (dove 123 è l’ID del form), che ti permette di applicare stili specifici a un singolo modulo senza influenzare gli altri.
Dove Inserire il CSS Personalizzato
Hai diverse opzioni per aggiungere CSS personalizzato ai tuoi moduli WPForms:
Personalizzazione CSS di WordPress (Consigliato)
Il metodo più semplice e consigliato è utilizzare il pannello Aspetto → Personalizza → CSS aggiuntivo di WordPress. Qui puoi inserire il tuo CSS e vedere le modifiche in tempo reale nell’anteprima. I CSS inseriti qui persistono anche quando cambi tema.
File style.css del Tema Figlio
Se utilizzi un tema figlio (child theme), puoi aggiungere le regole CSS nel file style.css del tema figlio. Questo metodo è preferito dagli sviluppatori perché mantiene il codice organizzato e sotto controllo di versione.
Plugin CSS Personalizzato
Plugin come Simple Custom CSS and JS ti permettono di aggiungere CSS personalizzato attraverso un’interfaccia dedicata nel pannello WordPress. Sono utili se non vuoi toccare i file del tema.
Classe CSS nel Campo WPForms
Per ogni campo del modulo, WPForms offre un’opzione Classi CSS nelle impostazioni avanzate. Puoi assegnare una classe personalizzata a un campo specifico e poi stilizzarlo via CSS. Questo è il metodo più mirato per personalizzazioni campo per campo.
Personalizzazioni CSS Comuni
Vediamo le personalizzazioni più richieste con il codice CSS corrispondente. Puoi copiare e adattare questi snippet alle tue esigenze.
Cambiare il Colore del Pulsante di Invio
Il pulsante di invio è spesso l’elemento che si vuole personalizzare per primo, per allinearlo ai colori del brand:
.wpforms-container button[type="submit"] {
background-color: #2563eb;
color: #ffffff;
border: none;
padding: 12px 30px;
font-size: 16px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.wpforms-container button[type="submit"]:hover {
background-color: #1d4ed8;
}
Questo codice crea un pulsante blu con effetto hover più scuro, bordi arrotondati e una transizione fluida al passaggio del mouse. Sostituisci i codici colore con quelli del tuo brand.
Personalizzare i Campi di Input
Per uniformare l’aspetto dei campi di input al design del tuo sito:
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container select,
.wpforms-container textarea {
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 10px 14px;
font-size: 15px;
background-color: #f9fafb;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
outline: none;
background-color: #ffffff;
}
Questo CSS crea campi con bordo grigio chiaro, sfondo leggermente colorato e un effetto focus con bordo blu e ombra sottile che guida visivamente l’utente al campo attivo.
Modificare le Etichette dei Campi
.wpforms-container .wpforms-field-label {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
Personalizzare il Placeholder
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
color: #9ca3af;
font-style: italic;
font-size: 14px;
}
Aggiungere un Bordo o Sfondo al Form
.wpforms-container {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
Questo aggiunge una card con ombra attorno al form, rendendolo visivamente distinto dal contenuto circostante.
Layout Avanzati con CSS
Campi su Due Colonne
WPForms supporta nativamente il layout a colonne attraverso le classi CSS predefinite. Per disporre i campi su due colonne, assegna le seguenti classi nelle opzioni avanzate di ogni campo:
wpforms-one-half wpforms-first— per il primo campo della riga (colonna sinistra)wpforms-one-half— per il secondo campo della riga (colonna destra)
WPForms include anche classi per layout a tre colonne (wpforms-one-third) e combinazioni asimmetriche (wpforms-two-thirds). Queste classi gestiscono automaticamente il responsive, passando a una colonna singola su schermi piccoli.
Pulsante a Larghezza Piena
.wpforms-container button[type="submit"] {
width: 100%;
padding: 14px;
font-size: 18px;
}
Questo rende il pulsante largo quanto il form, un design comune e molto efficace soprattutto su mobile.
Stile dei Messaggi di Errore
.wpforms-container label.wpforms-error {
color: #dc2626;
font-size: 13px;
font-weight: 500;
margin-top: 4px;
}
.wpforms-container .wpforms-field.wpforms-has-error input,
.wpforms-container .wpforms-field.wpforms-has-error textarea {
border-color: #dc2626;
background-color: #fef2f2;
}
Questo evidenzia i campi con errori di validazione con un bordo rosso e uno sfondo rosso chiaro, rendendo immediatamente visibile quale campo deve essere corretto.
Stile del Messaggio di Conferma
.wpforms-container .wpforms-confirmation-container-full {
background-color: #ecfdf5;
border: 1px solid #10b981;
border-radius: 8px;
padding: 20px;
color: #065f46;
font-size: 16px;
}
CSS Specifico per un Singolo Form
Se hai più moduli sul sito e vuoi stilizzare solo uno di essi, usa l’ID del form come selettore:
#wpforms-form-123 button[type="submit"] {
background-color: #059669;
}
Sostituisci 123 con l’ID reale del tuo modulo (lo trovi nella colonna Shortcode della lista moduli in WPForms → Tutti i form).
Responsive Design: Ottimizzare per Mobile
WPForms è responsive di default, ma potresti voler aggiungere personalizzazioni specifiche per i dispositivi mobili:
@media (max-width: 768px) {
.wpforms-container {
padding: 15px;
}
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select {
font-size: 16px; /* previene lo zoom automatico su iOS */
}
.wpforms-container button[type="submit"] {
width: 100%;
padding: 14px;
}
}
Un dettaglio importante: su iOS, se il font-size di un input è inferiore a 16px, il browser esegue uno zoom automatico al focus del campo. Impostando il font-size a 16px o superiore per i campi input su mobile, si evita questo comportamento fastidioso.
Temi di Stile Integrati in WPForms
A partire dalle versioni più recenti, WPForms include temi di stile integrati che ti permettono di personalizzare l’aspetto dei form senza scrivere CSS. Nelle impostazioni del form builder, trovi la sezione Temi con opzioni predefinite per colori, bordi, spaziature e stili dei pulsanti. Questa funzionalità è perfetta per personalizzazioni rapide senza toccare il codice.
Strumenti per il Debug CSS
Quando lavori con il CSS dei form, gli strumenti di sviluppo del browser sono i tuoi migliori alleati:
- Apri la pagina con il form nel browser
- Premi F12 o Ctrl+Shift+I (Cmd+Option+I su Mac) per aprire gli strumenti di sviluppo
- Usa lo strumento Seleziona elemento (icona del cursore) per cliccare su qualsiasi parte del form
- Il pannello degli stili ti mostrerà tutte le regole CSS applicate a quell’elemento
- Puoi modificare gli stili in tempo reale per sperimentare prima di scrivere il CSS definitivo
Se un tuo CSS non viene applicato, potrebbe essere un problema di specificità. Le regole CSS del tema potrebbero avere una specificità maggiore delle tue. In questi casi, aumenta la specificità del selettore aggiungendo classi o ID genitore, oppure usa !important come ultima risorsa.
Se hai bisogno di personalizzazioni avanzate per i tuoi moduli WPForms, contattaci. Il nostro team può creare stili su misura perfettamente integrati con il design del tuo sito.
Migliora il Tuo Sito WordPress
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress: