Personalizando o Estilo de Campos Individuais do Formulário

Atualizado:
Ver Markdown

Você gostaria de estilizar campos específicos em seus formulários, sem afetar outros campos do formulário? Com o seletor CSS correto, você pode alterar os estilos de qualquer componente do formulário para atender às suas necessidades.

Neste tutorial, forneceremos uma lista de quase todos os seletores que você pode precisar para estilizar campos individuais em seus formulários.

Observação: Este tutorial é um pouco mais avançado e requer algum conhecimento de CSS. Se você preferir não usar nenhum código, pode ver nosso guia sobre estilização do WPForms no editor de blocos.

Como Usar o Código Abaixo

Abaixo está uma lista de seletores CSS que você precisará para direcionar campos de formulário individuais com seu código CSS.

Incluído abaixo, você também encontrará os estilos padrão que o WPForms aplica automaticamente a esses seletores. Para personalizar qualquer parte do seu formulário, você pode começar copiando um trecho de CSS deste tutorial para o seu site, depois editando-o conforme necessário.

Observação: Não sabe como adicionar CSS ao seu site? Confira o tutorial da WPBeginner sobre como adicionar CSS personalizado ao seu site WordPress.

Seletores e Estilos Padrão do WPForms

Alguns dos estilos que você vê em seu formulário (como a fonte) virão do seu tema. O WPForms também inclui alguns estilos básicos para ajudar a fazer seus formulários parecerem ótimos em qualquer tema. No entanto, não importa de onde venha o estilo inicial, ele geralmente pode ser substituído usando seletores CSS muito específicos.

Observação: Ao adicionar CSS ao seu site, pode ser necessário incluir !important antes do ponto e vírgula para garantir que seus estilos personalizados sejam aplicados com sucesso. Isso ajudará a substituir qualquer CSS adicionado pelo seu tema ou outros plugins. Confira nosso guia sobre solução de problemas de CSS para mais detalhes.

Abaixo está uma lista de seletores CSS que são específicos para cada parte de um formulário, bem como os estilos que serão incluídos por padrão através do WPForms.

Título e Descrição do Formulário

.wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Descrição do Formulário

.wpforms-form .wpforms-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Indicador de Progresso de Múltiplas Páginas

Observação: Para alterar a cor de preenchimento verde do indicador de progresso, use as opções de várias páginas no construtor de formulários.

Título da Página do Indicador de Progresso

span.wpforms-page-indicator-page-title {
    font-size: 18px;
}

Etapas do Indicador de Progresso

span.wpforms-page-indicator-steps {
    font-size: 18px;
}

Etapa Atual do Indicador de Progresso

span.wpforms-page-indicator-steps-current {
    font-size: 18px;
}

Barra de Progresso do Indicador de Progresso

Barra de Progresso

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    display: block;
    width: 100%;
    background-color: #ddd;
    height: 18px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 5px 0 0;
}

Barra de Progresso do Indicador de Progresso (Apenas Preenchimento)

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
}

Indicador de Progresso: Círculos

Círculos Indicadores de Progresso

Círculos de Etapa (Cores Aplicadas Apenas aos Não Ativos)

.wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 0;
    line-height: 40px;
    text-align: center;
    background-color: #ddd;
    color: #666;
}

Círculo da Etapa Atual

.wpforms-form .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number {
    color: #fff;
}

Conector do Indicador de Progresso

Conector do Indicador de Progresso

Seções de Etapas

.wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page {
    float: left;
    text-align: center;
    font-style: 16px;
    line-height: 1.2;
}

Seletores Globais de Campos de Formulário

Todos os Rótulos de Campo

.wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Todos os Subtítulos de Campo

.wpforms-form .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Todas as Descrições de Campo

.wpforms-form .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Caixas ao Redor de Todos os Campos de Entrada

.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Espaçamento Entre Todos os Campos

.wpforms-form .wpforms-field {
    padding: 10px 0;
    clear: both;
}

Todos os Campos de Entrada Pequenos

.wpforms-container input.wpforms-field-small, .wpforms-container select.wpforms-field-small, .wpforms-container .wpforms-field-row.wpforms-field-small { 
   max-width: 25%;
}

Todos os Campos de Entrada Médios

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium {
   max-width: 60%;
}

Todos os Campos de Entrada Grandes

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large { 
   max-width: 100%;
}

Mensagem de Confirmação

Mensagem de confirmação

.wpforms-confirmation-container-full {
    color: #333;
    margin: 0 0 24px 0;
    background: #e0ffc7;
    border: 1px solid #b4d39b;
    padding: 15px 15px;
}

Campos Obrigatórios

Asterisco de 'Obrigatório'

Asterisco de campo obrigatório

.wpforms-form .wpforms-required-label {
    color: #ff0000;
    font-weight: 400;
}

