Resumo de IA
Gostaria de personalizar a aparência dos seus formulários WordPress? No WPForms, você pode facilmente adicionar classes CSS e estilos personalizados para que seus formulários fiquem como você deseja.
Este tutorial mostrará 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
Observação: Se você é novo em CSS, nosso guia para iniciantes sobre estilização de formulários com CSS é o melhor lugar para começar.
O que é uma Classe CSS?
Classes CSS são uma forma de direcionar os elementos que você deseja estilizar em seu site.
No WPForms, os campos recebem automaticamente várias classes CSS. Por exemplo, se um campo for definido com um Tamanho do Campo de Grande, ele receberá a classe CSS wpforms-field-large.
Ao adicionar uma classe CSS personalizada, você pode facilmente direcionar um campo de formulário específico ou aplicar os mesmos estilos a vários campos.
Observação: Se você deseja estilizar seus formulários, mas pular o uso de classes CSS personalizadas ou a escrita de qualquer código, considere conferir nosso tutorial de estilização de formulários.
Adicionando Classes CSS Personalizadas no WPForms
No WPForms, você pode adicionar suas próprias classes CSS personalizadas a campos de formulário individuais, ao botão de envio ou ao contêiner ao redor do seu formulário.
Adicionando Classes CSS a Campos de Formulário Individuais
Para adicionar uma classe CSS personalizada a um campo de formulário, você precisará criar um novo formulário ou editar um formulário existente.
Dentro do painel de visualização do construtor de formulários, clique no campo para abrir suas Opções de Campo. Em seguida, abra a aba Avançado e procure pelo campo rotulado Classes CSS.
Ao nomear uma classe CSS, você 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, portanto, é recomendado que você use letras minúsculas. Se você quiser que o nome da classe contenha mais de uma palavra, inclua um hífen (-) ou sublinhado (_) em vez de um espaço.
Para evitar problemas, sempre comece os nomes das suas classes com uma letra.
Para este exemplo, nomearemos nossa classe CSS como wpf-blue-background.
Ao adicionar wpf- no início das nossas classes, temos menos probabilidade de adicionar um nome de classe já em uso pelo tema do nosso site. Isso ajudará a evitar conflitos de estilo e tornará mais provável que nossos estilos sejam aplicados com sucesso.
Quando estiver pronto, adicione a classe CSS wpf-blue-background ao campo Classes CSS.
Se desejar, você também pode adicionar classes adicionais a este campo. Para fazer isso, simplesmente adicione um espaço entre cada nome de classe. Por exemplo:
wpf-fundo-azul wpf-fonte-negrito wpf-margem-xl
Observação: O campo Classes CSS também pode ser usado para exibir campos de formulário em um layout de várias colunas e como um layout de coluna única em dispositivos móveis.
Adicionando Classes CSS a um Contêiner de Formulário ou Botão de Envio
Para alguns estilos, pode ser útil direcionar o contêiner do formulário ou seu botão de envio.
Por exemplo, você pode querer que os botões de envio de todos os formulários de inscrição em seu site sejam estilizados de uma maneira e que os botões de envio em quaisquer formulários de contato gerais sejam estilizados de outra maneira. Uma maneira fácil de conseguir isso é adicionando a mesma classe CSS a quaisquer botões de envio que você gostaria de 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 Configurações » Geral. A partir daqui, vá para a seção Avançado e você poderá ver os campos para Classe CSS do Formulário e Classe CSS do Botão de Envio.
Se você quiser adicionar mais de um nome de classe, basta separar cada um com um espaço.
Observação: Se desejar, você pode usar uma classe CSS de formulário integrada para exibir seu formulário em uma única linha.
Criando e Adicionando Estilos CSS para o Seu Site
Agora que você adicionou uma classe CSS personalizada a um campo em seu formulário, pode criar os estilos que deseja aplicar.
Criação de Estilos CSS
CSS é uma ferramenta poderosa com uma vasta quantidade de opções de estilo disponíveis. Para obter instruções sobre como começar a criar CSS, consulte nosso Guia para Iniciantes em CSS.
Para nosso exemplo, simplesmente adicionaremos um fundo azul a qualquer campo com a classe wpf-blue-background. Ao segmentar um nome de classe dentro do CSS, ele deve sempre começar com um ponto (.), por exemplo .wpf-blue-background.
Como muitos estilos já estão sendo aplicados ao seu formulário, também é uma boa ideia tornar seu CSS mais específico. Para fazer isso, simplesmente adicione .wpforms-form na frente do nome da sua classe personalizada.
Aqui está nosso CSS de exemplo:
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
Se seus estilos personalizados não estiverem sendo aplicados com sucesso, você pode incluir !important antes do ponto e vírgula.
Observação: Usar !important só é necessário se seus estilos não estiverem sendo aplicados de outra forma. Nosso guia sobre solução de problemas de CSS contém mais detalhes.
Adicionando CSS ao Seu Site WordPress
Uma maneira 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 possui uma área de visualização ao vivo.
Para acessar a área de CSS do Personalizador de Temas, vá para Aparência » Personalizar e selecione a aba rotulada CSS Adicional.
Em seguida, adicione seu trecho de CSS personalizado. Quando estiver pronto, clique em Publicar.
Veja como nosso formulário de exemplo fica agora com a classe CSS e os estilos CSS aplicados:
Observação: Seus estilos personalizados não estão sendo exibidos? Por favor, confira nosso guia para solução de problemas de CSS para os problemas e soluções mais comuns.
Outra maneira de adicionar CSS personalizado que permanece consistente em todas as alterações de tema é usando WPCode. Para obter orientação sobre como aplicar CSS personalizado com WPCode, incluindo o uso de sua biblioteca de trechos de código CSS pré-construídos, consulte nosso guia sobre uso de trechos de código.
Se você quiser ver métodos adicionais para adicionar CSS, consulte o tutorial da WPBeginner sobre como adicionar CSS personalizado ao WordPress.
É isso! Agora você pode adicionar classes CSS personalizadas para estilizar áreas específicas de seus formulários.
Você também gostaria de ver e modificar nossos estilos de formulário integrados? Confira nosso tutorial sobre como personalizar campos individuais de formulário para todos os detalhes.