Personalizar o Estilo de Campos de Formulário Individuais

Atualizado:
Ver Markdown

Gostaria de estilizar campos específicos nos seus formulários, sem afetar outros campos do formulário? Com o seletor CSS correto, pode alterar os estilos de qualquer componente do formulário para se adequar às suas necessidades.

Neste tutorial, forneceremos uma lista de quase todos os seletores de que poderá necessitar para estilizar campos individuais nos seus formulários.

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

Como Usar o Código Abaixo

Abaixo está uma lista dos seletores CSS de que necessitará para direcionar campos individuais do formulário com o seu código CSS.

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

Nota: Não tem a certeza de como adicionar CSS ao seu site? Consulte o tutorial da WPBeginner sobre como adicionar CSS personalizado ao seu site WordPress.

Seletores e Estilos Padrão do WPForms

Alguns dos estilos que vê no seu formulário (como o tipo de letra) virão do seu tema. O WPForms também inclui alguns estilos básicos para ajudar a que os seus formulários fiquem ótimos em qualquer tema. Independentemente de onde venha o estilo inicial, no entanto, geralmente pode ser substituído usando seletores CSS muito específicos.

Nota: Ao adicionar CSS ao seu site, pode ser necessário incluir !important antes do ponto e vírgula para garantir que os seus estilos personalizados são aplicados com sucesso. Isto ajudará a substituir qualquer CSS adicionado pelo seu tema ou outros plugins. Consulte o nosso guia sobre resoluçã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

Nota: Para alterar a cor de preenchimento verde do indicador de progresso, utilize as opções de múltiplas 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;
}

Passos do Indicador de Progresso

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

Passo 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 Passo (Cores Aplicam-se 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 do Passo 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

Secções de Passo

.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 Sub-ró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 em 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 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 Dropdown

.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 Dropdown

.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;
}

Escolha múltipla

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 Introdução do 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 Introdução do Apelido
.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;
}

Email

Campo de e-mail

Preenchimento de E-mail
.wpforms-form .wpforms-field.wpforms-field-email {
    padding: 10px 0;
    clear: both;
}
Etiqueta 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 Introdução 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 Introdução 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;    
}
Subetiquetas 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;
}

Controlo deslizante de números

Campo de slider numérico

Preenchimento do Seletor Numérico
.wpforms-form .wpforms-field.wpforms-field-number-slider {
    padding: 10px 0;
    clear: both;
}
Etiqueta do Seletor Numérico
.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 do Seletor Numérico
.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 RGPD

Campo de Acordo GDPR

Preenchimento do Acordo GDPR
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox {
    padding: 10px 0;
    clear: both;
}
Etiqueta do 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 pode usar estes seletores para aplicar CSS personalizado a campos padrão nos seus formulários.

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

Ainda preso? Como podemos ajudar?
Última Atualização em 04 de Junho de 2024

O Melhor Plugin Construtor de Formulários Drag and Drop 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.