Estilizar o WPForms Com CSS Personalizado (Guia para Iniciantes)

Gostaria de poder adicionar estilos personalizados aos seus formulários? CSS é uma ferramenta poderosa que lhe permite dar aos seus formulários um estilo único e individual.

Este tutorial irá guiá-lo através da criação de CSS personalizado para estilizar os seus formulários, com muitos exemplos incluídos.

---

O que é CSS?

CSS significa Cascading Style Sheets, e é o código lido pelos navegadores web para estilizar quase tudo o que vê na internet. Controla tudo, desde o tamanho e estilo da fonte até às cores e efeitos de passagem do rato. Sem ele, a maior parte da web pareceria um ficheiro de texto muito aborrecido.

Leitura de CSS

Ao contrário de muitos outros tipos de código, o CSS é bastante fácil de aprender, mesmo sem qualquer experiência de codificação. O primeiro passo é apenas compreender os três componentes principais do CSS:

• Seletores: o ‘alvo’ ao qual deseja aplicar estilos
• Propriedades: o estilo específico que deseja alterar, como o tamanho da fonte ou a cor
• Valores: o efeito de estilo específico que deseja aplicar

Como exemplo, veja este trecho de CSS que define o tamanho do título do seu formulário:

.wpforms-form .wpforms-title {
    font-size: 26px !important;
}

O seletor neste exemplo é .wpforms-form .wpforms-title e aplicará o seu CSS ao título de todos os WPForms no seu site.

Em seguida, dentro das chavetas, existe uma propriedade CSS neste exemplo: font-size. Esta propriedade tem um valor de 26 píxeis.

Se decidirmos que queremos que o texto do título do nosso formulário seja maior (digamos 35 píxeis), teríamos apenas de alterar esse valor no CSS:

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

Escolher um Seletor CSS

O primeiro passo na escrita de CSS é identificar o seletor correto para direcionar uma parte específica do seu formulário. Existem duas formas de escolher um seletor:

1) Copiar um seletor da nossa lista

Criámos uma lista abrangente de seletores para cada campo disponível nos nossos formulários, para que possa simplesmente escolher o seletor para qualquer área à qual deseje aplicar CSS.

2) Utilizar as ferramentas de desenvolvedor no seu navegador

Esta abordagem mais avançada pode apresentar uma ligeira curva de aprendizagem, mas é uma ótima opção se quiser criar um monte de CSS personalizado.

As ferramentas de desenvolvedor permitem inspecionar qualquer parte da página web para ver qual CSS está a ser aplicado. Também pode testar alterações ao CSS em tempo real e vê-las aplicadas diretamente no seu navegador. O WPBeginner tem um ótimo tutorial sobre a utilização de ferramentas de desenvolvedor que deve ajudá-lo a começar, incluindo um vídeo passo a passo sobre a utilização das ferramentas de desenvolvedor do Chrome.

Utilizar Propriedades e Valores CSS

Agora que sabe como escolher um seletor CSS, podemos discutir como alterar estilos específicos com propriedades e valores CSS.

Abaixo, encontrará algumas propriedades CSS básicas que podem ser úteis para os seus formulários. Adicionalmente, encontrará exemplos de alterações de estilo que pode fazer combinando seletores, propriedades e valores para criar um trecho de CSS completo.

Basta clicar na ligação nesta lista para saltar para a secção de que necessita:

• font-family
• cor
• tamanho-da-fonte
• cor-de-fundo
• preenchimento
• borda
• raio-da-borda

font-family

• • Definição: O estilo de letra predefinido
  • Exemplo: Para alterar o tipo de letra predefinido do título nos formulários do seu site para Arial, utilizaria:

.wpforms-form .wpforms-title {
    font-family: 'Arial', sans-serif !important;
}

cor

• • Definição: Cor do tipo de letra
  • Exemplo: Para tornar o título de todos os formulários do seu site azul, poderia usar:

.wpforms-form .wpforms-title {
    color: #007acc !important;
}

tamanho-da-fonte

• • Definição: O tamanho da letra (as unidades podem ser px, em ou rem)
  • Exemplo: Para definir o título de todos os formulários do seu site em 35px, utilizaria:

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

cor-de-fundo

• • Definição: A cor que preencherá o fundo da área do seletor
  • Exemplo: Para tornar todo o fundo de um formulário cinzento claro, poderia usar o seguinte CSS:

.wpforms-form {
    background-color: #eee !important;
}

preenchimento

• • Definição: A distância entre o elemento seletor e a sua borda
  • Exemplo: Reparou como o exemplo acima não tem qualquer distância entre o texto e as bordas da caixa colorida? Além da cor de fundo, vamos adicionar 20 pixels de preenchimento à parte superior e inferior do formulário, bem como 15 pixels de preenchimento aos lados direito e esquerdo. Faremos isto adicionando padding: 20px 15px; ao CSS do exemplo anterior:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
}

borda

• • Definição: Determina o estilo e a espessura da borda de um elemento
  • Exemplo: Vamos adicionar uma borda com 3 pixels de espessura, uma linha sólida e cinzento escuro ao nosso exemplo acima. Faremos isto adicionando border: 3px solid #666; ao CSS existente para .wpforms-form:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
}

raio-da-borda

• • Definição: O quão curvas serão as bordas de um elemento (0px é uma borda quadrada, números mais altos são mais curvos)
  • Exemplo: Continuaremos a desenvolver o exemplo acima, adicionando um raio de borda de 20 pixels para arredondar as bordas dos nossos formulários. Podemos fazer isto adicionando border-radius: 20px; ao CSS que já criámos:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Estilizar um Formulário Individual

Ao utilizar os seletores CSS descritos acima, pode facilmente aplicar os mesmos estilos a todos os WPForms no seu site. Se desejar aplicar alguns estilos apenas a um único formulário, no entanto, terá de adicionar o ID do formulário ao seletor.

Para encontrar facilmente o ID do formulário, pode procurá-lo no seu shortcode. Isto pode ser visto no editor de página/post, ou pode ir a WPForms » Todos os Formulários e procurar na coluna Shortcode.

Neste exemplo, o nosso formulário tem um ID de 4. Para aplicar os nossos estilos anteriores apenas a este único formulário, teríamos de adicionar #wpforms-4 ao início do seletor. Aqui está o nosso CSS modificado:

#wpforms-4 .wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Depois de ter criado o seu snippet de CSS, o próximo passo é adicioná-lo ao seu site. Pode aprender como fazer isto seguindo o guia da WPBeginner para adicionar CSS personalizado ao WordPress.

É tudo! Agora pode criar estilos CSS personalizados para os seus formulários. Para mais exemplos de CSS para criar designs de formulários personalizados, consulte o nosso artigo sobre belos designs de formulários que pode copiar.

Em seguida, gostaria de adicionar estilos personalizados ao botão de submissão dos seus formulários? Consulte o nosso tutorial sobre como personalizar o botão de submissão para obter detalhes e exemplos.