Erros de Validação

Erro de validação

Caixa do Campo
.wpforms-form .wpforms-field input.wpforms-error, .wpforms-form .wpforms-field textarea.wpforms-error, .wpforms-form .wpforms-field select.wpforms-error {
    border: 1px solid #cc0000;
}
Mensagem de Validação
.wpforms-container em.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
}
Ícone de Erro de Validação

Ícone de erro de validação

 .wpforms-container-full .wpforms-form em.wpforms-error:before {
    content: '';
    position: relative;
    display: inline-block;
    right: 5px;
    top: 1.5px;
    width: 16px;
    height: 14px;
    background-color: var(--wpforms-label-error-color);
}

Campos Padrão

Texto de Linha Única

Campo de texto de linha única

Espaçamento de Texto de Linha Única
.wpforms-form  .wpforms-field.wpforms-field-text {
    padding: 10px 0;
    clear: both;
}
Rótulo de Texto de Linha Única
.wpforms-form .wpforms-field.wpforms-field-text .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Caixa de Entrada de Texto de Linha Única
.wpforms-form .wpforms-field.wpforms-field-text input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Texto de Parágrafo

Campo de texto de parágrafo

Espaçamento de Texto de Parágrafo
.wpforms-form .wpforms-field.wpforms-field-textarea {
    padding: 10px 0;
    clear: both;
}
Rótulo de Texto de Parágrafo
.wpforms-form .wpforms-field.wpforms-field-textarea .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Caixa de Entrada de Texto de Parágrafo
.wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

Campo de menu suspenso

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .wpforms-valid {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Campo de menu suspenso

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Múltipla Escolha

Campo de múltipla escolha

Espaçamento de Campo de Múltipla Escolha
.wpforms-form .wpforms-field.wpforms-field-radio {
    padding: 10px 0;
    clear: both;
}
Rótulo de Múltipla Escolha
.wpforms-form .wpforms-field.wpforms-field-radio .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Rótulos de Opção de Múltipla Escolha
.wpforms-form .wpforms-field.wpforms-field-radio ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Caixas de seleção

Campo de caixas de seleção

Espaçamento de Checkboxes
.wpforms-form .wpforms-field.wpforms-field-checkbox {
    padding: 10px 0;
    clear: both;
}
Rótulo de Checkboxes
.wpforms-form .wpforms-field.wpforms-field-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Rótulos de Opção de Checkbox
.wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Números

Campo de números

Espaçamento de Números
.wpforms-form .wpforms-field.wpforms-field-number {
    padding: 10px 0;
    clear: both;
}
Rótulo de Números
.wpforms-form .wpforms-field.wpforms-field-number .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Caixa de Entrada de Números
.wpforms-form .wpforms-field.wpforms-field-number input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Nome

Campo de nome

Caixa de Entrada de Primeiro Nome
.wpforms-form input[type=text].wpforms-field-name-first {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Caixa de Entrada de Nome do Meio
.wpforms-form input[type=text].wpforms-field-name-middle {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Caixa de Entrada de Sobrenome
.wpforms-form input[type=text].wpforms-field-name-last {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

E-mail

Campo de E-mail

Preenchimento de E-mail
.wpforms-form .wpforms-field.wpforms-field-email {
    padding: 10px 0;
    clear: both;
}
Rótulo de E-mail
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Caixa de Entrada de E-mail (Apenas Primário)
.wpforms-form input[type=email].wpforms-field-email-primary {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Caixa de Entrada de E-mail (Apenas Confirmar E-mail)
.wpforms-form input[type=email].wpforms-field-email-confirmation {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Sub-rótulos de E-mail
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Slider de Número

Controle deslizante de número

Preenchimento de Controle Deslizante de Números
.wpforms-form .wpforms-field.wpforms-field-number-slider {
    padding: 10px 0;
    clear: both;
}
Rótulo de Controle Deslizante de Números
.wpforms-form .wpforms-field.wpforms-field-number-slider .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Barra de Controle Deslizante de Números
.wpforms-form .wpforms-field.wpforms-field-number-slider input[type=range] {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Acordo GDPR

Campo de Acordo GDPR

Preenchimento de Acordo GDPR
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox {
    padding: 10px 0;
    clear: both;
}
Rótulo de Acordo GDPR
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

É isso! Agora você pode usar esses seletores para aplicar CSS personalizado aos campos padrão em seus formulários.

Em seguida, você gostaria de estilizar outros campos no WPForms? Certifique-se de conferir nossos tutoriais sobre como personalizar o estilo de campos sofisticados e campos de pagamento.

Ainda com dificuldades? Como podemos ajudar?
Última atualização em 04 de junho de 2024

O Melhor Plugin Construtor de Formulários de Arrastar e Soltar para WordPress

Fácil, Rápido e Seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.