CSS: Como customizar o formulário Contact Form 7

Se você está tendo dificuldades para customizar seus formulários usando o plugin Contact Form 7 para WordPress, vamos te ensinar como fazer isso usando o CSS.

A princípio, é necessário você ter instalado e ativado o plugin Contact Form 7. Quando instalado, você pode criar e customizar formulários do jeito que preferir. Assim, consegue incorporar seu shortcode na sua página do contact. Usar o CSS pode abrir novas possibilidades para seu site.

Eu não vou ensina-lo a fazer isso nesse artigo, estou assumindo que você já tenha seus formulários prontos para serem usados.

Sendo assim, vamos para a parte de customização.

• Onde adicionar o CSS customizado ao Contact Form 7 no seu site WordPress
• O formulário de fundo e de borda do CSS para Contact Form 7
• Formulário de contato 7 campos de entrada e área de texto CSS
• Formulário de contato 7 “Enviar botão” CSS
• Checkbox de CSS para o Contact Form 7
• Saída para todo o código CSS fornecido acima “como está”

Onde adicionar o CSS customizado ao Contact Form 7 no seu site WordPress

Existem algumas opções para adicionar .

1. 1. Adicione o CSS no seu “child theme”. Por exemplo, os temas child Genesis.
2. 2. Adicione o CSS para o campo “CSS Adicional” no customizador (recomendado)
3. 3. Tem uma caixa usada somente para CSS customizado no tema Thrive.

Para esse tutorial, estaremos usando a 2 opção, adicionando o CSS para o campo “CSS Adicional” fornecido através de navegar pelo painel do WordPress. O caminho é Aparência > Customizar > CSS Adicional.

O formulário de fundo e de borda do CSS  para Contact Form 7

Vamos começar com o fundo de seus formulários atuais.

O código abaixo irá estilizar o fundo do Contact Form 7 em todo o site. Isso significa que todos os formulários do seu site serão afetados. Se você não quiser adicionar um plano de fundo ou uma borda personalizada, ignore a adição completa desse código. Você pode ajustar os valores (marcados em vermelho) ao seu gosto.

• Uma pequena observação sobre os valores de padding: Esses valores ajudam a adicionar espaço entre os campos de entrada e as bordas do contêiner de cor de fundo. Portanto, mais uma vez você pode ajustá-los de acordo com seus formulários.

Se você usar o código abaixo sem modificá-lo, você deve acabar com um plano de fundo cinza médio com uma borda cinza escura sólida.

Formulário de contato 7 campos de entrada e área de texto CSS

O código a seguir irá estilizar o tamanho da fonte, os campos de entrada do formulário, a área de texto, a cor do plano de fundo, a cor da fonte, a largura do formulário e o preenchimento. Você pode ajustar esses valores (marcados em vermelho) de acordo com sua preferência.

Se você usar o código abaixo sem modificação, deverá ver cada um dos campos do formulário em um tom cinza claro.

Formulário de contato 7 “Enviar botão” CSS

O seguinte código abaixo irá estilizar o botão Enviar dos formulários do formulário de contato 7. Existem três regras aqui: input, input: hover e input: active. Deixe-me explicar o que cada um faz se você não tiver certeza.

1. input – É o estado do botão “como está” antes que qualquer ação tenha ocorrido nele.
2. input: hover – É o estado do botão quando um cursor é passado por cima dele.
3. input: active – É o estado do botão quando alguém clica no próprio botão.

Assim, você pode alterar os valores (marcados em vermelho) para cada um deles para estilizar ao seu gosto.

Se você usar o código abaixo sem modificação, você deve ver um botão vermelho, e ele deve mudar para um tom de cinza quando você passa o cursor do mouse sobre ele.

Checkbox de CSS para o Contact Form 7

Por último, como no tutorial em vídeo acima, o código CSS a seguir irá estilizar a caixa de seleção aumentando um pouco o tamanho, além de alinhar o rótulo de texto com o restante dos elementos no formulário de contato.

Saída para todo o código CSS fornecido acima “como está”

Certo, se você usou todo o código acima fornecido sem modificar uma única coisa, seus formulários devem se parecer com algo assim (sem o CSS de fundo e borda).

E sem o background e a borda, ele vai se parecer com isso.

Concluindo

Então, você tem isso, um tutorial rápido e fácil para adicionar alguns CSS personalizados simples aos formulários do formulário de contato 7 para torná-los mais pessoais para o seu site.

Se você tiver algum conhecimento básico, poderá brincar com os valores para realmente personalizar seus formulários de contato.

É claro que, se você não se sentir à vontade para brincar com os snippets e não se importar de instalar outro plug-in no seu blog WordPress, existe uma solução alternativa.

Você pode baixar e instalar o plugin Contact Form 7 Style.

Eu provavelmente deveria ter mencionado esse plug-in no início do tutorial, mas é melhor você codificar algo em seu site manualmente do que instalar outro plug-in hogging de recursos.