### [Estilização de Campos de Texto nos Seus Formulários](https://wpforms.com/developers/how-to-customize-the-styling-of-text-based-form-fields/)
**Publicado:** 4 de fevereiro de 2022
**Autor:** Umair Majeed
**Resumo:** Este tutorial mostrar-lhe-á várias formas diferentes de estilizar campos de formulário baseados em texto usando CSS, desde a alteração da cor e do tamanho até à imposição de minúsculas ou maiúsculas.
**Conteúdo:**
Gostaria de personalizar a aparência do texto nos campos do seu formulário? Desde tamanhos de letra e cores até à transformação de texto, pode facilmente melhorar os campos de texto do seu formulário com CSS simples.
Este guia mostrar-lhe-á como estilizar vários campos baseados em texto, como Email, Texto de Linha Única e Texto de Parágrafo.
Este guia não abrange o campo Editor de Texto Rico, uma vez que foi concebido para ser controlado pelos utilizadores do formulário.
## Configuração do Seu Formulário
Primeiro, terá de criar o seu formulário e adicionar os seus campos. Para este tutorial, vamos adicionar os campos **Nome**, **Email**, **Texto de Linha Única** e **Texto de Parágrafo**.
Se precisar de ajuda na criação do seu formulário, consulte a nossa [documentação de criação de formulários](https://wpforms.com/docs/creating-first-form/).
Não aplique estes estilos CSS a campos de Palavra-passe. Fazer isso interferirá com a funcionalidade de Força da Palavra-passe e poderá impedir o envio do formulário.
## Adicionar Estilos Personalizados
Vamos analisar diferentes formas de estilizar os seus campos de texto. Para obter ajuda na adição de CSS ao seu site, consulte este tutorial sobre [adicionar CSS personalizado](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Ao direcionar formulários ou campos específicos, terá de substituir **-999** pelo ID real do seu formulário e pelos IDs dos campos. Se precisar de ajuda para encontrar estes IDs, consulte o nosso guia sobre [localizar IDs de formulário e de campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Tamanho do texto
Para alterar o tamanho do texto dentro dos campos do formulário:
###### Para todos os formulários
```
.wpforms-form input {
font-size: 20px !important;
}
```
###### Para um campo específico dentro de um formulário específico
```
#wpforms-999-field_1-container input {
font-size: 20px !important;
}
```
#### Cor do texto
Para modificar a cor do texto nos campos do formulário:
###### Para todos os formulários
```
.wpforms-form input {
color: #000000 !important;
}
```
###### Para um campo específico dentro de um formulário específico
```
#wpforms-999-field_1-container input {
color: #000000 !important;
}
```
#### Transformação do texto
Para controlar a capitalização do texto:
###### Para todos os formulários
```
.wpforms-form input {
text-transform: capitalize !important;
}
```
###### Para um campo específico dentro de um formulário específico
```
#wpforms-999-field_1-container input {
text-transform: capitalize !important;
}
```
Valores **text-transform** disponíveis:
- **lowercase**: Força todo o texto a ser em minúsculas
- **uppercase**: Força todo o texto a ser em maiúsculas
- **capitalize**: Coloca em maiúscula a primeira letra de cada palavra
E é tudo o que precisa para personalizar a estilização de campos de formulário baseados em texto.
O WPForms tem imensos tutoriais de CSS. Porque não [consultar outros tutoriais de CSS vendo a nossa lista completa](https://wpforms.com/developers/tags/css/ "Snippets de CSS para programadores WPForms"). Atualizamos estes regularmente, por isso continue a verificar. Mas se procura informações mais específicas sobre como usar CSS, [junte-se ao nosso Círculo VIP WPForms e pergunte-nos lá](https://www.facebook.com/groups/wpformsvip "Junte-se ao Círculo VIP WPForms para dicas rápidas e tutoriais")!
Se tiver pedidos específicos para ver mais tutoriais sobre CSS, sinta-se à vontade para nos contactar na [Comunidade VIP WPForms do Facebook](https://www.facebook.com/groups/wpformsvip "Comunidade VIP WPForms do Facebook para dicas rápidas e tutoriais")!
**Categorias:** Estilização
**Etiquetas:** CSS
---