WPForms layout quebrado no mobile: como corrigir

Tipo Outros erros

Nome do erro Layout do formulario quebrado no mobile EN: Broken form layout on mobile

Severidade Atenção

Descrição O layout quebrado no mobile do WPForms acontece quando as colunas do formulário não empilham em coluna única no celular, geralmente porque a configuração Include Form Styling esta reduzida, falta a classe wpforms-mobile-full nos campos ou o CSS do tema sobrescreve os estilos do plugin.

O que é WPForms layout quebrado no mobile?

O WPForms layout quebrado no mobile descreve o formulário que aparece certo no desktop, mas no celular fica com campos sobrepostos, colunas espremidas lado a lado, botão deslocado ou texto cortado. O WordPress entrega o mesmo HTML para todos os dispositivos, e e o CSS responsivo do WPForms que reorganiza as colunas em uma única coluna nas telas pequenas. Quando esse CSS não carrega por completo, ou e sobrescrito, a estrutura de múltiplas colunas permanece no mobile e a leitura quebra.

A causa raiz mais comum, segundo a documentação oficial do WPForms, esta na configuração Include Form Styling, em WPForms, Settings, General. Quando ela esta em Base styling only ou No styling, os layouts de múltiplas colunas, nas palavras da própria doc, generally will not function properly, ou seja, deixam de se reorganizar. Layouts montados com classes de coluna como wpforms-one-half também não empilham sozinhos no celular, eles dependem da classe wpforms-mobile-full ou do campo Layout para virar coluna única. Some-se a isso o CSS de tema ou page builder que sobrescreve as regras do plugin, e o formulário quebra nas telas estreitas.

Como identificar

No celular, dois ou mais campos que ficavam lado a lado no desktop continuam em colunas espremidas, sem empilhar em uma única coluna.
O botão de envio, os rotulos ou o texto dos campos aparecem cortados, sobrepostos ou saindo para fora da largura da tela.
O formulário que estava perfeito no desktop fica desalinhado apenas em smartphones, enquanto no monitor segue correto.
Após trocar a opção Include Form Styling para Base styling only ou No styling, o layout de colunas do formulário parou de se reorganizar.
Campos montados com classes wpforms-one-half ou wpforms-one-third permanecem lado a lado no mobile em vez de virar coluna única.

Antes de começar: Antes de alterar a configuração Include Form Styling, editar o CSS Adicional ou mexer no plugin de cache em producao, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para poder reverter caso o layout do formulário quebre em outra tela.

Como prevenir

Mantenha a configuração Include Form Styling em Base and form theme styling, salvo necessidade técnica real, já que os modos reduzidos derrubam os layouts de múltiplas colunas.
Prefira o campo Layout nativo do WPForms para montar colunas, pois ele se ajusta sozinho ao tamanho da tela em vez de depender de classes CSS manuais.
Ao usar classes de coluna como wpforms-one-half, sempre acrescente wpforms-mobile-full para garantir o empilhamento em coluna única no celular.
Teste todo formulário novo em um celular real ou no modo responsivo do navegador antes de publicar, e valide de novo após qualquer mudanca de tema ou page builder.

Causa

A configuração Include Form Styling, em WPForms, Settings, General, esta definida como Base styling only ou No styling: a própria doc afirma que nesses modos os layouts de múltiplas colunas generally will not function properly, entao as colunas não se reorganizam no celular.
Os campos foram dispostos em colunas com as classes wpforms-one-half ou wpforms-one-third sem a classe wpforms-mobile-full: essas classes de coluna não empilham sozinhas no mobile e dependem de wpforms-mobile-full para virar coluna única nas telas pequenas.
O formulário usa colunas montadas por CSS Classes em vez do campo Layout nativo, que e o recurso que, segundo a doc, ajusta automaticamente o layout ao tamanho da tela do usuário.
Um CSS do tema ou do page builder (Elementor, Divi, Astra) sobrescreve as media queries responsivas do WPForms com regras de largura fixa ou float que mantem as colunas lado a lado no mobile.
Um plugin de cache ou de otimização minificou, combinou ou adiou a folha de estilos do WPForms, fazendo o CSS responsivo do formulário carregar incompleto ou fora de ordem no carregamento da página.

