Styling della Casella del Messaggio di Conferma

Vuoi che il messaggio di conferma del tuo modulo corrisponda all'aspetto del tuo brand? Per impostazione predefinita, WPForms visualizza gli invii riusciti 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 invio modulo riuscito 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 abbinarli 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.

Rimozione dello stile di sfondo per tutti i moduli

Per rimuovere completamente lo stile predefinito verde da tutti i messaggi di conferma del modulo, 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.

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 abbinarli 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 per aggiungere contenuti dinamici ai tuoi moduli.