--- title: "Como corrigir o conflito de estilos de formulário entre WPForms e Elementor" url: https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/ date: 2026-06-17 author: "Clayton Margiotti" --- # Como corrigir o conflito de estilos de formulário entre WPForms e Elementor ## 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 botao sem cor ou em uma coluna so. ## Como identificar - O formulário aparece sem borda nos campos e sem cor no botao 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 Erros relacionados - [Como corrigir o formulário multi-página que não avanca no WPForms](https://full.services/wp-fixer/corrigir-multi-page-form-wpforms/) - [Como corrigir o erro do campo Date/Time no WPForms](https://full.services/wp-fixer/corrigir-date-time-field-wpforms/) - [Como corrigir carrinho do WooCommerce que esvazia sozinho](https://full.services/wp-fixer/corrigir-carrinho-esvazia-woocommerce/) --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services/", "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023", "Gold Medal - The WP Weekly Awards 2024" ], "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "TechArticle", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#article", "headline": "Como corrigir o conflito de estilos de formulário entre WPForms e Elementor", "url": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/", "inLanguage": "pt-BR", "datePublished": "2026-06-17T12:08:48-03:00", "dateModified": "2026-06-17T12:39:06-03:00", "author": { "@id": "https://full.services/#org" }, "publisher": { "@id": "https://full.services/#org" }, "isAccessibleForFree": false, "about": [ { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, { "@type": "Thing", "name": "Page Builders" } ], "mentions": { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/" }, "wordCount": 797, "description": "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, botao 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.", "articleSection": "Page Builders", "keywords": "aba estilo wpforms nao aparece elementor, conflito css wpforms elementor tema, formulario wpforms desalinhado no elementor, wpforms botao sem estilo elementor, wpforms sem estilo no elementor", "proficiencyLevel": "Intermediate", "citation": { "@type": "CreativeWork", "url": "https://wpforms.com/docs/how-to-choose-an-include-form-styling-setting/", "name": "WPForms — Using the Include Form Styling Setting" }, "mainEntity": { "@type": "SoftwareSourceCode", "name": "Como corrigir o conflito de estilos de formulário entre WPForms e Elementor", "programmingLanguage": "CSS", "codeRepository": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/", "isAccessibleForFree": false } }, { "@type": "FAQPage", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq", "isPartOf": { "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#article" }, "isAccessibleForFree": true, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq-q1", "name": "Por que o formulário fica bonito no WPForms mas quebra no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq-q2", "name": "A aba Estilo do widget WPForms não aparece no Elementor. O que falta?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "A aba de estilo so surge quando o Modern Markup esta ligado nas configurações gerais do WPForms. Ligue o botao 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 botao.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq-q3", "name": "Qual opção de Include Form Styling devo usar com Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq-q4", "name": "Os campos do formulário empilham em uma coluna so. Como resolver?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq-q5", "name": "O estilo aparece no editor do Elementor mas some na página publicada. Por que?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq-q6", "name": "Posso resolver o conflito so com CSS adicional?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-conflito-estilos-wpforms-elementor/#faq-q7", "name": "O CSS global do Elementor afeta todos os formulários do site?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } } ] } ] } ```