Como resolver

Restaure a configuração Include Form Styling para o padrão: Em WPForms, Settings, General, volte a opção Include Form Styling para Base and form theme styling, que e o padrão recomendado pela doc oficial. Os modos Base styling only e No styling removem o CSS que reorganiza as colunas em uma única coluna no mobile.
```
Painel WP -> WPForms -> Settings -> General
No campo Include Form Styling, selecione 'Base and form theme styling'
Clique em Save Settings e recarregue a página do formulário no celular
```
Adicione a classe wpforms-mobile-full aos campos em coluna: Para cada campo que esta em coluna lado a lado, abra a aba Advanced no construtor e inclua a classe preset wpforms-mobile-full no campo CSS Classes. Essa classe oficial força o campo a ocupar largura total e empilhar em coluna única no mobile.
```
Painel WP -> WPForms -> abra o formulário no construtor
Clique no campo em coluna -> aba Advanced -> CSS Classes
Digite wpforms-mobile-full e selecione a classe na lista sugerida
Repita para cada campo em coluna e clique em Save
```
Migre as colunas para o campo Layout nativo: Em vez de montar colunas por classes CSS manuais, use o campo Layout do WPForms, que a doc recomenda por ajustar o arranjo automaticamente ao tamanho da tela. Arraste o campo Layout, escolha o número de colunas e mova os campos para dentro dele.
```
No construtor, arraste o campo Layout para o formulário
Escolha o número de colunas (ex.: duas colunas)
Arraste os campos existentes para dentro de cada coluna do Layout
Salve e teste a previa em uma tela estreita
```
Anule o CSS de tema ou page builder que sobrescreve o formulário: Se o tema ou o page builder força largura fixa nas colunas, adicione uma media query em Aparencia, Personalizar, CSS Adicional, que devolva os campos a coluna única abaixo de 600 pixels. Use o código da seção abaixo como base.
```
Painel WP -> Aparencia -> Personalizar -> CSS Adicional
Cole a media query mobile do bloco de código abaixo
Publique e recarregue o formulário no celular para validar
```
Limpe o cache e teste sem otimização de CSS: Se o CSS responsivo ainda carrega incompleto, limpe o cache e desative temporariamente a minificacao, combinacao e o adiamento de CSS no plugin de otimização, recarregando o formulário no celular para confirmar se o estilo do WPForms volta inteiro.
```
Limpe o cache do plugin (ex.: WP Rocket -> Settings -> Dashboard -> Clear cache)
Em WP Rocket -> File Optimization, desative Minify/Combine CSS e Optimize CSS delivery
Recarregue o formulário no celular e reative as opções uma a uma para achar a culpada
```

CSS

