Estilizando WPForms com CSS personalizado (Guia para iniciantes)

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

Este tutorial explica como criar CSS personalizado para estilizar os seus formulários, com muitos exemplos incluídos.

---

O que é CSS?

CSS significa Cascading Style Sheets (folhas de estilo em cascata) e é o código lido pelos navegadores Web para estilizar quase tudo o que vê na Internet. Controla tudo, desde o tamanho e o estilo do tipo de letra até às cores e aos efeitos de passagem. Sem ele, a maior parte da Web pareceria um ficheiro de texto muito aborrecido.

Ler CSS

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

• Selectores: o "alvo" ao qual pretende aplicar estilos
• Propriedades: o estilo específico que pretende alterar, como o tamanho ou a cor do tipo de letra
• Valores: o efeito de estilo específico que pretende 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 ele aplicará o seu CSS ao título de todos os WPForms no seu site.

Depois, entre parênteses rectos, há um CSS propriedade neste exemplo: font-size. Esta propriedade tem um valor de 26 pixéis.

Se decidirmos que queremos que o texto do título do nosso formulário seja maior (digamos, 35 pixéis), basta alterar esse valor no CSS:

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

Escolher um seletor CSS

O primeiro passo para escrever 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 selectores para todos os campos disponíveis nos nossos formulários, pelo que basta escolher o seletor para qualquer área a que pretenda aplicar CSS.

2) Utilizar as ferramentas de programador no seu browser

Esta abordagem mais avançada pode oferecer um pouco de curva de aprendizagem, mas é uma óptima opção se quiser criar um monte de CSS personalizadas.

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

Utilização de propriedades e valores CSS

Agora que já 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. Além disso, encontrará exemplos de alterações de estilo que pode efetuar combinando selectores, propriedades e valores para criar um fragmento completo de CSS.

Basta clicar na ligação desta lista para avançar para a secção de que necessita:

• família de letra
• cor
• tamanho da letra
• cor de fundo
• acolchoamento
• fronteira
• raio da margem

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 sítio para Arial, deve utilizar:

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

color

• • Definição: Cor da fonte
  • Exemplo: Para tornar o título de todos os formulários do seu sítio azul, pode utilizar:

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

font-size

• • Definição: Qual será o tamanho do tipo de letra (as unidades podem ser px, em ou rem)
  • Exemplo: Para que o título de todos os formulários do seu sítio tenha 35px, utilize:

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

background-color

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

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

padding

• • Definição: A distância entre o elemento seletor e a sua fronteira
  • Exemplo: Reparou que o exemplo acima não tem qualquer distância entre o texto e as margens da caixa colorida? Para além da cor de fundo, vamos adicionar 20 píxeis de preenchimento à parte superior e inferior do formulário, bem como 15 píxeis de preenchimento aos lados direito e esquerdo. Fazemo-lo adicionando padding: 20px 15px; para o CSS do exemplo anterior:

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

border

• • Definição: Determina o estilo e a espessura da borda de um elemento
  • Exemplo: Vamos adicionar um contorno com 3 píxeis de espessura, uma linha sólida e cinzento escuro ao nosso exemplo acima. Fazemo-lo 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;
}

border-radius

• • Definição: O grau de curvatura dos cantos de um elemento (0px é um canto quadrado, números mais altos são mais curvos)
  • Exemplo: Vamos continuar a basear-nos no exemplo anterior, adicionando um raio de fronteira de 20 píxeis para arredondar as extremidades dos nossos formulários. Podemos fazer isso adicionando border-radius: 20px; ao CSS que já efectuá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

Usando os seletores CSS descritos acima, você pode facilmente aplicar os mesmos estilos a todos os WPForms do seu site. No entanto, se quiser aplicar alguns estilos apenas a um único formulário, terá de adicionar o ID do formulário ao seletor.

Para encontrar facilmente o ID do formulário, pode procurar 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, precisamos de adicionar #wpforms-4 no 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 CSS, o próximo passo é adicioná-lo ao seu site. Pode aprender a fazê-lo seguindo o guia do WPBeginner para adicionar CSS personalizado ao WordPress.

É isso mesmo! Agora você pode criar estilos CSS personalizados para seus formulários. Para obter mais exemplos de CSS para criar designs de formulários personalizados, consulte o nosso artigo sobre designs de formulários bonitos que pode roubar.

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