Como estilizar formulários do Contact Form 7 com CSS no WordPress
Queres que os teus formulários WordPress fiquem tão elegantes como o resto do teu site? Com o Contact Form 7, tens controlo total sobre o aspeto do teu formulário usando CSS. Este guia mostra-te, passo a passo, como personalizar o estilo dos formulários do Contact Form 7, permitindo-te criar uma experiência integrada e com a tua marca para os teus visitantes.
Porque deves personalizar o estilo dos formulários do Contact Form 7?
O Contact Form 7 é um dos plugins WordPress mais populares para criar formulários — mas o seu aspeto padrão é básico. Personalizar o estilo em temas clássicos do WordPress permite-te:
Combina com a identidade visual do teu site
Melhora a usabilidade e acessibilidade
Torna os formulários mais apelativos e profissionais
Passo 1: Identifica os seletores CSS do teu formulário
Antes de começares a personalizar o estilo, precisas de saber que seletores CSS afetam os elementos do teu formulário.
Cada formulário Contact Form 7 está envolvido numa classe única: .wpcf7
Elementos individuais como campos de entrada, áreas de texto e botões de envio usam tags HTML padrão
Passo 2: Adiciona CSS personalizado ao teu site WordPress
Podes adicionar CSS de duas formas principais:
Através do Personalizador:
Vai a Aparência > Personalizar > CSS adicional e cola os teus estilos.
NOTA: Adiciona o teu CSS ao ficheiro style.css do teu tema filho para personalizações mais avançadas.
Passo 3: Escreve o teu CSS personalizado
Aqui tens alguns exemplos comuns para começares, usando os componentes “text” e “submit” do formulário como exemplo:
Personaliza 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-te personalizar elementos com base no seu estado ou interação do utilizador. Por exemplo, a pseudo-classe :hover aplica estilos quando alguém passa o rato sobre um botão ou campo. Isto é frequentemente usado para destacar botões ou mudar a cor ao passar o rato, tornando os teus formulários mais interativos e apelativos. Outras pseudo-classes úteis incluem :focus (quando um campo está selecionado) e :active (quando um elemento está a ser clicado). Usar pseudo-classes ajuda a melhorar a experiência do utilizador ao dar feedback imediato enquanto interage com o formulário.
Aponta para um formulário específico
Cada formulário tem um ID único, como #wpcf7-f123-o1. Usa-o para personalizar apenas esse formulário:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Substitui f123-o1 pelo ID real do teu formulário. Podes encontrar o ID único do teu formulário ao visualizar a página onde o Contact Form 7 está inserido, clicando com o botão direito no formulário e escolhendo “Inspecionar” (ou “Inspecionar Elemento”) no teu navegador. Procura o <div> com a classe .wpcf7 — o ID aparecerá como algo do género id="wpcf7-f123-o1" no código HTML. Usa este ID no teu seletor CSS para personalizares apenas esse formulário.
Passo 4: Usa as classes incorporadas do Contact Form 7
O Contact Form 7 adiciona automaticamente classes aos elementos, tornando a personalização ainda mais fácil. Por exemplo:
.wpcf7-form-control – Todos os controlos do formulário
.wpcf7-submit – O botão de envio
Também podes adicionar as tuas próprias classes no editor de formulários para ainda mais controlo.
Exemplo
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Passo 5: Pré-visualiza e ajusta
Depois de guardares o teu CSS, atualiza o site para veres as alterações. Usa a ferramenta de inspeção do navegador para ajustares os estilos em tempo real antes de os copiares para o site. Não te esqueças de limpar a cache do site depois de fazeres alterações para que as atualizações fiquem visíveis aos visitantes.
Aqui tens exemplos de antes e depois de um formulário num site de demonstração, onde usámos o código CSS do Passo 3 para tornar as caixas à volta de cada campo azuis.
Dicas rápidas para um melhor estilo de formulários
Mantém acessível: Garante bom contraste de cores e tamanhos de letra legíveis
Usa espaçamento: Adiciona preenchimento e margens para um visual limpo e organizado
Destaca erros: Personaliza as mensagens de erro com uma cor visível (como vermelho) para ajudar os utilizadores a corrigir erros
Testa em telemóvel: Garante que os teus formulários ficam ótimos em todos os dispositivos
Resolução de problemas
Se os teus estilos não aparecem, experimenta estes passos:
Limpa a cache do navegador e do site – Às vezes, ficheiros em cache impedem que o novo CSS seja exibido. Se usares um plugin de cache ou alojamento gerido, limpa também essas caches.
Verifica problemas de especificidade do CSS – Se os teus estilos não estão a ser aplicados, tenta tornar os seletores mais específicos para sobrepor estilos existentes.
Garante que estás a editar o ficheiro ou secção CSS correta – Confirma que estás a adicionar o código no local certo, como no painel CSS adicional, no style.css do tema filho ou num plugin de CSS personalizado.
Revê as classes CSS para erros ou gralhas – Procura nomes de classes mal escritos, espaços desnecessários ou uso acidental da classe errada. Verifica também se a classe que estás a usar existe mesmo no HTML do teu formulário.
Verifica classes duplicadas ou em conflito – Garante que a classe que estás a usar não está já aplicada noutro local com estilos diferentes que possam sobrepor as tuas alterações.
Segue boas práticas gerais – Usa nomes claros e consistentes para as tuas classes, termina cada regra CSS com ponto e vírgula e fecha sempre os blocos de código com chavetas (}).
Rever cuidadosamente o teu código para estes problemas comuns vai ajudar a garantir que os teus estilos personalizados aparecem corretamente no site.
Exemplo: CSS personalizado completo para um formulário 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 um formulário personalizado com o CSS acima. Este código CSS altera o aspeto de vários elementos importantes do teu formulário Contact Form 7. Aplica-se a todos os campos de texto, email e áreas de texto, dando-lhes uma borda cinzenta clara, cantos arredondados, preenchimento confortável e largura consistente para um visual limpo e moderno.
O código também personaliza o botão de envio com fundo verde, texto branco, cantos arredondados e letra em negrito e fácil de ler. Quando os utilizadores passam o rato sobre o botão de envio, o fundo fica verde mais escuro, dando feedback interativo.
Adicionar CSS: temas clássicos vs temas de blocos
Os passos deste guia para personalizar os formulários do Contact Form 7 com CSS são pensados para Temas Clássicos no WordPress. Os Temas Clássicos, como o popular Astra, usam o Personalizador, onde podes facilmente adicionar CSS personalizado na secção “CSS adicional”. Isto torna simples personalizar os teus formulários e ver as alterações em tempo real.
No entanto, se o teu site usa um Tema de Blocos (às vezes chamado de Full Site Editing ou tema FSE), o processo é diferente. Os Temas de Blocos nem sempre incluem o Personalizador ou o campo “CSS adicional” por defeito. Em vez disso, usas o Editor do Site para fazer alterações de design. Embora possas ajustar estilos globais para cores, tipografia e layout, adicionar CSS personalizado arbitrário nem sempre está disponível na interface.
O que fazer se estiveres a usar um Tema de Blocos
Abre o painel WordPress e vai a Aparência > Editor (Editor do Site).
No Editor do Site, procura o painel Estilos (ícone de círculo meio sombreado).
Alguns Temas de Blocos já oferecem uma opção “CSS adicional” no painel Estilos, mas isto depende do tema e da versão do WordPress.
Se não vires uma opção para adicionar CSS personalizado, podes usar um plugin como o WPCode para adicionar CSS personalizado a todo o site. WPCode é fácil de usar para iniciantes e funciona com qualquer tema, garantindo que podes personalizar os teus formulários mesmo que o tema não permita editar CSS diretamente na interface. Tem apenas em atenção que instalar este plugin pode afetar o estilo de outros formulários já existentes no teu site.
Recursos adicionais
Personalizar o estilo dos teus formulários Contact Form 7 é uma forma simples mas poderosa de melhorar a experiência dos utilizadores no teu site. Com apenas algumas linhas de CSS, podes fazer com que os teus formulários pareçam e se sintam como parte natural da tua marca.