### [Styling della casella del messaggio di conferma](https://wpforms.com/developers/how-to-customize-the-confirmation-message-box-styling/)
**Pubblicato:** 11 ottobre 2019
**Autore:** Umair Majeed
**Estratto:** Migliora il design del tuo modulo con il nostro tutorial CSS, personalizzando lo stile del messaggio di conferma di WPForms per adattarlo perfettamente all'identità del tuo brand.
**Contenuto:**
Vuoi che il messaggio di conferma del tuo modulo corrisponda all'aspetto del tuo brand? Per impostazione predefinita, WPForms visualizza i messaggi di successo in una casella verde, ma puoi facilmente modificare questo stile o rimuoverlo completamente con del semplice codice CSS.
Questa guida ti mostrerà come personalizzare lo stile del tuo messaggio di conferma per creare un'esperienza di modulo più coesa.
## Comprensione dello stile predefinito
WPForms racchiude automaticamente i messaggi di successo dell'invio del modulo in una casella verde con spaziatura e bordi specifici. Sebbene questo funzioni bene per molti siti, potresti voler:
- Rimuovere completamente lo stile per un aspetto più pulito
- Cambiare i colori per adattarli al tuo brand
- Modificare elementi specifici come spaziatura o bordi
- Applicare uno stile personalizzato solo a moduli specifici
## Personalizzazione del messaggio di conferma
Esploriamo diversi modi per modificare lo stile del tuo messaggio di conferma. Se hai bisogno di aiuto per aggiungere CSS personalizzato al tuo sito, consulta la nostra guida su [come aggiungere codice personalizzato a WordPress](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
#### Rimozione dello stile di sfondo per tutti i moduli
Per rimuovere completamente lo stile verde predefinito da tutti i messaggi di conferma dei moduli, aggiungi questo CSS:
```
.wpforms-confirmation-container-full {
color: inherit !important;
margin: 0 !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
```
Con il CSS mostrato sopra, viene rimosso il colore di sfondo e il bordo dal messaggio di conferma.
#### Personalizzazione per moduli specifici
Per modificare il messaggio di conferma di un singolo modulo, usa questo CSS (sostituisci `1000` con l'ID del tuo modulo):
```
div#wpforms-confirmation-1000 {
color: inherit !important;
margin: 0 !important;
background: none !important;
border: none !important;
padding: 0 !important;
}
```
Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta il nostro tutorial su [come trovare gli ID dei moduli](link-to-form-id-guide).
#### Modifica dei colori di sfondo
Per cambiare il colore di sfondo del messaggio di conferma per tutti i moduli:
```
div.wpforms-confirmation-container-full {
background: #333333 !important;
color: #ffffff !important;
border: none !important;
}
```
Questo esempio crea uno sfondo scuro con testo bianco. Regola i codici colore (#333333 e #ffffff) per adattarli ai colori desiderati.
E ora hai modificato con successo lo stile del messaggio di conferma! Successivamente, vorresti imparare come personalizzare altri elementi del modulo? Dai un'occhiata alla nostra guida su [come creare smart tag personalizzati](https://wpforms.com/developers/how-to-create-a-custom-smart-tag/) per aggiungere contenuti dinamici ai tuoi moduli.
**Categorie:** Styling
**Tag:** Messaggio di conferma, CSS
---