Resumo de IA
Você gostaria de adicionar estilos personalizados aos seus formulários ou aplicar mais estilos de tema a eles? O WPForms, por padrão, incluirá uma estilização extensa para garantir que seus formulários fiquem ótimos com qualquer tema do WordPress. No entanto, isso pode dificultar a aplicação de CSS personalizado ou a exibição de estilos de tema.
Este tutorial abordará como escolher o nível de estilização de tema incluído em seus formulários usando a configuração Incluir Estilização do Formulário no WPForms.
Neste Artigo
Ajustando a Configuração “Incluir Estilização do Formulário”
Para alterar a quantidade de CSS que o WPForms inclui, vá para WPForms » Configurações no menu de administração do seu WordPress.
Na seção Geral, você encontrará o menu suspenso Incluir Estilização do Formulário. Por padrão, este menu suspenso será definido como Estilização base e de tema do formulário.
Observação: O resultado de cada opção de estilização disponível pode variar significativamente de tema para tema. Para obter melhores resultados, recomendamos manter a opção padrão Estilização base e de tema do formulário.
Se você decidir experimentar qualquer outra opção de estilização, certifique-se de clicar no botão Salvar Configurações para armazenar suas alterações.
Observação:
- Se você quiser estilizar seus formulários no editor de blocos sem escrever nenhum código CSS, habilite a opção Usar Marcação Moderna. Consulte nosso guia de estilização de formulários para saber mais.
- Novos usuários com a versão 1.8.1 ou superior do WPForms têm a configuração Marcação Moderna habilitada por padrão. Além disso, a opção de desabilitá-la está oculta no painel do WordPress para novos usuários. Veja nosso guia se você quiser saber como mostrar esta opção em sua página de configurações.
Habilitando Estilização Base e de Tema do Formulário
Ao usar Estilização base e de tema do formulário, duas camadas de CSS serão incluídas: estilos base e estilos de tema do formulário.
O tema do formulário inclui os estilos mais agressivos e geralmente substituirá os estilos que seu tema do WordPress pode tentar aplicar. Esta é a melhor maneira de garantir que seus formulários fiquem ótimos, independentemente do tema que você escolher usar.
Para exemplos desta configuração de estilização, vamos ver como um formulário simples aparece em dois temas comuns: Twenty Twenty e Astra.
Vinte Vinte
Astra
Como você pode ver nestas imagens, os formulários em ambos os temas têm muitos dos mesmos estilos. Por exemplo, eles têm a mesma cor de botão de envio, fundos brancos nos campos de entrada e os mesmos tamanhos de fonte. Cada um desses estilos, e muitos outros, vem da estilização do tema do formulário.
No entanto, esses formulários ainda têm alguns estilos diferentes. Por exemplo, Twenty Twenty deixa o texto do botão de envio em negrito, e cada formulário herda a fonte usada pelo tema do WordPress.
Habilitando Apenas Estilização Base
A opção Apenas estilização base não incluirá estilos de tema do formulário. Em vez disso, incluirá apenas os estilos base para o WPForms.
Na maioria dos casos, a diferença mais notável com esta configuração são os estilos de botão. Os estilos base do WPForms não incluem nenhum estilo de botão, portanto, toda a estilização de botão virá do tema do seu site.
No entanto, muitos outros estilos agora também serão tratados pelo seu tema. Com a maioria dos temas, você provavelmente notará diferenças de estilo bastante significativas com esta configuração.
Usaremos os mesmos temas acima como exemplos desta configuração nas capturas de tela abaixo. Você notará que algumas novas diferenças agora incluem o tamanho da fonte dos rótulos dos campos, a espessura da fonte dos sub-rótulos, a cor de fundo dos campos de entrada e os estilos dos botões.
Vinte Vinte
Astra
Problemas Comuns de Estilo Base e Como Corrigi-los
Ao usar apenas a configuração de Estilo Base, alguns problemas podem surgir, dependendo dos layouts dos seus formulários e outros recursos que você habilitou. Abaixo, explicamos como corrigir os problemas mais comuns.
Observação: Deseja adicionar estilos personalizados ao botão do seu formulário, mas evitar problemas com a configuração de apenas Estilo Base? Confira nosso tutorial de estilo de botão de envio para que você possa usar nossa configuração de Estilo Base e de tema de formulário.
Layouts de Múltiplas Colunas
Com a configuração de apenas Estilo Base ativa, layouts de múltiplas colunas geralmente não funcionarão corretamente. Para corrigir isso, você precisará voltar para a opção Estilo Base e de tema de formulário ou adicionar o seguinte CSS ao seu site:
Observação: Se você não tem certeza de como usar trechos de CSS personalizados, consulte o tutorial do WPBeginner sobre como adicionar CSS personalizado ao seu site.
Removendo Estilização do Formulário (Sem Estilização)
A opção Sem estilo impedirá que todos os estilos do WPForms sejam carregados para seus formulários incorporados. Isso significa que os únicos estilos que você verá em seus formulários virão do seu tema do WordPress.
Observação: A opção Sem estilo destina-se apenas a desenvolvedores e exigirá CSS personalizado extensivo.
Além disso, muitas opções de formulário não funcionarão mais corretamente com esta configuração. Por exemplo, todos os layouts de formulário serão removidos e as páginas de formulários de várias páginas ficarão visíveis ao mesmo tempo.
Pronto! Agora você sabe tudo o que precisa para determinar a melhor opção de estilo de formulário para o seu site.
Em seguida, você gostaria de saber como personalizar o botão de envio do seu formulário? Certifique-se de conferir nosso tutorial de estilo de botão de envio para obter detalhes sobre como personalizar cores, tamanho e muito mais.