Estilizando WPForms com CSS personalizado (Guia para iniciantes)

Você gostaria de poder adicionar estilos personalizados aos seus formulários? O CSS é uma ferramenta poderosa que permite que você dê aos seus formulários um estilo único e individual.

Este tutorial o orientará sobre como criar CSS personalizado para estilizar seus formulários, com vários 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 o estilo da fonte até as cores e os efeitos de foco. Sem ele, a maior parte da Web se pareceria com um arquivo de texto muito chato.

Leitura de CSS

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

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

Como exemplo, veja este trecho de CSS que define o tamanho do título do 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, entre colchetes, há um CSS propriedade 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), precisaremos apenas alterar esse valor no CSS:

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

Escolha de um seletor CSS

A primeira etapa ao escrever CSS é identificar o seletor correto para direcionar uma parte específica de seu formulário. Há duas maneiras de escolher um seletor:

1) Copiar um seletor da nossa lista

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

2) Usando ferramentas de desenvolvedor em seu navegador

Essa abordagem mais avançada pode oferecer um pouco de 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.

Uso de propriedades e valores de 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 podem ser feitas combinando seletores, propriedades e valores para criar um trecho completo de CSS.

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

• família de fontes
• cor
• tamanho da fonte
• Cor de fundo
• acolchoamento
• fronteira
• raio da borda

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 azul o título de todos os formulários de seu site, você poderia usar:

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

font-size

• • Definição: Qual será o tamanho da fonte (as unidades podem ser px, em ou rem)
  • Exemplo: Para fazer com que o título de todos os formulários de seu site tenha 35px, você usaria:

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

background-color

• • Definição: A cor que preencherá o plano de fundo da área do seletor
  • Exemplo: Para tornar todo o plano de 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 que 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; 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 uma borda com 3 pixels de espessura, uma 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: Quão curvos serão os cantos de um elemento (0px é uma borda quadrada, números mais altos são mais curvos)
  • Exemplo: Continuaremos a desenvolver o exemplo acima, adicionando um border-radius de 20 pixels para arredondar as bordas dos 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;
}

Estilização de 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. No entanto, se quiser aplicar alguns estilos somente a um único formulário, será necessário adicionar o ID do formulário ao seletor.

Para encontrar facilmente o ID do formulário, você pode procurar em seu shortcode. Isso pode ser visto no editor de página/post, ou você pode acessar WPForms " All Forms e procurar na coluna Shortcode.

Neste exemplo, nosso formulário tem um ID de 4. Para aplicar nossos estilos anteriores somente a esse único formulário, precisaríamos 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 criar seu snippet de CSS, a próxima etapa é adicioná-lo ao seu site. Você pode saber como fazer isso seguindo o guia do WPBeginner para adicionar CSS personalizado ao WordPress.

É isso aí! 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 nosso artigo sobre belos designs de formulários que você pode roubar.

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