Como estilizar formulários no Contact Form 7 usando CSS no WordPress
Quer que seus formulários do WordPress fiquem tão elegantes quanto o restante do seu site? Com o Contact Form 7, você tem controle total sobre a aparência do seu formulário usando CSS. Este guia mostra o passo a passo para estilizar formulários do Contact Form 7, permitindo criar uma experiência integrada e personalizada para seus visitantes.
Por que estilizar formulários do Contact Form 7?
O Contact Form 7 é um dos plugins WordPress mais populares para criação de formulários — mas seu visual padrão é básico. A personalização de estilos em temas clássicos do WordPress permite que você:
Combine com a identidade visual do seu site
Melhore a usabilidade e acessibilidade
Deixe os formulários mais convidativos e profissionais
Passo 1: Identifique os seletores CSS do seu formulário
Antes de começar a estilizar, você precisa saber quais seletores CSS selecionam os elementos do seu formulário.
Cada formulário do Contact Form 7 é envolvido por uma classe única: .wpcf7
Elementos individuais como campos de entrada, áreas de texto e botões de envio usam tags HTML padrão
Passo 2: Adicione CSS personalizado ao seu site WordPress
Você pode adicionar CSS de duas maneiras principais:
Pelo Personalizador:
Acesse Aparência > Personalizar > CSS Adicional e cole seus estilos.
NOTA: Adicione seu CSS ao arquivo style.css do seu tema filho para personalizações mais avançadas.
Passo 3: Escreva seu CSS personalizado
Aqui estão alguns exemplos comuns para você começar, usando os componentes “text” e “submit” do formulário como exemplo:
Estilize todos os formulários do Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Pseudo-classes em CSS, como :hover, permitem estilizar elementos com base em seu estado ou interação do usuário. Por exemplo, a pseudo-classe :hover aplica estilos quando o usuário passa o mouse sobre um botão ou campo. Isso é comumente usado para destacar botões ou mudar sua cor ao passar o mouse, tornando seus formulários mais interativos e visualmente atraentes. Outras pseudo-classes úteis incluem :focus (quando um campo está selecionado) e :active (quando um elemento está sendo clicado). Usar pseudo-classes ajuda a melhorar a experiência do usuário, fornecendo feedback imediato conforme os visitantes interagem com seu formulário.
Direcione um formulário específico
Cada formulário tem um ID único, como #wpcf7-f123-o1. Use isso para estilizar apenas aquele formulário:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Substitua f123-o1 pelo ID real do seu formulário. Você pode encontrar o ID único do seu formulário visualizando a página onde o Contact Form 7 está inserido, clicando com o botão direito no formulário e selecionando “Inspecionar” (ou “Inspecionar Elemento”) no seu navegador. Procure a <div> com a classe .wpcf7 — o ID aparecerá como algo como id="wpcf7-f123-o1" no código HTML. Use esse ID no seu seletor CSS para direcionar apenas aquele formulário específico.
Passo 4: Use as classes nativas do Contact Form 7
O Contact Form 7 adiciona automaticamente classes aos elementos, facilitando ainda mais a seleção. Por exemplo:
.wpcf7-form-control – Todos os controles do formulário
.wpcf7-submit – O botão de envio
Você também pode adicionar suas próprias classes no editor de formulários para ainda mais controle.
Exemplo
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Passo 5: Visualize e ajuste
Após salvar seu CSS, atualize seu site para ver as mudanças. Use a ferramenta de inspeção do navegador para ajustar os estilos em tempo real antes de copiá-los para o seu site. Certifique-se de limpar o cache do site após as alterações para que as atualizações fiquem visíveis para os visitantes.
Aqui estão exemplos de antes e depois de um formulário em um site de demonstração, onde usamos o código CSS do Passo 3 para deixar as caixas ao redor de cada campo do formulário azuis.
Dicas rápidas para uma melhor estilização de formulários
Mantenha acessível: Garanta bom contraste de cores e tamanhos de fonte legíveis
Use espaçamento: Adicione padding e margens para um visual limpo e organizado
Destaque erros: Estilize mensagens de erro com uma cor clara (como vermelho) para ajudar os usuários a corrigirem erros
Teste no celular: Certifique-se de que seus formulários fiquem ótimos em todos os dispositivos
Solução de problemas
Se seus estilos não estiverem aparecendo, tente estes passos:
Limpe o cache do navegador e do site – Às vezes, arquivos em cache impedem que o novo CSS seja exibido. Se você usa um plugin de cache ou hospedagem gerenciada, limpe esses caches também.
Verifique problemas de especificidade do CSS – Se seus estilos não estiverem sendo aplicados, tente tornar seus seletores mais específicos para sobrescrever estilos existentes.
Certifique-se de estar editando o arquivo ou seção CSS correta – Verifique se está adicionando seu código no local correto, como no painel CSS Adicional, no style.css do tema filho ou em um plugin de CSS personalizado.
Revise as classes CSS para erros de digitação – Procure nomes de classes digitados incorretamente, espaços desnecessários ou uso acidental da classe errada. Além disso, verifique se a classe que você está usando realmente existe no HTML do seu formulário.
Verifique classes duplicadas ou conflitantes – Certifique-se de que a classe que você está usando não está aplicada em outro lugar com estilos diferentes que possam sobrescrever suas alterações.
Siga boas práticas gerais – Use nomes claros e consistentes para suas classes, termine cada regra CSS com ponto e vírgula e sempre feche corretamente os blocos de código com uma chave (}).
Revisar cuidadosamente seu código para esses problemas comuns ajudará a garantir que seus estilos personalizados apareçam corretamente no seu site.
Exemplo: CSS personalizado completo para um formulário do Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Aqui está um exemplo de formulário estilizado com o código CSS acima. Esse código personaliza a aparência de vários elementos-chave do seu formulário Contact Form 7. Ele seleciona todos os campos de texto, campos de e-mail e áreas de texto, dando-lhes uma borda cinza clara, cantos arredondados, padding confortável e largura consistente para um visual limpo e moderno.
O código também estiliza o botão de envio com fundo verde, texto branco, bordas arredondadas e fonte em negrito e fácil de ler. Quando os usuários passam o mouse sobre o botão de envio, a cor de fundo fica verde escuro, fornecendo um feedback interativo.
Adicionando CSS: temas clássicos vs temas de blocos
Os passos deste guia para estilizar formulários do Contact Form 7 com CSS são voltados para Temas Clássicos do WordPress. Temas Clássicos, como o popular Astra, usam o Personalizador, onde você pode facilmente adicionar CSS personalizado na seção “CSS Adicional”. Isso facilita a estilização dos seus formulários e a visualização das mudanças em tempo real.
No entanto, se o seu site usa um Tema de Blocos (às vezes chamado de Full Site Editing ou tema FSE), o processo é diferente. Temas de Blocos nem sempre incluem o Personalizador ou o campo “CSS Adicional” por padrão. Em vez disso, você usa o Editor do Site para fazer alterações de design. Embora seja possível ajustar estilos globais de cores, tipografia e layout, adicionar CSS personalizado arbitrário nem sempre está disponível na interface.
O que fazer se você estiver usando um Tema de Blocos
Abra o painel do WordPress e vá em Aparência > Editor (Editor do Site).
No Editor do Site, procure o painel Estilos (ícone de círculo meio sombreado).
Alguns Temas de Blocos agora oferecem uma opção “CSS Adicional” no painel Estilos, mas isso depende do seu tema e da versão do WordPress.
Se você não encontrar uma opção para adicionar CSS personalizado, pode usar um plugin como o WPCode para adicionar CSS personalizado em todo o site. WPCode é fácil de usar e funciona com qualquer tema, garantindo que você possa estilizar seus formulários mesmo que o tema não permita edição direta de CSS na interface. Apenas esteja ciente de que instalar esse plugin pode afetar o estilo de outros formulários já existentes no seu site.
Recursos adicionais
Estilizar seus formulários do Contact Form 7 é uma maneira simples, mas poderosa, de elevar a experiência do usuário do seu site. Com apenas algumas linhas de CSS, você pode fazer com que seus formulários pareçam e se encaixem naturalmente na sua marca.