### [Como Capitalizar as Entradas dos Campos do Formulário](https://wpforms.com/developers/how-to-capitalize-form-field-inputs/)
**Publicado:** 9 de junho de 2021
**Autor:** Equipe Editorial
**Resumo:** Este tutorial mostrará como usar CSS junto com JavaScript para aplicar dinamicamente o texto a ser capitalizado à medida que o campo é preenchido.
**Conteúdo:**
## Introdução
Gostaria de capitalizar as entradas dos campos do formulário no seu WPForms? Você pode facilmente usar CSS e **text-transform** para formatar os valores de entrada, mas a entrada será salva exatamente como foi digitada. Usando um pequeno trecho de JavaScript, você pode, em tempo real, garantir que esses valores sejam exibidos e armazenados com capitalização.
Neste tutorial, vamos guiá-lo por cada etapa de como conseguir isso.
## Criação do formulário
Primeiro, você precisará criar seu formulário. Para fins deste tutorial, adicionamos um campo de formulário **Texto de Parágrafo** e um **Texto de Linha Única** ao nosso formulário.
Se precisar de ajuda para criar um formulário, [revise esta documentação](https://wpforms.com/docs/creating-first-form/ "Criando Seu Primeiro Formulário").
## Adição do nome da classe CSS
Em seguida, usaremos um nome de classe CSS para cada um desses campos de formulário para acionar o CSS para usar a regra **text-transform** que adicionaremos em outra etapa. Para adicionar a classe CSS necessária, clique no campo **Texto de Linha Única** no seu construtor de formulários e, em seguida, clique para abrir **Avançado**.
Em **Classes CSS**, adicione **capitalize** e repita essas etapas para o campo **Texto de Parágrafo** também.
## Opções de Implementação
### Usando apenas CSS (opcional)
Este CSS personalizado fará com que o campo do formulário seja exibido em maiúsculas, mas a entrada ainda mostrará os valores do campo exatamente como foram digitados.
Se precisar de ajuda sobre como e onde adicionar CSS personalizado, [revise este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms").
Basta copiar e colar este CSS no seu site.
```
.capitalize {
text-transform: capitalize;
}
```
Se você quiser ver o que mais a propriedade CSS de `text-transform` pode usar, [verifique a documentação da Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform).
### Usando apenas JavaScript (recomendado)
Para capitalizar os valores de entrada dos campos do formulário em tempo real enquanto o formulário é preenchido, bem como para garantir que as informações de entrada sejam armazenadas com a capitalização, adicionaremos um pequeno script que capitaliza imediatamente o campo à medida que o texto está sendo digitado.
Para obter ajuda com a adição de JavaScript ao seu site, [dê uma olhada neste tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como Adicionar PHP ou JavaScript Personalizado para WPForms").
```
/*
* Capitaliza o texto do campo do formulário
*
* @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/
*/
function wpf_dev_capitalize() {
?>
**Categorias:** Tutoriais
**Tags:** CSS, Javascript, JS, PHP
---