### [Come capitalizzare gli input dei campi del modulo](https://wpforms.com/developers/how-to-capitalize-form-field-inputs/)
**Pubblicato:** 9 giugno 2021
**Autore:** Team Editoriale
**Estratto:** Questo tutorial ti mostrerà come utilizzare CSS insieme a JavaScript per applicare dinamicamente il testo da capitalizzare mentre il campo viene completato.
**Contenuto:**
## Introduzione
Vorresti capitalizzare gli input dei campi del modulo su WPForms? Puoi facilmente usare CSS e **text-transform** per formattare i valori di input, ma la voce verrà salvata esattamente come è stata digitata. Utilizzando un piccolo snippet JavaScript puoi, in tempo reale, garantire che questi valori vengano visualizzati e archiviati con la capitalizzazione.
In questo tutorial, ti guideremo attraverso ogni passaggio su come ottenere questo risultato.
## Creazione del modulo
Innanzitutto, dovrai creare il tuo modulo. Ai fini di questo tutorial, abbiamo aggiunto un campo modulo **Testo Paragrafo** e un campo **Testo Riga Singola** al nostro modulo.
Se hai bisogno di aiuto nella creazione di un modulo, [rivedi questa documentazione](https://wpforms.com/docs/creating-first-form/ "Creazione del tuo primo modulo").
## Aggiunta del nome della classe CSS
Successivamente, utilizzeremo una classe CSS per ciascuno di questi campi modulo per attivare il CSS per utilizzare la regola **text-transform** che aggiungeremo in un altro passaggio. Per aggiungere la classe CSS richiesta, fai clic sul campo **Testo Riga Singola** nel tuo generatore di moduli e quindi fai clic per aprire **Avanzate**.
Sotto **Classi CSS**, aggiungi **capitalize** e ripeti questi passaggi anche per il campo **Testo Paragrafo**.
## Opzioni di implementazione
### Utilizzo solo CSS (facoltativo)
Questo CSS personalizzato farà sì che il campo del modulo venga visualizzato in maiuscolo, ma la voce mostrerà ancora i valori del campo esattamente come sono stati digitati.
Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato, [rivedi questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms").
Copia e incolla semplicemente questo CSS sul tuo sito.
```
.capitalize {
text-transform: capitalize;
}
```
Se desideri vedere cos'altro può utilizzare la proprietà CSS di `text-transform`, [controlla la documentazione di Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform).
### Utilizzo solo JavaScript (consigliato)
Per capitalizzare i valori di input dei campi del modulo al volo mentre il modulo viene completato, nonché per garantire che le informazioni della voce vengano archiviate con la capitalizzazione, aggiungeremo un piccolo script che capitalizza immediatamente il campo mentre il testo viene digitato.
Per aiuto nell'aggiungere JavaScript al tuo sito, [dai un'occhiata a questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzato per WPForms").
```
/*
* Capitalizza il testo del campo del modulo
*
* @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/
*/
function wpf_dev_capitalize() {
?>
**Categorie:** Tutorial
**Tag:** CSS, Javascript, JS, PHP
---