WPForms Astra: estilos não aplicam, como corrigir o form

Tipo Page Builders

Nome do erro Estilos do WPForms nao aplicam com o Astra Pro EN: WPForms styles not applying with Astra Pro theme

Severidade Informativo

Descrição Quando o estilo do WPForms não aplica com o Astra Pro, o formulário aparece sem CSS porque a opção Include Form Styling esta em No styling, o CSS do tema vence por especificidade, ou o cache combinou e removeu a folha de estilo do WPForms.

O que é estilos do WPForms que não aplicam com o Astra Pro?

O WPForms carrega o visual do formulário por uma folha de estilo própria, controlada pela opção Include Form Styling em WPForms, Configurações, Geral. Essa opção define se o plugin entrega o estilo base mais o tema de formulário, apenas o estilo base, ou nenhum estilo. Quando esta em No styling, o WPForms não injeta CSS algum e o formulário passa a herdar inteiramente o tema ativo, que no seu caso e o Astra Pro. O resultado e um formulário com aparencia crua: campos sem espacamento, botão sem cor e rotulos desalinhados.

O sintoma também surge quando o Astra Pro aplica estilo global de formulários pelo Customizer, ou quando o tema carrega seu CSS depois do WPForms com seletores de maior especificidade, sobrescrevendo as regras do plugin. Por fim, plugins de cache que combinam e minificam CSS podem deixar a folha do WPForms de fora do arquivo final, e ai o formulário renderiza sem estilo nenhum mesmo com a configuração correta. Identificar qual das três frentes esta agindo e o que define a correção.

Como identificar

O formulário do WPForms aparece sem espacamento, sem cor no botão e com os campos empilhados sem estilo, parecendo HTML cru dentro de uma página feita no Astra Pro.
O mesmo formulário renderiza com estilo correto na previa do construtor do WPForms, mas perde o visual quando publicado na página do tema Astra.
Os rotulos, os campos e o botão Enviar herdam a tipografia e as cores globais do Astra Pro em vez do estilo próprio do WPForms.
No inspetor do navegador, as regras CSS do WPForms aparecem riscadas (sobrescritas) por regras do tema Astra com seletor mais específico.
A folha de estilo do WPForms (wpforms-full.css) não aparece na aba Network do navegador, indicando que o CSS não foi carregado na página.

Antes de começar: Antes de mexer no Customizer do Astra Pro, em configurações globais do WPForms ou no plugin de cache em um site em producao, faca um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para poder reverter caso o visual de outras páginas seja afetado.

Como prevenir

Deixe a opção Include Form Styling do WPForms em Base and form theme styles, a menos que você realmente va estilizar o formulário inteiro pelo tema de proposito.
Sempre que adicionar um plugin de cache ou otimização, valide as páginas com formulário para garantir que a folha do WPForms continua sendo carregada após a combinacao de CSS.
Concentre as personalizacoes visuais do formulário no próprio WPForms ou em CSS Adicional do Customizer, evitando estilos globais do Astra que disputem especificidade com o plugin.
Após atualizar o WPForms ou o Astra Pro, recarregue uma página de teste com formulário para confirmar que o estilo continua aplicado antes de propagar para o site todo.

Causa

A opção Include Form Styling em WPForms, Configurações, Geral esta definida como No styling, entao o WPForms não injeta nenhum CSS e o formulário herda apenas o visual do tema Astra Pro.
A opção Include Form Styling esta em Base styling only, que entrega so o esqueleto sem o tema de formulário completo, fazendo cores e botão ficarem sem o acabamento esperado sobre o Astra.
O Astra Pro aplica estilo global de formulários pelo Customizer (seção de cores e tipografia) e essas regras sobrescrevem o CSS do WPForms por terem maior especificidade ou carregarem depois na página.
Um plugin de cache ou otimização ativo no site (por exemplo combinando e minificando arquivos CSS) deixou a folha wpforms-full.css de fora do CSS combinado, e o formulário renderiza sem a folha de estilo do plugin.
O Modern Markup do WPForms esta desligado enquanto o estilo personalizado do formulário foi montado para o markup moderno (ou o inverso), entao os seletores do CSS deixam de casar com as classes que o formulário realmente gera.

