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

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.

Conheça nosso Blog!

Facebook Comments

Alex Almeida

Administrador de Empresas, especialista em gestão empresarial, fotógrafo, designer digital, especialista em assuntos digitais com mais de 20 anos de experiência com projetos digitais de diversos segmentos, tamanhos e empresas internacionais. SEO & Fundador da Máquina de Resultados | Agência de Marketing Digital