Como Estilizar Formulários do Contact Form 7 no WordPress

Você provavelmente instalou o Contact Form 7 em seu site WordPress porque ele é gratuito e tem sido um dos plugins de formulário de contato mais populares para WordPress.

No entanto, você pode ter notado que os formulários padrão parecem bem simples em seu site ativo. Esse estilo cinza básico pode destoar do resto do seu site e fazer com que o design geral pareça menos polido.

Como o Contact Form 7 não inclui um editor visual ou opções de estilo integradas, fazer alterações requer um pouco de trabalho se você não se sente confortável com código.

A boa notícia é que você não precisa ser um desenvolvedor para resolver isso. Com apenas alguns ajustes de CSS, você pode fazer seus formulários parecerem limpos, modernos e completamente alinhados à sua marca.

Neste guia para iniciantes, mostraremos como personalizar o Contact Form 7 passo a passo, sem a necessidade de habilidades avançadas de codificação ou design. 🙌

Por que estilizar seus formulários do Contact Form 7?

Estilizar seus formulários do Contact Form 7 torna seu site mais profissional, melhora a legibilidade e ajuda seus formulários a corresponderem à sua marca. Tudo isso pode aumentar a confiança e as conversões do formulário.

Antes de começarmos, o Contact Form 7 é um dos plugins de formulário de contato para WordPress mais populares. É gratuito e permite adicionar um formulário do WordPress usando um shortcode.

A desvantagem é que o Contact Form 7 é bastante limitado em termos de design e recursos de personalização. Além disso, ele não oferece opções integradas para alterar o estilo de seus formulários.

Isso dificulta a correspondência do design do seu formulário de contato com o tema do seu site ou a alteração de detalhes básicos como a fonte e a cor de fundo para destacar seu formulário.

Mais importante ainda, o plugin congelou o desenvolvimento de novos recursos, o que significa que ele não receberá atualizações além de correções críticas de bugs e patches de segurança.

Dito isso, agora veremos como estilizar um formulário do Contact Form 7 no WordPress. Veja o que abordaremos nas seguintes seções:

Vamos começar!

Primeiros Passos com o Contact Form 7

Primeiro, você precisará instalar e ativar o plugin Contact Form 7 em seu site.

Para fazer isso, vamos em Plugins » Adicionar Novo Plugin na sua área de administração do WordPress.

Isso abrirá a página onde você pode escolher um plugin do diretório de plugins do WordPress.

Vá em frente e use o recurso de busca para encontrar rapidamente o plugin. Em seguida, você pode clicar no botão 'Instalar Agora' no resultado da busca.

Não se esqueça de clicar no botão ‘Ativar’ para habilitá-lo em seu site WordPress. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode ir para Contato » Adicionar Novo no seu painel do WordPress.

Agora você pode editar as configurações do formulário para o seu site e começar inserindo um título para o seu formulário.

O plugin adicionará automaticamente os campos padrão para nome, endereço de e-mail, assunto e mensagem. Você também pode adicionar mais campos simplesmente arrastando e soltando-os onde desejar.

Quando terminar, não se esqueça de clicar no botão 'Salvar' e copiar o shortcode.

A próxima coisa a fazer é incorporar o formulário em seu post ou página do blog.

Para fazer isso, basta editar uma postagem ou adicionar uma nova.

Uma vez que você esteja no editor do WordPress, clique no sinal de ‘+’ na parte superior e adicione um bloco Shortcode.

Depois disso, simplesmente insira o shortcode do seu formulário Contact Form 7 no bloco de shortcode. Ele ficará parecido com isto:

[contact-form-7 id="117" title="Contact Form"]

Agora, publique sua postagem ou página para ver o formulário de contato em ação.

Para este tutorial, usamos o formulário de contato padrão e o adicionamos a uma página do WordPress. É assim que o formulário de contato ficou em nosso site de teste.

Agora você está pronto para personalizar seu formulário do Contact Form 7 no WordPress.

Método 1: Estilizando Formulários do Contact Form 7 Usando CSS Personalizado

Como o Contact Form 7 não possui opções de estilo integradas, você precisará usar CSS para estilizar seus formulários.

O Contact Form 7 adiciona classes CSS e IDs padrão aos elementos do formulário. Isso facilita a personalização do design se você souber um pouco de CSS.

Cada formulário do Contact Form 7 usa a classe CSS .wpcf7, que você pode usar para estilizar seu formulário.

Neste exemplo, usaremos uma fonte personalizada chamada Lora em nossos campos de entrada e alteraremos a cor de fundo do formulário. Certifique-se de que esta fonte seja carregada pelo seu tema WordPress, ou simplesmente altere 'lora' para uma fonte que seu tema já usa:

.wpcf7 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background-color: #725f4c;
  color: #FFF;
  font-family: lora, sans-serif;
  font-style: italic;
}

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

Você pode adicionar facilmente este CSS acessando Aparência » Personalizar » CSS Adicional no seu painel do WordPress.

Se precisar de mais ajuda, consulte nosso guia sobre como adicionar facilmente CSS personalizado a um site WordPress.

É assim que nosso formulário de contato ficou após aplicar este CSS.