Como resolver

Ajuste o Include Form Styling para o estilo completo: Esta e a correção mais comum. Va as configurações gerais do WPForms e mude a opção de estilo para entregar o estilo base mais o tema de formulário, em vez de No styling ou Base styling only. Salve e recarregue a página do formulário para confirmar que o visual voltou.
```
Painel WP -> WPForms -> Configurações -> Geral
Localize a opção Include Form Styling
Selecione 'Base and form theme styles'
Clique em Salvar Configurações e recarregue a página pública do formulário
```
Limpe o cache do site e do navegador: Se você usa um plugin de cache ou otimização, limpe o cache depois de mudar a configuração para que a folha de estilo do WPForms volte a sair na página. Teste também em uma aba anonima para descartar cache do próprio navegador.
```
Painel WP -> abra o plugin de cache em uso e clique em Limpar Cache
Recarregue a página do formulário em uma janela anonima do navegador
```
Confirme que a folha do WPForms esta carregando: Abra a página pública do formulário e use o inspetor do navegador para verificar se a folha de estilo do WPForms aparece. Se ela não estiver na lista, o problema e de carregamento (cache ou minificacao); se estiver mas riscada, o problema e de especificidade com o tema.
```
Abra a página do formulário -> tecla F12 -> aba Network
Filtre por CSS e recarregue a página (F5)
Procure por wpforms-full.css na lista de arquivos carregados
```
Isole o estilo global de formulários do Astra Pro: Se a folha do WPForms carrega mas vem sobrescrita pelo Astra, abra o Customizer do Astra e verifique a seção de estilo de formulários. Ajuste ou neutralize as cores e a tipografia globais que estão vencendo o CSS do WPForms para a página em questao.
```
Painel WP -> Aparencia -> Personalizar (Customizer)
Abra a seção de cores e tipografia de formulários do Astra
Revise os valores que estão sobrescrevendo o botão e os campos do WPForms
```
Force a especificidade com CSS quando o tema insistir: Quando o estilo do Astra Pro continua vencendo regras pontuais, adicione um CSS adicional que aumente a especificidade do seletor do WPForms apenas no que precisa, em vez de desligar o estilo do tema inteiro. Coloque esse CSS no Customizer, em CSS adicional, para não perder na atualização.
```
Painel WP -> Aparencia -> Personalizar -> CSS Adicional
Cole as regras com o seletor .wpforms-container mais específico
Publique e recarregue a página do formulário para conferir
```

CSS

/* CSS Adicional do Customizer: aumenta a especificidade do WPForms
   para vencer o estilo global de formularios do Astra Pro,
   sem desligar o tema inteiro. Ajuste cores conforme sua marca. */
.wpforms-container .wpforms-form button[type="submit"].wpforms-submit {
    background-color: #0073aa;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form textarea {
    border: 1px solid #cccccc;
    padding: 10px;
}

Perguntas frequentes

Por que o formulário do WPForms fica sem estilo no tema Astra Pro

Na maioria dos casos a opção Include Form Styling do WPForms esta em No styling, entao o plugin não injeta CSS e o formulário herda so o visual do Astra. Mude essa opção para Base and form theme styles em WPForms, Configurações, Geral e recarregue a página.

Onde fica a configuração de estilo do WPForms

A configuração fica em WPForms, Configurações, Geral, no campo Include Form Styling. Ela oferece estilo base mais tema de formulário, apenas estilo base, ou nenhum estilo. Para o formulário sair estilizado, escolha a opção que inclui o tema de formulário completo.

O Astra Pro pode sobrescrever o CSS do WPForms

Sim. O Astra Pro aplica estilo global de formulários pelo Customizer, e essas regras podem vencer o CSS do WPForms por especificidade ou ordem de carregamento. Ajuste as cores e a tipografia de formulários no Customizer do Astra ou aumente a especificidade do seletor do WPForms em CSS Adicional.

Como sei se a folha de estilo do WPForms esta carregando

Abra a página do formulário, pressione F12, va na aba Network, filtre por CSS e recarregue. Procure por wpforms-full.css na lista. Se a folha não aparece, o problema e de carregamento, geralmente cache ou minificacao; se aparece mas riscada no inspetor, e disputa de especificidade com o tema.

