Estilizando Campos de Texto em Seus Formulários

Gostaria de personalizar a aparência do texto nos campos do seu formulário? De tamanhos de fonte e cores à transformação de texto, você pode facilmente aprimorar os campos de texto do seu formulário com CSS simples.

Este guia mostrará como estilizar vários campos baseados em texto, como Email, Texto de Linha Única e Texto de Parágrafo.

Configurando Seu Formulário

Primeiro, você precisará criar seu formulário e adicionar seus campos. Para este tutorial, vamos adicionar os campos Nome, Email, Texto de Linha Única e Texto de Parágrafo.

Se precisar de ajuda para criar seu formulário, revise nossa documentação de criação de formulários.

Adicionando Estilos Personalizados

Vamos analisar diferentes maneiras de estilizar seus campos de texto. Para obter ajuda com a adição de CSS ao seu site, confira este tutorial sobre adição de CSS personalizado.

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 de 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 minúsculo
• uppercase: Força todo o texto a ser maiúsculo
• capitalize: Capitaliza a primeira letra de cada palavra

E é tudo o que você precisa para personalizar a estilização de campos de formulário baseados em texto.

O WPForms tem muitos tutoriais de CSS. Por que não conferir outros tutoriais de CSS vendo nossa lista completa. Atualizamos estes regularmente, então continue voltando. Mas se você está procurando informações mais específicas sobre como usar CSS, por favor, junte-se ao nosso Círculo VIP WPForms e pergunte-nos lá!

Se você tiver solicitações específicas para ver mais tutoriais sobre CSS, sinta-se à vontade para nos contatar na Comunidade VIP WPForms do Facebook!