Estilizando Múltiplos Formulários do Contact Form 7

Se você estiver usando vários formulários de contato e quiser estilizá-los de forma diferente, pode segmentar o ID exclusivo que o Contact Form 7 gera para cada formulário.

A desvantagem do CSS que usamos acima é que ele será aplicado a todos os formulários do Contact Form 7 em seu site.

Para começar, basta abrir a página que contém o formulário que você deseja modificar. Em seguida, clique com o botão direito no primeiro campo do formulário e selecione a opção ‘Inspecionar‘.

Não se preocupe se o código parecer complexo; você só precisa encontrar uma linha específica.

Um painel de Ferramentas do Desenvolvedor será aberto na parte inferior ou lateral da sua tela, mostrando o código HTML da página. Neste painel, você precisa localizar a linha inicial do código do formulário.

Como você pode ver na captura de tela acima, nosso código de formulário de contato começa com a linha:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

O atributo ID é um identificador exclusivo gerado pelo Contact Form 7 para este formulário em particular. É uma combinação do ID do formulário e do ID da postagem onde este formulário é adicionado.

Usaremos este ID em nosso CSS para estilizar apenas este formulário de contato específico. No código abaixo, substitua o .wpcf7 padrão pelo seu ID exclusivo (por exemplo, #wpcf7-f113-p114-o1).

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Observe que você deve usar o ID gerado em seu próprio site, ou o CSS não funcionará. Além disso, como este ID inclui o ID específico da página (como p114), se você mover este formulário de contato para outra página posteriormente, precisará atualizar seu CSS com o novo ID.

Agora você pode repetir este processo para cada formulário que deseja personalizar, substituindo o ID pelo gerado para esse formulário específico.

Estilizando Formulários com Base no Status de Envio

O Contact Form 7 adiciona automaticamente classes CSS ao seu formulário com base nas interações do usuário, permitindo que você estilize mensagens de sucesso, estados de erro e estados de carregamento de forma diferente.

Aqui estão as classes de status que o Contact Form 7 aplica:

• .wpcf7-init — Estado inicial (antes da interação do usuário)
• .wpcf7-sent — Formulário enviado com sucesso
• .wpcf7-failed — Envio falhou (erro do servidor)
• .wpcf7-invalid — Formulário possui erros de validação
• .wpcf7-spam — Envio sinalizado como spam
• .wpcf7-aborted — Submissão abortada pelo usuário

Exemplo: Estilize o envio de formulário bem-sucedido com uma borda verde:

div.wpcf7.wpcf7-sent {
    border: 3px solid #4caf50;
    background-color: #e8f5e9;
    padding: 20px;
}

Exemplo: Estilize erros de validação com uma borda vermelha:

div.wpcf7.wpcf7-invalid {
    border: 3px solid #f44336;
    background-color: #ffebee;
}

Exemplo: Adicione um indicador sutil de carregamento:

div.wpcf7.wpcf7 form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

Essas classes de status permitem fornecer feedback visual claro aos usuários, melhorando a usabilidade e a experiência do formulário.

Método 2: Estilizando Formulários do Contact Form 7 com CSS Hero

Uma maneira mais fácil de alterar o estilo dos formulários do Contact Form 7 é usando CSS Hero. Ele permite que você edite seus formulários sem escrever nenhum CSS.

Nós testamos este plugin para ver se ele é bom. Veja tudo sobre ele em nossa análise completa do CSS Hero.

Como o CSS Hero é um plugin premium, você precisará primeiro criar uma conta no CSS Hero em seu site. Basta clicar no botão ‘Obter agora’, selecionar um plano e concluir o processo de checkout.

Com isso feito, você terá acesso ao painel da sua conta CSS Hero, onde poderá encontrar o arquivo zip do seu plugin e a chave de licença.

Agora você pode instalar e ativar o plugin CSS Hero em seu site. Na sua área administrativa do WordPress, vá para Plugins » Adicionar Novo Plugin.

Em seguida, você pode clicar no botão ‘Upload Plugin’ para abrir o carregador de arquivos.

Depois disso, basta clicar em ‘Escolher Arquivo’ e selecionar o arquivo .zip do plugin.

Após o upload, você pode clicar no botão ‘Instalar agora’ e depois em ‘Ativar’ quando ele aparecer. Para detalhes, veja nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode visitar a página que contém seu formulário no seu site ativo. Você verá uma opção ‘Personalizar com CSS Hero’ na barra de ferramentas de administração no topo.

O CSS Hero oferece uma interface fácil de clicar e apontar para editar o CSS sem escrever nenhum código.

Usando o plugin, você pode clicar em qualquer campo, título e outros elementos do seu formulário e editar a cor de fundo, fonte, bordas, espaçamento e muito mais.

Depois de personalizar seu formulário, basta clicar no botão ‘Salvar e Publicar’ na parte inferior.

Dica Bônus 💡: Uma Maneira Sem Código de Estilizar Formulários do WordPress

Se CSS não é sua praia, existe uma maneira muito mais fácil de criar formulários lindamente estilizados em minutos: WPForms. Enquanto o Contact Form 7 exige conhecimento de CSS para personalizar, o WPForms oferece formulários com aparência profissional prontos para uso, sem necessidade de codificação.

Por que os Usuários do WPForms o Amam (Mais que o Contact Form 7)

O WPForms é usado por mais de 6 milhões de sites e é consistentemente classificado como mais fácil de usar do que o Contact Form 7. Veja por quê:

• Criação de Formulários em 5 Minutos: Usuários reais relatam a criação de seus primeiros formulários profissionais em menos de 5 minutos usando o construtor de arrastar e soltar. Nenhuma curva de aprendizado de CSS necessária.
• Mais de 2.100 Modelos Pré-construídos: Escolha entre milhares de modelos de formulários prontos para formulários de contato, pesquisas, inscrições, pagamentos e muito mais. Basta escolher um e personalizar.
• Construtor de Formulários com IA: Descreva seu formulário em linguagem simples, como "Preciso de um formulário de inscrição para conferência com opções de refeição", e o WPForms AI o gerará instantaneamente.
• Design Profissional Sem Habilidades de Design: Os formulários ficam limpos e polidos em seu site automaticamente, combinando com os padrões de design web moderno sem trabalho manual de estilização.
• Suporte Excepcional: Quando você precisa de ajuda, obtém respostas rápidas e especializadas da equipe do WPForms, ao contrário de depender de fóruns da comunidade para plugins gratuitos.

Como Estilizar um Formulário no WPForms

Ao criar seu formulário de contato, vá para a seção Configurações » Temas dentro do construtor de arrastar e soltar do WPForms.

Uma vez dentro, você escolhe entre mais de 40 temas bonitos e pré-projetados para combinar instantaneamente com o design do seu site.

Esses temas são totalmente personalizáveis. Você pode:

• Ajustar o tamanho dos campos, bordas e cores
• Ajustar fontes de rótulos, sub-rótulos e mensagens de erro
• Estilize o botão de envio para corresponder à sua marca

Veja como pode parecer na sua tela:

Alternativamente, você pode aplicar um tema WPForms do editor de blocos do WordPress.

Após adicionar seu formulário a uma página, abra o painel de configurações do bloco à direita e role até a seção 'Temas'. Você encontrará os temas de formulário integrados do WPForms, a mesma lista daquela dentro do construtor de formulários.

Você também encontrará opções de personalização para o campo do formulário, rótulo, botão, contêiner e plano de fundo.

Para instruções passo a passo, consulte nosso guia sobre como personalizar e estilizar formulários do WordPress.

Conclusão: Se você quer pular o tutorial de CSS e ter formulários profissionais no ar hoje mesmo, o WPForms é sua melhor opção. Ele economiza horas de trabalho de estilização e entrega resultados que parecem ter sido criados por um designer.

FAQ: Estilizando o Contact Form 7 no WordPress

Se você está apenas começando com o Contact Form 7 ou quer ajustar o seu design, estas FAQs rápidas ajudarão com as perguntas mais comuns de estilo.

Como estilizar o botão de envio do Contact Form 7?

Você pode estilizar o botão de envio do Contact Form 7 com CSS, visando a classe de envio padrão .wpcf7-submit. Em seguida, adicione seus estilos personalizados em Aparência » Personalizar » CSS Adicional.

Como configurar o Contact Form 7 no WordPress?

Para configurar o Contact Form 7, você pode abrir seu formulário, ir para a aba 'Mail', definir o endereço 'To' (para onde as mensagens devem ser enviadas) e garantir que as tags de e-mail correspondam aos campos do seu formulário.

O Contact Form 7 é gratuito para usar?

Sim, o Contact Form 7 é totalmente gratuito para baixar e usar no diretório oficial de plugins do WordPress.org. O plugin principal não custa nada, embora alguns add-ons ou integrações opcionais de terceiros possam ser pagos.

O Contact Form 7 é bom?

O Contact Form 7 é uma opção funcional e amplamente utilizada se você deseja um plugin de formulário gratuito e flexível e não se importa com uma configuração um pouco mais técnica.

É poderoso quando combinado com HTML e CSS personalizados, mas não oferece um construtor visual de arrastar e soltar, então alterações de estilo e layout geralmente exigem a edição de código ou o uso de ferramentas adicionais.

Posso colocar o Contact Form 7 no Canva para edição?

Não, você não pode editar um formulário do Contact Form 7 dentro do Canva porque o Contact Form 7 é um plugin do WordPress e precisa de um ambiente WordPress para funcionar. No entanto, você pode projetar a aparência do seu formulário no Canva como um mockup e, em seguida, recriar esse design no WordPress.

Recursos Adicionais para Personalização de Formulários no WordPress

Esperamos que este artigo tenha ajudado você a aprender como estilizar formulários do Contact Form 7 no WordPress.

Você também pode querer ver nossos outros guias úteis sobre:

• Como Adicionar Escolhas de Imagem em Formulários do WordPress
• Como Adicionar Autocompletar para Campos de Endereço no WordPress
• Dicas para Criar Formulários Mais Interativos no WordPress
• Usando Lógica Condicional em Formulários do WordPress
• Guia Definitivo para Usar Formulários WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.