Um plugin de cache pode deixar o formulário sem estilo

Pode. Plugins que combinam e minificam CSS as vezes deixam a folha do WPForms de fora do arquivo final, e o formulário renderiza cru. Limpe o cache após qualquer mudanca de configuração e, se persistir, exclua a folha do WPForms da combinacao de CSS no plugin de otimização.

O que e o Modern Markup do WPForms e por que ele importa no estilo

O Modern Markup e o modo de marcacao mais novo do WPForms, com classes e variaveis de estilo proprias. Se o CSS personalizado do formulário foi escrito para um modo e o site esta no outro, os seletores deixam de casar com as classes geradas e o estilo não aplica. Mantenha o CSS alinhado ao modo configurado em WPForms, Configurações, Geral.

Preciso editar arquivos do tema para corrigir o estilo do formulário

Não. A correção e feita pelo painel: ajustar o Include Form Styling no WPForms, revisar o Customizer do Astra e, se necessário, colar regras em CSS Adicional. Evite editar arquivos do tema diretamente, pois as mudancas se perdem na próxima atualização.

Mudar o Include Form Styling afeta os outros formulários do site

Sim, a opção Include Form Styling e global e vale para todos os formulários do WPForms no site. Por isso, ao alterar, revise rapidamente as outras páginas com formulário para confirmar que o visual ficou correto em todas, e não so na que você estava ajustando.

Grave

Como corrigir o erro de query no Listing Grid do JetEngine

O erro de query no Listing Grid do JetEngine ocorre quando a Custom Query do Query Builder falha ou não retorna nada: tipo de query trocado, SQL invalido, meta query que exclui todos os registros ou macro vazia. O grid fica vazio ou exibe aviso de banco enquanto o Preview do Query Builder parece correto.

Grave

Como corrigir o JetSmartFilters que não filtra dados dinâmicos

O JetSmartFilters que não filtra mostra o filtro aplicado mas o Listing Grid do JetEngine continua igual, sem reduzir os resultados. A causa quase sempre e o provider errado no campo This filter for, o Query ID divergente entre filtro e listagem, ou o indexador desligado para filtros de taxonomia e meta.

Atenção

Como corrigir a falha de upload de arquivos no JetFormBuilder

A falha de upload no JetFormBuilder acontece quando o campo Media Field rejeita o arquivo por exceder o limite de tamanho ou de quantidade, por não casar com o ALLOW MIME TYPES configurado, ou por o usuário não ter o nível de USER ACCESS exigido para enviar.

Grave

Como corrigir o erro de Dynamic Content do ACF PRO no Elementor

O Dynamic Content do ACF no Elementor falha quando o campo não surge na lista de Dynamic Tags ou renderiza vazio no widget. As causas reais são ausência do Elementor PRO, tipo não suportado como Repeater, meta key divergente ou Location Rules fora do template. A correção alinha a fonte ACF Field ou usa Post Custom Field.

Informativo

Como corrigir hover effects do Elementor que não funcionam no Safari

Os hover effects do Elementor não funcionam no Safari quando o navegador serve um arquivo CSS desatualizado, quando a transição depende de uma propriedade que o WebKit exige com prefixo -webkit-, ou quando o efeito é acionado por :hover em um iPhone, onde não existe ponteiro de mouse.

Atenção

Como corrigir o Taxonomy Field que não salva termos no ACF PRO

O ACF Taxonomy Field não salva termos quando a opção Save Terms está desligada: por padrão ela vem desativada, então o campo guarda a seleção apenas como metadado e nunca conecta o termo ao post na taxonomia.

Setores

Extensões

Integrações

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

O que é estilos do WPForms que não aplicam com o Astra Pro?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o erro de query no Listing Grid do JetEngine

Como corrigir o JetSmartFilters que não filtra dados dinâmicos

Como corrigir a falha de upload de arquivos no JetFormBuilder

Como corrigir o erro de Dynamic Content do ACF PRO no Elementor

Como corrigir hover effects do Elementor que não funcionam no Safari

Como corrigir o Taxonomy Field que não salva termos no ACF PRO

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