CSS do WPForms não aplica: como corrigir o estilo

Tipo Outros erros

Nome do erro CSS personalizado não aplica no WPForms EN: WPForms custom CSS not applying

Severidade Atenção

Descrição O CSS do WPForms que não aplica acontece quando o estilo personalizado e ignorado e o formulário mantem a aparencia padrão. A causa quase sempre e a especificidade do seletor padrão do plugin (div.wpforms-container-full) vencendo o seu, ou o cache servindo a folha antiga.

O que é o CSS do WPForms que não aplica no formulário?

O WPForms carrega sua própria folha de estilo para garantir uma aparencia consistente do formulário em qualquer tema do WordPress. Quando você adiciona CSS personalizado, ele compete com esses estilos padrão: se o seu seletor for menos específico que o do plugin, o navegador aplica o estilo do WPForms e ignora o seu. Por isso o formulário abre com a aparencia padrão mesmo depois de você salvar o CSS. Não e um bug do plugin, e a regra de especificidade do CSS resolvendo o conflito a favor do seletor mais longo.

Como identificar

O formulário abre com a fonte, cores e botão padrão do WPForms mesmo depois de salvar o CSS personalizado no Personalizar – CSS adicional.
Ao inspecionar o campo no navegador, a regra do WPForms aparece ativa e a sua regra aparece riscada (sobrescrita).
Você adiciona um !important no CSS e mesmo assim o estilo padrão do WPForms continua vencendo.
O CSS funciona em uma janela anonima mas não na navegação normal, ou aparece em um navegador e não em outro.

Como prevenir

Sempre inicie o CSS personalizado pela cadeia div.wpforms-container-full para igualar a especificidade padrão do WPForms desde o comeco.
Mantenha o CSP de formulários em Aparencia – Personalizar – CSS adicional, num so lugar versionado, em vez de espalhado por campos.
Após qualquer alteração de CSS, limpe o cache do plugin e do servidor para não testar uma folha antiga.

Causa

Seletor do seu CSS menos específico que o padrão do WPForms: o plugin usa div.wpforms-container-full .wpforms-form .wpforms-title e o seu .wpforms-title perde a disputa de especificidade.
Opção Include Form Styling em WPForms - Settings - General definida como Base and form theme styling, o tema de formulário mais agressivo que sobrescreve estilos do tema e do seu CSS.
Cache do navegador, do plugin de cache ou do servidor servindo a versão antiga da folha de estilo, sem o CSS recem-adicionado.
Sintaxe de CSS invalida: chave de abertura ou fechamento faltando, dois-pontos ausente entre propriedade e valor, ponto e virgula esquecido ou espaco dentro da unidade (26 px em vez de 26px).
CSS personalizado colado dentro do formulário ou no Custom CSS de um campo em vez do CSS adicional do tema, sem o aninhamento de seletor necessário.

Como resolver

Inspecione o campo e copie o seletor padrão: no navegador, clique com o botão direito no elemento do formulário e abra Inspecionar para ver qual regra do WPForms esta vencendo. Use exatamente a mesma cadeia de seletor, do maior container ao menor, como base do seu CSS.
```
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; }
```
Iguale a especificidade no seu CSS: reescreva a sua regra com a cadeia completa do container, em vez de apenas a classe do campo, para que ela vença a regra padrão sem depender de gambiarra.
```
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 32px; }
```
Coloque o CSS no lugar certo: adicione o CSS em Aparencia - Personalizar - CSS adicional, e não dentro do formulário nem no Custom CSS de um campo isolado, para que ele carregue em toda página que exibe o formulário.
Ajuste o Include Form Styling se o tema agressivo atrapalhar: em WPForms - Settings - General, mude Include Form Styling de Base and form theme styling para Base styling only quando o tema de formulário do plugin estiver sobrescrevendo o estilo do seu tema e o seu CSS.
```
WPForms - Settings - General - Include Form Styling: Base styling only
```
Limpe todos os caches e revalide a sintaxe: limpe o cache do navegador, do plugin de cache e do servidor, e confira se cada regra tem chave de abertura e fechamento, dois-pontos e ponto e virgula, sem espaco na unidade, antes de testar de novo.

CSS

