Riassunto AI
Desideri personalizzare l'aspetto del testo nei campi del tuo modulo? Dalle dimensioni e colori dei caratteri alla trasformazione del testo, puoi migliorare facilmente i campi di testo del tuo modulo con semplici CSS.
Questa guida ti mostrerà come stilizzare vari campi basati su testo come Email, Testo a riga singola e Testo paragrafo.
Configurazione del tuo modulo
Innanzitutto, dovrai creare il tuo modulo e aggiungere i tuoi campi. Per questo tutorial, aggiungeremo i campi Nome, Email, Testo a riga singola e Testo paragrafo.
Se hai bisogno di aiuto nella creazione del tuo modulo, consulta la nostra documentazione sulla creazione di moduli.
Aggiunta di stili personalizzati
Esaminiamo diversi modi per stilizzare i tuoi campi di testo. Per assistenza nell'aggiunta di CSS al tuo sito, consulta questo tutorial su come aggiungere CSS personalizzati.
Dimensione del testo
Per modificare la dimensione del testo all'interno dei campi del modulo:
Per tutti i moduli
.wpforms-form input {
font-size: 20px !important;
}
Per un campo specifico all'interno di un modulo specifico
#wpforms-999-field_1-container input {
font-size: 20px !important;
}
Colore testo
Per modificare il colore del testo nei campi del modulo:
Per tutti i moduli
.wpforms-form input {
color: #000000 !important;
}
Per un campo specifico all'interno di un modulo specifico
#wpforms-999-field_1-container input {
color: #000000 !important;
}
Trasformazione del testo
Per controllare la capitalizzazione del testo:
Per tutti i moduli
.wpforms-form input {
text-transform: capitalize !important;
}
Per un campo specifico all'interno di un modulo specifico
#wpforms-999-field_1-container input {
text-transform: capitalize !important;
}
Valori text-transform disponibili:
- lowercase: Forza tutto il testo in minuscolo
- uppercase: Forza tutto il testo in maiuscolo
- capitalize: Mette in maiuscolo la prima lettera di ogni parola
E questo è tutto ciò che ti serve per personalizzare lo stile dei campi del modulo basati su testo.
WPForms ha un sacco di tutorial CSS. Perché non dare un'occhiata ad altri tutorial CSS vedendo il nostro elenco completo. Li aggiorniamo regolarmente, quindi continua a controllarli. Ma se stai cercando informazioni più specifiche su come fare con CSS, unisciti al nostro WPForms VIP Circle e chiedici lì!
Se hai richieste specifiche per vedere altri tutorial su CSS, non esitare a contattarci all'interno della Community VIP WPForms su Facebook!