Resumo de IA
Gostaria de adicionar estilos personalizados aos seus formulários ou aplicar mais estilos do tema a eles? O WPForms, por defeito, incluirá estilos extensivos para garantir que os seus formulários fiquem ótimos com qualquer tema do WordPress. No entanto, isto pode dificultar a aplicação de CSS personalizado ou a exibição de estilos do tema.
Este tutorial irá abordar como escolher o nível de estilo do tema incluído nos seus formulários, utilizando a definição Incluir Estilos do Formulário no WPForms.
Neste Artigo
Ajustar a Definição “Incluir Estilos do Formulário”
Para alterar a quantidade de CSS que o WPForms inclui, vá a WPForms » Definições no seu menu de administração do WordPress.
Na secção Geral, encontrará o menu suspenso Incluir Estilos do Formulário. Por defeito, este menu suspenso estará definido como Estilos base e do tema do formulário.
Nota: O resultado de cada opção de estilo disponível pode variar significativamente de tema para tema. Para melhores resultados, recomendamos manter a opção padrão Estilos base e do tema do formulário.
Se decidir experimentar qualquer outra opção de estilo, certifique-se de clicar no botão Guardar Definições para armazenar as suas alterações.
Nota:
- Se desejar estilizar os seus formulários no editor de blocos sem escrever qualquer código CSS, ative a opção Usar Marcação Moderna. Consulte o nosso guia de estilos de formulário para saber mais.
- Novos utilizadores com a versão 1.8.1 ou superior do WPForms têm a definição de Marcação Moderna ativada por defeito. Além disso, a opção para desativá-la está oculta no painel do WordPress para novos utilizadores. Consulte o nosso guia se desejar saber como mostrar esta opção na sua página de definições.
Ativar Estilos Base e do Tema do Formulário
Ao usar Estilos base e do tema do formulário, duas camadas de CSS serão incluídas: estilos base e estilos do tema do formulário.
O tema do formulário inclui os estilos mais agressivos e geralmente substituirá os estilos que o seu tema do WordPress possa tentar aplicar. Esta é a melhor forma de garantir que os seus formulários ficam ótimos, independentemente do tema que escolher usar.
Para exemplos desta definição de estilo, vamos ver como um formulário simples aparece em dois temas comuns: Twenty Twenty e Astra.
Vinte Vinte
Astra
Como pode ver nestas imagens, os formulários em ambos os temas têm muitos dos mesmos estilos. Por exemplo, têm a mesma cor de botão de envio, fundos brancos nos campos de entrada e os mesmos tamanhos de letra. Cada um destes estilos, e muitos outros, provém dos estilos do tema do formulário.
No entanto, estes formulários ainda têm alguns estilos diferentes. Por exemplo, o Twenty Twenty torna o texto do botão de envio em negrito, e cada formulário herda o tipo de letra usado pelo tema do WordPress.
Ativar Apenas Estilos Base
A opção Apenas estilos base não incluirá estilos do 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 definição são os estilos dos botões. Os estilos base do WPForms não incluem quaisquer estilos de botões, pelo que todo o estilo dos botões virá do tema do seu site.
No entanto, muitos outros estilos serão agora tratados pelo seu tema. Com a maioria dos temas, 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 ecrã abaixo. Notará que algumas novas diferenças incluem agora o tamanho da fonte dos rótulos dos campos, o peso da fonte das sub-etiquetas, a cor de fundo dos campos de entrada e os estilos dos botões.
Vinte Vinte
Astra
Problemas Comuns de Estilo Base e Como Resolvê-los
Ao usar apenas a configuração de Estilo Base, alguns problemas podem surgir, dependendo dos layouts dos seus formulários e de outros recursos que ativou. Abaixo, explicámos como resolver os problemas mais comuns.
Nota: Quer adicionar estilos personalizados ao botão do seu formulário, mas evitar problemas com a configuração de apenas Estilo Base? Consulte o nosso tutorial de estilo de botões de envio para que possa usar a nossa configuração de Estilo Base e de tema de formulário em vez disso.
Layouts de Múltiplas Colunas
Com a configuração de apenas Estilo Base ativa, os layouts de múltiplas colunas geralmente não funcionarão corretamente. Para resolver isto, terá de voltar à opção Estilo Base e de tema de formulário ou adicionar o seguinte CSS ao seu site:
Nota: Se não tem a certeza de como usar trechos de CSS personalizados, consulte o tutorial do WPBeginner sobre como adicionar CSS personalizado ao seu site.
Remover Estilos do Formulário (Sem Estilos)
A opção Sem estilo impedirá que todos os estilos do WPForms sejam carregados para os seus formulários incorporados. Isto significa que os únicos estilos que verá nos seus formulários virão do seu tema WordPress.
Nota: A opção Sem estilo destina-se apenas a programadores e exigirá CSS personalizado extenso.
Adicionalmente, muitas opções de formulário deixarão de funcionar 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 todas visíveis de uma só vez.
É tudo! Agora sabe tudo o que precisa para determinar a melhor opção de estilo de formulário para o seu site.
Em seguida, gostaria de saber como personalizar o botão de envio do seu formulário? Certifique-se de consultar o nosso tutorial de estilo de botões de envio para obter detalhes sobre a personalização de cores, tamanho e muito mais.