WPForms Elementor estilos quebrados: corrigir

Tipo Page Builders

Nome do erro Conflito de estilos entre WPForms e Elementor EN: WPForms and Elementor style conflict

Severidade Atenção

Descrição O conflito de estilos entre WPForms e Elementor surge quando o formulário perde a aparencia dentro de uma página do Elementor: campos sem borda, botão sem cor ou layout em coluna única. Vem da opção de estilo do WPForms desligada, do Modern Markup desativado ou do CSS global do Elementor sobrescrevendo o formulário.

O que é o conflito de estilo do WPForms no Elementor?

O conflito de estilos entre WPForms e Elementor e a quebra visual do formulário quando ele e renderizado dentro de uma página construida no Elementor. O WPForms tem um CSS próprio em camadas (estilos base e estilos de tema do formulário) e o Elementor injeta o seu próprio CSS de fontes, cores e espacamentos globais. Quando as duas folhas de estilo competem pelo mesmo elemento, ou quando o CSS do WPForms e desligado nas configurações, o formulário aparece desalinhado, sem borda nos campos, com botão sem cor ou em uma coluna so.

Como identificar

O formulário aparece sem borda nos campos e sem cor no botão dentro da página do Elementor, mas fica correto na pre-visualizacao do próprio WPForms.
Campos que deveriam ficar lado a lado (layout multi-coluna) empilham em uma única coluna no Elementor.
A aba ‘Estilo’ (Style) do widget WPForms não aparece na barra lateral do Elementor.
A fonte e a cor do formulário mudam para a fonte e a cor globais do tema do Elementor em vez do estilo definido no WPForms.
Depois de salvar a página no Elementor o formulário fica estilizado no editor, mas perde o estilo na página publicada (visitante anonimo).

Como prevenir

Mantenha a opção ‘Include Form Styling’ em ‘Base and form theme styling’ e o Modern Markup ligado para o formulário sobrepor o tema por padrão
Estilize o formulário sempre pela aba de estilo do widget no Elementor, em vez de espalhar CSS solto que disputa especificidade com o tema
Exclua os arquivos de CSS do WPForms da combinacao do plugin de cache e teste a página como visitante anonimo após cada publicação

Causa

A opção 'Include Form Styling' em WPForms -> Settings -> General esta como 'Base styling only' ou 'No styling', entao a camada de estilo de tema do formulário (que sobrescreve o tema do site) não e carregada e o Elementor passa a mandar na aparencia.
O botão 'Use Modern Markup' esta desligado em WPForms -> Settings -> General, entao a aba 'Estilo' do widget WPForms não aparece no Elementor e os controles de campo, label e botão ficam indisponiveis.
Os Estilos Globais do Elementor (Elementor -> Configurações do Site -> Tipografia/Cores Globais) aplicam fonte e cor com especificidade maior do que o CSS base do WPForms, sobrescrevendo o formulário.
Um plugin de cache ou de otimização removeu o arquivo wpforms-full.min.css da página ao combinar ou adiar o CSS, deixando o formulário sem a folha de estilo.
O tema ativo ou um CSS adicional do Elementor tem regra agressiva em input, label ou button (ex.: input { border: 0 }) que atinge também os campos do formulário do WPForms.

Como resolver

Confirme a opção de estilo no WPForms: abra o painel e va até as configurações gerais do WPForms. Localize a lista 'Include Form Styling' e deixe na opção padrão, que carrega as duas camadas de CSS e e a mais forte contra o tema. Se estiver em 'Base styling only' ou 'No styling', e por isso que o Elementor venceu a disputa de estilo.
```
WPForms -> Settings -> General -> Include Form Styling: Base and form theme styling
```
Ative o Modern Markup: na mesma tela, ligue o botão do Modern Markup. Sem ele, a aba de estilo do widget no Elementor nem aparece e você perde os controles visuais de campo, label e botão.
```
WPForms -> Settings -> General -> Use Modern Markup: ON
```
Estilize pela aba Estilo do widget WPForms: edite a página no Elementor, selecione o widget WPForms e abra a aba de estilo. Ajuste Temas, Estilos de Campo, Estilos de Label e Estilos de Botão por ali. Definir o estilo nesse painel cria CSS com a especificidade certa para o formulário, sem brigar com o tema.
```
Elementor -> Widget WPForms -> aba Estilo (Style) -> Temas / Estilos de Campo / Estilos de Botão
```
Limpe o cache e regenere o CSS: se o estilo aparece no editor mas some na página publicada, o cache esta servindo uma versão sem o CSS do formulário. Limpe o cache do plugin de otimização e do Elementor e exclua os arquivos do WPForms da combinacao de CSS.
```
Elementor -> Ferramentas -> Regenerar arquivos e dados -> Regenerar CSS e dados
Excluir da otimização de CSS: wpforms-full.min.css
```
Neutralize a regra global do tema, se persistir: se ainda houver conflito de fonte ou borda, adicione um CSS de correção mirando o container do formulário para devolver o estilo do WPForms acima do CSS global do Elementor. Use o bloco de código abaixo como base e cole em Aparencia -> Personalizar -> CSS adicional.
```
.wpforms-container input.wpforms-field-medium { border: 1px solid #ccc; }
.wpforms-container button.wpforms-submit { color: inherit; background-color: inherit; }
```

