Estilizar Campos de Texto nos Seus Formulários

Gostaria de personalizar a forma como o texto aparece nos campos do seu formulário? Desde tamanhos de fonte e cores até transformação de texto, pode facilmente realçar 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.

Configurar o 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 um campo Texto de Parágrafo.

Se precisar de ajuda na criação do seu formulário, por favor, consulte a nossa documentação de criação de formulários.

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.

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 disponíveis de text-transform:

• lowercase: Força todo o texto a ser em minúsculas
• uppercase: Força todo o texto a ser em maiúsculas
• capitalize: Capitaliza a primeira letra de cada palavra

E é tudo o que precisa para personalizar o estilo dos campos de formulário baseados em texto.

O WPForms tem imensos tutoriais de CSS. Porque não ver outros tutoriais de CSS vendo a nossa lista completa. 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á!

Se tiver pedidos específicos para ver mais tutoriais sobre CSS, sinta-se à vontade para nos contactar na Comunidade VIP WPForms do Facebook!