/* Força coluna unica no formulario WPForms abaixo de 600px */
@media (max-width: 600px) {
    .wpforms-container .wpforms-field {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .wpforms-container .wpforms-field-row,
    .wpforms-container .wpforms-layout-column {
        display: block !important;
    }
    .wpforms-container .wpforms-submit {
        width: 100%;
    }
}

Perguntas frequentes

Por que meu formulário WPForms fica quebrado so no celular

Quase sempre o CSS responsivo do WPForms não esta empilhando as colunas no mobile. Verifique se a opção Include Form Styling esta em Base and form theme styling e se os campos em coluna tem a classe wpforms-mobile-full, que força a coluna única nas telas pequenas.

A opção Include Form Styling afeta o layout no mobile

Sim. Segundo a doc oficial, nos modos Base styling only e No styling os layouts de múltiplas colunas generally will not function properly. Volte a opção para Base and form theme styling em WPForms, Settings, General para o formulário voltar a se reorganizar no celular.

Para que serve a classe wpforms-mobile-full

Ela e uma classe preset do WPForms que força um campo a ocupar largura total e empilhar em coluna única no mobile. Adicione wpforms-mobile-full no campo CSS Classes, na aba Advanced, para cada campo que estava em coluna lado a lado.

O campo Layout resolve o problema de responsividade

Sim. A doc do WPForms recomenda o campo Layout porque ele ajusta o arranjo das colunas automaticamente ao tamanho da tela do usuário, ao contrario das classes CSS manuais. Migrar as colunas para o campo Layout costuma resolver o layout no mobile.

O tema ou o page builder pode quebrar o formulário no mobile

Pode. Temas e page builders como Elementor, Divi ou Astra as vezes impoem largura fixa ou float que sobrescreve as media queries do WPForms. Uma media query em CSS Adicional devolvendo os campos a coluna única abaixo de 600 pixels costuma neutralizar esse conflito.

Por que o formulário aparece certo no desktop e errado no celular

Porque o WordPress entrega o mesmo HTML aos dois e e o CSS responsivo que reorganiza as colunas no mobile. Se esse CSS não carrega inteiro ou e sobrescrito, a estrutura de várias colunas permanece e quebra apenas nas telas estreitas.

Preciso editar código para corrigir o layout no mobile

Na maioria dos casos não. Restaurar Include Form Styling, adicionar wpforms-mobile-full ou usar o campo Layout resolve pelo painel. So e preciso CSS quando o tema ou page builder sobrescreve os estilos do WPForms com regras proprias.

O cache pode causar o layout quebrado no mobile

Sim. A minificacao, combinacao ou o adiamento de CSS em plugins de cache podem fazer a folha de estilos do WPForms carregar incompleta. Limpe o cache e desative essas otimizacoes para o CSS do formulário uma a uma para confirmar se e essa a causa.

Grave

Como corrigir o painel frontend que não carrega para instrutores no Tutor LMS

Quando o painel instrutor não carrega no Tutor LMS, o frontend dashboard em /dashboard abre em branco, sem cabeçalho e rodapé ou retorna 404. A causa quase sempre é o tema sobrescrever o dashboard.php sem a condição de get_header, a página do painel não estar atribuída ou permalink fora de Post Name.

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.

Informativo

Como corrigir a barra lateral abaixo do conteúdo no WordPress

A sidebar abaixo do conteúdo no WordPress acontece quando o float quebra, a soma das larguras das colunas passa de 100% ou uma tag HTML ficou aberta. A correção é fechar o HTML, ajustar as larguras e aplicar clear para a barra lateral voltar ao lado do conteúdo.

Atenção

Como corrigir o Survey and Polls que não exibe resultados no WordPress

O WPForms não mostra resultados de survey quando o reporting não foi ativado no formulário, quando o campo usado não e suportado pelo addon Surveys and Polls, ou quando ainda não ha entradas coletadas para calcular o relatório.

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.

Crítico

Como corrigir a integração Stripe/PayPal que não processa pagamentos no WPForms

O pagamento Stripe ou PayPal não processa no WPForms quando o formulário envia mas a cobrança não acontece, é recusada ou fica pendente. As causas reais costumam ser SSL ausente na página, modo Teste ligado em produção, AJAX desabilitado, licença Pro inativa ou o campo de pagamento faltando no formulário.

Setores

Extensões

Integrações

Como corrigir o layout quebrado no mobile do WPForms no WordPress

O que é WPForms layout quebrado no mobile?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o painel frontend que não carrega para instrutores no Tutor LMS

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

Como corrigir a barra lateral abaixo do conteúdo no WordPress

Como corrigir o Survey and Polls que não exibe resultados no WordPress

Como corrigir o erro de conformidade GDPR no WPForms

Como corrigir a integração Stripe/PayPal que não processa pagamentos no WPForms

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