{"id":166937,"date":"2025-11-03T09:00:00","date_gmt":"2025-11-03T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/wpforms-personalizzare-stile-form-css\/"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T22:00:00","slug":"wpforms-personalizzare-stile-form-css","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/wpforms-personalizzare-stile-form-css\/","title":{"rendered":"Personalizzare lo Stile dei Form WPForms con CSS"},"content":{"rendered":"

Personalizzare lo Stile dei Form WPForms con CSS<\/h2>\n

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\u00f9 semplici alle personalizzazioni pi\u00f9 avanzate.<\/p>\n

Come WPForms Gestisce gli Stili<\/h2>\n

Prima di iniziare a scrivere CSS, \u00e8 importante capire come WPForms struttura il markup HTML dei suoi moduli. Ogni form \u00e8 racchiuso in un container con classi CSS specifiche che puoi utilizzare come selettori:<\/p>\n

Container principale<\/strong>: div.wpforms-container<\/code> \u2014 racchiude l’intero modulo, incluso il titolo e la descrizione.<\/p>\n

Form element<\/strong>: form.wpforms-form<\/code> \u2014 l’elemento form HTML che contiene tutti i campi.<\/p>\n

Campo singolo<\/strong>: div.wpforms-field<\/code> \u2014 il container di ogni singolo campo, con classi aggiuntive che identificano il tipo (es. wpforms-field-text<\/code>, wpforms-field-email<\/code>, wpforms-field-select<\/code>).<\/p>\n

Etichetta<\/strong>: label.wpforms-field-label<\/code> \u2014 l’etichetta del campo.<\/p>\n

Input<\/strong>: input.wpforms-field-medium<\/code> \u2014 il campo di input vero e proprio, con classi per la dimensione (small, medium, large).<\/p>\n

Pulsante di invio<\/strong>: button.wpforms-submit<\/code> \u2014 il pulsante per inviare il modulo.<\/p>\n

Messaggio di errore<\/strong>: label.wpforms-error<\/code> \u2014 il testo di errore visualizzato quando la validazione fallisce.<\/p>\n

Ogni modulo ha anche un ID univoco nel formato wpforms-form-123<\/code> (dove 123 \u00e8 l’ID del form), che ti permette di applicare stili specifici a un singolo modulo senza influenzare gli altri.<\/p>\n

Dove Inserire il CSS Personalizzato<\/h2>\n

Hai diverse opzioni per aggiungere CSS personalizzato ai tuoi moduli WPForms:<\/p>\n

Personalizzazione CSS di WordPress (Consigliato)<\/h3>\n

Il metodo pi\u00f9 semplice e consigliato \u00e8 utilizzare il pannello Aspetto \u2192 Personalizza \u2192 CSS aggiuntivo<\/strong> 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.<\/p>\n

File style.css del Tema Figlio<\/h3>\n

Se utilizzi un tema figlio (child theme), puoi aggiungere le regole CSS nel file style.css<\/code> del tema figlio. Questo metodo \u00e8 preferito dagli sviluppatori perch\u00e9 mantiene il codice organizzato e sotto controllo di versione.<\/p>\n

Plugin CSS Personalizzato<\/h3>\n

Plugin come Simple Custom CSS and JS<\/strong> ti permettono di aggiungere CSS personalizzato attraverso un’interfaccia dedicata nel pannello WordPress. Sono utili se non vuoi toccare i file del tema.<\/p>\n

Classe CSS nel Campo WPForms<\/h3>\n

Per ogni campo del modulo, WPForms offre un’opzione Classi CSS<\/strong> nelle impostazioni avanzate. Puoi assegnare una classe personalizzata a un campo specifico e poi stilizzarlo via CSS. Questo \u00e8 il metodo pi\u00f9 mirato per personalizzazioni campo per campo.<\/p>\n

\"Opzioni<\/p>\n

Personalizzazioni CSS Comuni<\/h2>\n

Vediamo le personalizzazioni pi\u00f9 richieste con il codice CSS corrispondente. Puoi copiare e adattare questi snippet alle tue esigenze.<\/p>\n

Cambiare il Colore del Pulsante di Invio<\/h3>\n

Il pulsante di invio \u00e8 spesso l’elemento che si vuole personalizzare per primo, per allinearlo ai colori del brand:<\/p>\n

.wpforms-container button[type=\"submit\"] {<\/code>
\n  background-color: #2563eb;<\/code>
\n  color: #ffffff;<\/code>
\n  border: none;<\/code>
\n  padding: 12px 30px;<\/code>
\n  font-size: 16px;<\/code>
\n  font-weight: 600;<\/code>
\n  border-radius: 6px;<\/code>
\n  cursor: pointer;<\/code>
\n  transition: background-color 0.3s ease;<\/code>
\n}<\/code><\/p>\n

.wpforms-container button[type=\"submit\"]:hover {<\/code>
\n  background-color: #1d4ed8;<\/code>
\n}<\/code><\/p>\n

Questo codice crea un pulsante blu con effetto hover pi\u00f9 scuro, bordi arrotondati e una transizione fluida al passaggio del mouse. Sostituisci i codici colore con quelli del tuo brand.<\/p>\n

Personalizzare i Campi di Input<\/h3>\n

Per uniformare l’aspetto dei campi di input al design del tuo sito:<\/p>\n

.wpforms-container input[type=\"text\"],<\/code>
\n.wpforms-container input[type=\"email\"],<\/code>
\n.wpforms-container input[type=\"tel\"],<\/code>
\n.wpforms-container input[type=\"url\"],<\/code>
\n.wpforms-container select,<\/code>
\n.wpforms-container textarea {<\/code>
\n  border: 2px solid #e5e7eb;<\/code>
\n  border-radius: 8px;<\/code>
\n  padding: 10px 14px;<\/code>
\n  font-size: 15px;<\/code>
\n  background-color: #f9fafb;<\/code>
\n  transition: border-color 0.3s ease, box-shadow 0.3s ease;<\/code>
\n}<\/code><\/p>\n

.wpforms-container input:focus,<\/code>
\n.wpforms-container select:focus,<\/code>
\n.wpforms-container textarea:focus {<\/code>
\n  border-color: #2563eb;<\/code>
\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);<\/code>
\n  outline: none;<\/code>
\n  background-color: #ffffff;<\/code>
\n}<\/code><\/p>\n

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.<\/p>\n

Modificare le Etichette dei Campi<\/h3>\n

.wpforms-container .wpforms-field-label {<\/code>
\n  font-size: 14px;<\/code>
\n  font-weight: 600;<\/code>
\n  color: #374151;<\/code>
\n  margin-bottom: 6px;<\/code>
\n  text-transform: uppercase;<\/code>
\n  letter-spacing: 0.5px;<\/code>
\n}<\/code><\/p>\n

Personalizzare il Placeholder<\/h3>\n

.wpforms-container input::placeholder,<\/code>
\n.wpforms-container textarea::placeholder {<\/code>
\n  color: #9ca3af;<\/code>
\n  font-style: italic;<\/code>
\n  font-size: 14px;<\/code>
\n}<\/code><\/p>\n

Aggiungere un Bordo o Sfondo al Form<\/h3>\n

.wpforms-container {<\/code>
\n  background-color: #ffffff;<\/code>
\n  border: 1px solid #e5e7eb;<\/code>
\n  border-radius: 12px;<\/code>
\n  padding: 30px;<\/code>
\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);<\/code>
\n}<\/code><\/p>\n

Questo aggiunge una card con ombra attorno al form, rendendolo visivamente distinto dal contenuto circostante.<\/p>\n

Layout Avanzati con CSS<\/h2>\n

Campi su Due Colonne<\/h3>\n

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:<\/p>\n