Estilizando WPForms com CSS Personalizado (Guia para Iniciantes)

Gostaria de poder adicionar estilos personalizados aos seus formulários? CSS é uma ferramenta poderosa que 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 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 da web para estilizar quase tudo o que você vê na internet. Ele controla tudo, desde o tamanho e estilo da fonte até cores e efeitos de passagem do mouse. Sem ele, a maior parte da web pareceria um arquivo de texto muito chato.

Lendo CSS

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

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

Como exemplo, confira 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á seu CSS ao título de todos os WPForms em seu site.

Em seguida, dentro das chaves, há uma propriedade CSS neste exemplo: font-size. Esta propriedade tem um valor de 26 pixels.

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

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

Escolhendo 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 maneiras de escolher um seletor:

1) Copiando um seletor da nossa lista

Criamos uma lista abrangente de seletores para cada campo disponível em nossos formulários, para que você possa simplesmente escolher o seletor para qualquer área à qual deseja aplicar CSS.

2) Usando ferramentas de desenvolvedor em seu navegador

Essa abordagem mais avançada pode apresentar uma pequena curva de aprendizado, mas é uma ótima opção se você quiser criar um monte de CSS personalizado.

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

Usando Propriedades e Valores CSS

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

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

Basta clicar no link desta lista para pular para a seção que você precisa:

• font-family
• color
• font-size
• background-color
• padding
• border
• border-radius

font-family

• • Definição: O estilo de fonte padrão
  • Exemplo: Para alterar a fonte padrão do título nos formulários do seu site para Arial, você usaria:

.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 site azul, você poderia usar:

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

font-size

• • Definição: O quão grande será a fonte (as unidades podem ser px, em ou rem)
  • Exemplo: Para tornar o título de todos os formulários do seu site com 35px, você usaria:

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

background-color

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

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

padding

• • Definição: A distância entre o elemento seletor e sua borda
  • Exemplo: Você notou como o exemplo acima não tem nenhuma distância entre o texto e as bordas da caixa colorida? Além da cor de fundo, vamos adicionar 20 pixels de preenchimento na parte superior e inferior do formulário, bem como 15 pixels de preenchimento nos lados direito e esquerdo. Faremos isso adicionando padding: 20px 15px; ao 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 uma borda de 3 pixels de espessura, linha sólida e cinza escuro ao nosso exemplo acima. Faremos isso 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 quão curvos serão os cantos de um elemento (0px é uma borda quadrada, números maiores são mais curvos)
  • Exemplo: Continuaremos a partir do exemplo acima, adicionando um raio de borda de 20 pixels para arredondar as bordas de nossos formulários. Podemos fazer isso adicionando border-radius: 20px; ao CSS que já fizemos:

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

Estilizando um Formulário Individual

Ao usar os seletores CSS descritos acima, você pode aplicar facilmente os mesmos estilos a todos os WPForms em seu site. Se você quiser aplicar alguns estilos apenas a um único formulário, no entanto, precisará adicionar o ID do formulário ao seletor.

Para encontrar facilmente o ID do formulário, você pode olhar em seu shortcode. Isso pode ser visto no editor de página/post, ou você pode ir para WPForms » Todos os Formulários e olhar na coluna Shortcode.

Neste exemplo, nosso formulário tem um ID de 4. Para aplicar nossos estilos anteriores apenas a este único formulário, precisaríamos adicionar #wpforms-4 ao início do seletor. Aqui está 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 criar seu snippet de CSS, o próximo passo é adicioná-lo ao seu site. Você pode aprender como fazer isso seguindo o guia da WPBeginner para adicionar CSS personalizado ao WordPress.

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

Em seguida, você gostaria de adicionar estilos personalizados ao botão de envio em seus formulários? Confira nosso tutorial sobre como personalizar o botão de envio para detalhes e exemplos.