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

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.

Erros relacionados

- [Como corrigir o conflito de estilos de formulário entre WPForms e Elementor](https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/)
- [Como corrigir o erro de CSS no Customizer do Astra Pro](https://full.services/wp-fixer/corrigir-css-customizer-astra-pro/)
- [Como corrigir os estilos conflitantes entre Happy Addons e Astra Pro](https://full.services/wp-fixer/corrigir-conflito-estilos-happy-addons-astra-pro/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

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

**Fonte:** [WPForms Documentation — Form styles e Include Form Styling setting](https://wpforms.com/docs/)