CSS

/* CSS adicional: devolve o estilo do WPForms acima do CSS global do Elementor */
/* Aparencia -> Personalizar -> CSS adicional */
.wpforms-container .wpforms-field input[type=text],
.wpforms-container .wpforms-field input[type=email],
.wpforms-container .wpforms-field textarea {
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
    font-family: inherit;
}
.wpforms-container .wpforms-submit {
    background-color: #066aab;
    color: #ffffff;
    border: 0;
    border-radius: 4px;
}

Perguntas frequentes

Por que o formulário fica bonito no WPForms mas quebra no Elementor?

Na pre-visualizacao do WPForms so existe o CSS do formulário. Na página do Elementor entram também os estilos globais de fonte e cor do builder e do tema, que competem com o CSS do WPForms. Se a opção de estilo do formulário estiver fraca ou desligada, o Elementor vence e o formulário perde a aparencia.

A aba Estilo do widget WPForms não aparece no Elementor. O que falta?

A aba de estilo so surge quando o Modern Markup esta ligado nas configurações gerais do WPForms. Ligue o botão Use Modern Markup, salve, recarregue o editor do Elementor e a aba de estilo do widget passa a aparecer com os controles de campo, label e botão.

Qual opção de Include Form Styling devo usar com Elementor?

Use a opção padrão, Base and form theme styling. Ela carrega a camada de tema do formulário, que e a mais agressiva e tende a sobrescrever o que o tema ou o Elementor tentam aplicar. As opções Base styling only e No styling deixam o formulário a merce do CSS do tema.

Os campos do formulário empilham em uma coluna so. Como resolver?

O layout multi-coluna depende do CSS completo do WPForms. Ele quebra quando a opção esta em Base styling only ou quando o cache removeu o arquivo de estilo. Volte para Base and form theme styling e limpe o cache para os campos voltarem a ficar lado a lado.

O estilo aparece no editor do Elementor mas some na página publicada. Por que?

Quase sempre e cache. O plugin de otimização ou o próprio Elementor servem uma versão da página sem o CSS atualizado do formulário. Regenere os arquivos CSS do Elementor, limpe o cache do plugin de otimização e exclua o CSS do WPForms da combinacao de arquivos.

Posso resolver o conflito so com CSS adicional?

Da para neutralizar regras agressivas do tema com CSS mirando o container do formulário, mas isso e o último passo. Primeiro confirme a opção de estilo e o Modern Markup, porque o CSS adicional vira manutenção eterna se a base do WPForms estiver desligada.

O CSS global do Elementor afeta todos os formulários do site?

Sim. A tipografia e as cores globais do Elementor são aplicadas em todo o site e atingem os formulários que herdam estilo do tema. Por isso a recomendacao e deixar a camada de tema do WPForms ativa, para o formulário ter estilo próprio acima do global do builder.

Informativo

Como corrigir o Date Picker que não formata a data no ACF PRO

O ACF Date Picker formato sai errado quando o template usa o valor cru salvo no banco, que o ACF PRO sempre grava como Ymd (AAAAMMDD), em vez de aplicar o Return Format ou converter a string com DateTime antes de exibir.

Grave

Como corrigir erros de JavaScript no console ao usar o Elementor

O erro de JavaScript no console do Elementor aparece como mensagens Uncaught no DevTools do navegador (F12) e impede o editor de carregar ou quebra widgets no frontend. A causa quase sempre e outro plugin que duplica ou remove o jQuery, ou um plugin de cache que minifica e combina os arquivos JS do Elementor na ordem errada.

Atenção

Como corrigir o Image Field no ACF PRO

O Image Field do ACF PRO não retorna a URL quando o Return Format do campo está como Image Array ou Image ID, mas o template usa o valor como se fosse a string da URL. O ACF devolve um array ou um número de anexo, então o atributo src da imagem sai quebrado ou vazio.

Grave

Como corrigir o JetSmartFilters AJAX que não retorna resultados

O JetSmartFilters AJAX que não retorna resultados aplica o filtro, dispara a chamada ao admin-ajax.php, mas o Listing Grid volta vazio ou sem mudar. A causa quase sempre e o Query ID do filtro diferente do provider, o indexer não gerado, ou o cache servindo a página antiga.

Informativo

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.

Atenção

Como corrigir Elementor com widgets que não aparecem

O Elementor com widgets que não aparecem mostra o painel lateral vazio ou sem os widgets esperados, e elementos somem da página ao editar. A causa quase sempre e o JavaScript do editor bloqueado por minificacao ou cache, o Elementor PRO inativo (escondendo os widgets PRO), ou memória PHP insuficiente impedindo o painel de montar a lista.

Setores

Extensões

Integrações

Como corrigir o conflito de estilos de formulário entre WPForms e Elementor

O que é o conflito de estilo do WPForms no Elementor?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o Date Picker que não formata a data no ACF PRO

Como corrigir erros de JavaScript no console ao usar o Elementor

Como corrigir o Image Field no ACF PRO

Como corrigir o JetSmartFilters AJAX que não retorna resultados

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

Como corrigir Elementor com widgets que não aparecem

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