/* CSS adicional do tema (Aparencia > Personalizar > CSS adicional). */
/* Igualar a cadeia de seletor padrao do WPForms vence sem !important. */
div.wpforms-container-full .wpforms-form .wpforms-title {
  font-size: 32px;
  margin: 0 0 12px 0;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium {
  border: 1px solid #2563eb;
  border-radius: 6px;
}

div.wpforms-container-full .wpforms-form button[type=submit].wpforms-submit {
  background: #2563eb;
  color: #ffffff;
}

Perguntas frequentes

Por que meu CSS do WPForms não aplica mesmo salvo?

Porque o seletor padrão do WPForms e mais específico que o seu. O plugin usa cadeias longas como div.wpforms-container-full .wpforms-form, e o navegador aplica o seletor mais específico. Reescreva a sua regra com a mesma cadeia completa do container para que ela vença a disputa.

Coloquei !important e o estilo padrão do WPForms continua vencendo. Por que?

O !important nem sempre resolve. A própria documentação do WPForms avisa que, em muitos casos, o navegador prefere a especificidade da regra padrão mesmo com !important. O caminho confiavel e igualar a cadeia de seletor, comecando por div.wpforms-container-full, em vez de depender do !important.

Onde devo colar o CSS personalizado do WPForms?

Em Aparencia - Personalizar - CSS adicional do WordPress. Esse local carrega o estilo em toda página que exibe o formulário. Evite colar dentro do formulário ou no Custom CSS de um único campo, porque ali o aninhamento de seletor fica incompleto e o estilo não se aplica de forma consistente.

O que e a opção Include Form Styling do WPForms?

E um menu em WPForms - Settings - General que controla quanto CSS o plugin carrega. Base and form theme styling e o padrão e o mais agressivo. Base styling only carrega so o básico e devolve o controle ao tema. No styling remove todo o estilo e exige CSS extenso, sendo voltado a desenvolvedores.

Mudar Include Form Styling para No styling resolve o conflito?

Geralmente não e a melhor escolha. No styling remove toda a folha do WPForms e, segundo a documentação, exige CSS personalizado extenso para layouts e campos voltarem a funcionar. Para a maioria dos casos, Base styling only já reduz a agressividade sem quebrar o formulário.

Meu CSS aparece em janela anonima mas não na normal. O que e isso?

E cache. A janela anonima ignora o cache antigo e mostra a folha nova, enquanto a navegação normal ainda serve a versão em cache sem o seu CSS. Limpe o cache do navegador, do plugin de cache e do servidor para que o estilo apareça em todas as sessoes.

Preciso editar arquivos do tema para estilizar o WPForms?

Não para a maioria dos ajustes. Igualar a especificidade do seletor e colar o CSS em CSS adicional resolve sem tocar em arquivos. Editar o style.css do tema so faz sentido em personalizacoes amplas, e mesmo assim use sempre um tema filho para não perder as mudancas em atualizações.

Atenção

Como corrigir relatórios que não exibem progresso no Tutor LMS

O relatório do Tutor LMS não mostra progresso quando o addon Reports (exclusivo do Tutor LMS Pro) está desativado, quando o aluno enviado é anterior à instalação do plugin ou quando o modo de conclusão Strict deixa cursos sem 100% por lições e quizzes pendentes.

Atenção

Como corrigir o erro do campo Date/Time no WPForms

O WPForms Date Time field para de funcionar quando o calendário Date Picker (Flatpickr) não carrega por conflito de JavaScript, quando o formato de exibicao difere do formato que o site espera, ou quando opções como Disable Past Dates e Limit Hours bloqueiam mais do que deveriam.

Atenção

Como corrigir o embed do Instagram e Facebook quebrado no WordPress

O embed social quebrado no WordPress (posts do Instagram e Facebook) acontece porque a Meta descontinuou o oEmbed automático e passou a exigir app e token de acesso. A correção é usar o plugin oficial Smash Balloon para autenticar a incorporação com token válido.

Informativo

Como corrigir o erro de conformidade GDPR no WPForms

O WPForms GDPR checkbox não aparece quando a opção GDPR Enhancements esta desativada nas configurações do plugin: sem ela, o campo GDPR Agreement fica oculto no construtor e o consentimento não e coletado nem registrado na entrada.

Grave

Como corrigir o mapeamento de campos no User Registration do WPForms

O mapeamento de campos no User Registration do WPForms falha quando os dropdowns em Settings -> User Registration não apontam para os campos certos do formulário, quando o campo Email obrigatório esta ausente ou quando a Meta Key de um custom user meta não casa com o nome real do campo, fazendo os dados não chegarem ao perfil do usuário.

Grave

Como corrigir o Course Builder que não carrega no Tutor LMS

Quando o Course Builder não carrega no Tutor LMS, o editor de curso fica preso no spinner, abre em branco ou retorna nonce inválido. A causa quase sempre é minificação agressiva de JavaScript por plugin de cache ou conflito de plugin SEO que quebra o painel.

Setores

Extensões

Integrações

Como corrigir o CSS personalizado que não aplica no WPForms

O que é o CSS do WPForms que não aplica no formulário?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir relatórios que não exibem progresso no Tutor LMS

Como corrigir o erro do campo Date/Time no WPForms

Como corrigir o embed do Instagram e Facebook quebrado no WordPress

Como corrigir o erro de conformidade GDPR no WPForms

Como corrigir o mapeamento de campos no User Registration do WPForms

Como corrigir o Course Builder que não carrega no Tutor LMS

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos