Resumo de IA
Gostaria de personalizar a aparência dos seus formulários WordPress? No WPForms, pode facilmente adicionar classes CSS e estilos personalizados para que os seus formulários fiquem como desejar.
Este tutorial mostrar-lhe-á como adicionar classes CSS personalizadas para estilizar elementos específicos do formulário, bem como como adicionar qualquer CSS personalizado ao seu site WordPress.
Neste Artigo
Nota: Se é novo em CSS, o nosso guia para iniciantes sobre estilização de formulários com CSS é o melhor lugar para começar.
O que é uma Classe CSS?
As classes CSS são uma forma de direcionar os elementos que gostaria de estilizar no seu website.
No WPForms, os campos recebem automaticamente várias classes CSS. Por exemplo, se um campo estiver definido com um Tamanho do Campo de Grande, ser-lhe-á atribuída a classe CSS wpforms-field-large.
Ao adicionar uma classe CSS personalizada, pode facilmente direcionar um campo de formulário específico ou aplicar os mesmos estilos a vários campos.
Nota: Se gostaria de estilizar os seus formulários mas sem usar classes CSS personalizadas ou escrever qualquer código, considere consultar o nosso tutorial de estilização de formulários.
Adicionar Classes CSS Personalizadas no WPForms
No WPForms, pode adicionar as suas próprias classes CSS personalizadas a campos de formulário individuais, ao botão de envio ou ao contentor à volta do seu formulário.
Adicionar Classes CSS a Campos de Formulário Individuais
Para adicionar uma classe CSS personalizada a um campo de formulário, terá de criar um novo formulário ou editar um formulário existente.
Dentro do painel de pré-visualização do construtor de formulários, clique no campo para abrir as suas Opções de Campo. Em seguida, abra o separador Avançadas e procure o campo rotulado Classes CSS.
Ao nomear uma classe CSS, pode usar apenas letras ou números, e não são permitidos espaços. Os nomes das classes diferenciam maiúsculas de minúsculas, pelo que se recomenda o uso de letras minúsculas. Se desejar que o nome da classe contenha mais do que uma palavra, inclua um hífen (-) ou um sublinhado (_) em vez de um espaço.
Para evitar problemas, comece sempre os nomes das suas classes com uma letra.
Para este exemplo, chamaremos a nossa classe CSS de wpf-blue-background.
Ao adicionar wpf- ao início das nossas classes, é menos provável que adicionemos um nome de classe já utilizado pelo tema do nosso site. Isto ajudará a evitar conflitos de estilo e tornará mais provável que os nossos estilos sejam aplicados com sucesso.
Quando estiver pronto, adicione a classe CSS wpf-blue-background ao campo Classes CSS.
Se desejar, também pode adicionar classes adicionais a este campo. Para o fazer, basta adicionar um espaço entre cada nome de classe. Por exemplo:
wpf-fundo-azul wpf-fonte-negrito wpf-margem-xl
Nota: O campo Classes CSS também pode ser usado para exibir campos de formulário num layout de várias colunas e como um layout de coluna única em dispositivos móveis.
Adicionar Classes CSS a um Contentor de Formulário ou Botão de Envio
Para alguns estilos, pode ser útil direcionar o contentor do formulário ou o seu botão de envio.
Por exemplo, pode querer que os botões de submissão de todos os formulários de registo no seu site sejam estilizados de uma forma, e que os botões de submissão de quaisquer formulários de contacto gerais sejam estilizados de outra forma. Uma forma fácil de conseguir isto é adicionar a mesma classe CSS a quaisquer botões de submissão que pretenda estilizar da mesma forma.
Para adicionar um nome de classe CSS personalizado para qualquer uma das opções, abra o construtor de formulários e vá para Definições » Geral. A partir daqui, vá para a secção Avançadas e verá campos para Classe CSS do Formulário e Classe CSS do Botão de Submissão.
Se pretender adicionar mais do que um nome de classe, basta separar cada um com um espaço.
Nota: Se pretender, pode usar uma classe CSS de formulário incorporada para exibir o seu formulário numa única linha.
Criar e Adicionar Estilos CSS para o Seu Site
Agora que adicionou uma classe CSS personalizada a um campo no seu formulário, pode criar os estilos que pretende aplicar.
Criação de Estilos CSS
CSS é uma ferramenta poderosa com uma vasta quantidade de opções de estilização disponíveis. Para instruções sobre como começar a criar CSS, consulte o nosso Guia para Iniciantes em CSS.
Para o nosso exemplo, simplesmente adicionaremos um fundo azul a qualquer campo com a classe wpf-blue-background. Ao direcionar um nome de classe dentro do CSS, este deve começar sempre com um ponto (.), por exemplo .wpf-blue-background.
Como muitos estilos já estão a ser aplicados ao seu formulário, é também uma boa ideia tornar o seu CSS mais específico. Para o fazer, basta adicionar .wpforms-form antes do nome da sua classe personalizada.
Aqui está o nosso CSS de exemplo:
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
Se os seus estilos personalizados não estiverem a ser aplicados com sucesso, pode incluir !important antes do ponto e vírgula.
Nota: Usar !important só é necessário se os seus estilos não estiverem a ser aplicados de outra forma. O nosso guia sobre resolução de problemas de CSS contém mais detalhes.
Adicionar CSS ao Seu Site WordPress
Uma forma rápida e fácil de adicionar CSS personalizado ao seu site é com o Personalizador de Temas do WordPress. Esta é uma opção popular porque está disponível em quase todos os temas e tem uma área de pré-visualização em tempo real.
Para aceder à área de CSS do Personalizador de Temas, vá para Aparência » Personalizar e selecione o separador rotulado CSS Adicional.
Em seguida, adicione o seu trecho de CSS personalizado. Quando estiver pronto, clique em Publicar.
Veja como o nosso formulário de exemplo fica agora com a classe CSS e os estilos CSS aplicados:
Nota: Os seus estilos personalizados não estão a ser exibidos? Por favor, consulte o nosso guia para resolução de problemas de CSS para os problemas e soluções mais comuns.
Outra forma de adicionar CSS personalizado que permanece consistente em alterações de tema é usando WPCode. Para orientação sobre como aplicar CSS personalizado com WPCode, incluindo o uso da sua biblioteca de trechos de código CSS pré-construídos, consulte o nosso guia sobre uso de trechos de código.
Se pretender ver métodos adicionais para adicionar CSS, consulte o tutorial da WPBeginner sobre como adicionar CSS personalizado ao WordPress.
É tudo! Agora pode adicionar classes CSS personalizadas para estilizar áreas específicas dos seus formulários.
Gostaria também de ver e modificar os nossos estilos de formulário incorporados? Consulte o nosso tutorial sobre a personalização de campos de formulário individuais para obter todos os detalhes.