Os estilos padrão do Contact Form 7 são a primeira coisa que repara depois de instalar o plugin. Campos de introdução de dados estreitos, um botão de envio simples e mensagens de erro sem qualquer esforço de design. Depois de configurar uma dúzia de sites, perde-se a conta às vezes em que editou manualmente o style.css, e é sempre a mesma rotina.

Um ficheiro de exportação de formulário preparado resolve este problema. Importa um formulário pronto a usar com estilos pré-configurados: os campos, o botão, a validação e o reCAPTCHA têm um aspeto aceitável logo após a ativação. Só falta substituir os endereços de email e o caminho do logótipo para o seu projeto específico.

Abaixo encontra uma descrição completa das regras de CSS que usamos nos nossos projetos, mais um ficheiro de exportação para um arranque rápido. Os estilos foram testados no Contact Form 7 versão 6.x e estão atualizados à data de 2026.

💡 Visão geral rápida:

• Descarregue o ficheiro de exportação do formulário e importe-o para o WordPress usando o método padrão
• Substitua os endereços de email no modelo de email e o caminho do logótipo
• Copie os estilos CSS para o style.css do seu tema ou para o CSS adicional
• Adapte as cores e os tipos de letra à marca do seu projeto, se necessário

1. Ficheiro de exportação: importação e configuração inicial

O ficheiro de exportação contém um formulário de contacto pronto a usar com os campos: nome, email, telefone, área de texto e Google reCAPTCHA. O formulário é criado em quatro versões de idioma: russo, ucraniano, inglês e alemão.

A importação é feita através da ferramenta padrão do WordPress: Ferramentas → Importar → Contact Form 7 → Executar importador. Selecione o ficheiro XML descarregado e os formulários aparecerão na secção "Formulários".

Imediatamente após a importação, vá ao modelo de email de cada formulário no separador Correio. Substitua três coisas:

• O campo "Para": introduza o seu email real;
• O campo "De": o endereço tem de estar no domínio do site (por exemplo, [email protected]), caso contrário os emails acabarão no spam;
• O caminho do logótipo: encontre a tag <img src="/Logo-150x150.png"> no corpo do email e substitua-a pelo URL completo do logótipo do seu site.

Sem substituir os endereços de email, o formulário não enviará emails. Esta é uma razão comum para o CF7 "não funcionar" após a importação.

2. Estilos CSS: descrição completa

Abaixo está o conjunto de estilos que aplicamos a cada novo projeto. Copie-o para o style.css do tema ativo ou para CSS adicional (Aparência → Personalizar → CSS adicional). A segunda opção é preferível: os estilos não se perderão quando o tema for atualizado.

2.1. Mensagens de resposta e validação

1
/* Form response — top margin */
2
div.wpcf7-response-output {
3
    margin-top: -30px;
4
}
5
 
6
/* Validation hint — centering and spacing */
7
span.wpcf7-not-valid-tip {
8
    margin-top: -14px;
9
    margin-bottom: -10px;
10
    text-align: center;
11
    color: #a01414;
12
    font-size: 1em;
13
    display: block;
14
    font-weight: 700;
15
}

.wpcf7-response-output é o bloco que aparece após o envio (sucesso ou erro). Por defeito, perturba o fluxo; a margin-top negativa aproxima-o do formulário. .wpcf7-not-valid-tip é a dica vermelha por baixo de um campo não preenchido; aqui o texto está centrado e a negrito para visibilidade.

2.2. Campos de introdução de dados e áreas de texto

1
/* Unified font for all form elements */
2
input.wpcf7-form-control,
3
textarea#TextareaJA,
4
input.wpcf7-form-control.wpcf7-submit {
5
    font-family: "Open Sans", sans-serif;
6
    font-size: 15px;
7
    line-height: 30px;
8
    font-weight: 700;
9
}
10
 
11
/* Text area height */
12
textarea {
13
    height: 150px !important;
14
}
15
 
16
/* Border highlight on focus */
17
form.wpcf7-form input:focus,
18
form.wpcf7-form textarea:focus,
19
form.wpcf7-form input[type="text"]:focus {
20
    border-color: #709242;
21
}

O seletor input.wpcf7-form-control visa todos os campos de texto do CF7. textarea#TextareaJA é um identificador personalizado do nosso formulário; se o seu formulário tiver um ID diferente, substitua-o pelo correto. A cor do contorno em foco #709242 é um verde azeitona calmo e agradável à vista.

2.3. Botão de envio

1
/* Submit button — main style */
2
input.wpcf7-form-control.wpcf7-submit {
3
    color: #ffffff;
4
    background: #5a8f2b;
5
    font-weight: 600;
6
    border: 2px dashed #ffffff;
7
    margin-top: -25px;
8
    font-family: FuturaDemiC, sans-serif;
9
    padding: 10px 30px;
10
    border-radius: 0;
11
    transition: all .3s ease 0s;
12
}
13
 
14
/* Hover — color inversion */
15
input.wpcf7-form-control.wpcf7-submit:hover {
16
    background: #ffffff;
17
    color: #5a8f2b;
18
    border: 2px dashed #5a8f2b;
19
}

O botão tem um fundo verde #5a8f2b com um contorno branco a tracejado. Ao passar o rato, as cores invertem-se: fundo branco, texto e contorno verdes. Se o verde não fizer parte da paleta da sua marca, substitua #5a8f2b pela sua cor de destaque em ambas as regras (padrão e ao passar o rato).

2.4. Pré-carregador e indicador de carregamento

1
/* Centering the ajax loader */
2
span.ajax-loader {
3
    margin-left: auto !important;
4
    margin-right: auto !important;
5
    float: inherit !important;
6
    width: 15px !important;
7
    display: block !important;
8
    margin-top: 10px !important;
9
    margin-bottom: -15px !important;
10
}

O indicador giratório de envio do CF7 fica colado à borda por defeito. Aqui é centrado à força através de margin-left/right: auto e display: block. As declarações !important são necessárias porque o próprio plugin aplica estilos inline ao carregador.

2.5. Alinhamento do Google reCAPTCHA

1
/* Centering the reCAPTCHA block */
2
.wpcf7-form-control-wrap {
3
    width: 100%;
4
}
5
 
6
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
7
    margin-top: -28px;
8
    margin-left: auto;
9
    margin-right: auto;
10
    width: 300px;
11
}

O bloco reCAPTCHA alinha à esquerda por predefinição. Usar margin-left/right: auto com uma largura fixa de 300px centra-o dentro do formulário.

2.6. Responsividade para dispositivos móveis

1
@media screen and (max-width: 768px) {
2
    span.wpcf7-not-valid-tip {
3
        margin-bottom: 15px;
4
    }
5
 
6
    input.wpcf7-form-control.wpcf7-text {
7
        max-height: 30px;
8
    }
9
}

Em ecrãs com menos de 768px, a dica de validação recebe uma margem inferior extra para evitar colidir com o campo seguinte. Os campos de texto têm a altura limitada, o que impede um alongamento excessivo em dispositivos móveis.

2.7. Ocultar elementos de serviço

1
/* Hide list markers in error messages */
2
.screen-reader-response ul {
3
    display: none;
4
}
5
 
6
/* Hide the green success message */
7
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
8
    display: none !important;
9
}
10
 
11
/* Hide the duplicate validation error message */
12
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
13
    display: none !important;
14
}
15
 
16
/* Text color for screen-reader block on dark backgrounds */
17
.screen-reader-response {
18
    color: white;
19
    margin-bottom: 10px;
20
}

O CF7 duplica os erros de validação por predefinição: tanto na dica de contexto como no bloco geral abaixo do formulário. Ocultamos o bloco geral (.wpcf7-validation-errors) e a mensagem de sucesso (.wpcf7-mail-sent-ok), uma vez que as dicas .wpcf7-not-valid-tip são suficientes. Os estilos para .screen-reader-response são relevantes quando o formulário é colocado sobre um fundo escuro.

2.8. Centrar placeholders

1
/* Centering placeholder in textarea field for different browsers */
2
textarea#TextareaJA::-webkit-input-placeholder {
3
    text-align: center;
4
}
5
 
6
textarea#TextareaJA:-moz-placeholder {
7
    text-align: center;
8
}
9
 
10
textarea#TextareaJA::-moz-placeholder {
11
    text-align: center;
12
}
13
 
14
textarea#TextareaJA:-ms-input-placeholder {
15
    text-align: center;
16
}

O texto do placeholder dentro do campo é centrado apenas enquanto o campo está vazio. Assim que o utilizador começa a escrever, o texto segue o alinhamento normal. #TextareaJA é o identificador do nosso formulário; substitua-o pelo correto para o seu formulário.

2.9. Bónus: estilos para fundos escuros

1
/* Error styles for forms on dark background */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    color: aliceblue;
4
    font-weight: 800;
5
}
6
 
7
span.wpcf7-not-valid-tip {
8
    font-weight: 900;
9
    background-color: antiquewhite;
10
}

Se o formulário for colocado num bloco com um preenchimento escuro, as mensagens de erro devem permanecer legíveis. O texto de erro torna-se branco (aliceblue) e a dica de contexto recebe um fundo claro.

2.10. Melhorias adicionais

1
/* Bottom error message margin */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    margin-top: -60px;
4
}
5
 
6
/* Centering text fields */
7
span.wpcf7-form-control-wrap input#Email,
8
span.wpcf7-form-control-wrap input#PhoneJA,
9
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
10
    text-align: center;
11
}
12
 
13
/* reCAPTCHA in popups — additional spacing */
14
div#recapcha-popups .wpcf7-form-control-wrap {
15
    padding-top: 25px;
16
    margin-left: -11px;
17
    padding-bottom: 38px;
18
}

Os campos de texto para email e telefone são centrados, o que resulta num aspeto mais limpo quando o formulário é composto por 3 a 4 campos. O bloco div#recapcha-popups é um seletor específico para os casos em que o formulário está incorporado numa janela pop-up.

3. Configurar o modelo de email

Após importar os formulários, verifique sempre o separador Mail no editor de cada formulário. O CF7 utiliza estas definições para enviar notificações por email:

• To: o endereço para onde as submissões chegam. Por predefinição, contém um placeholder da exportação; substitua-o pelo seu;
• From: o cabeçalho do email. O endereço do remetente deve pertencer ao domínio do site, caso contrário os emails vão para spam ou não são entregues de todo;
• Subject: pode manter o padrão ou adicionar o nome do site;
• Message Body: um modelo HTML com o logótipo. Substitua src="/Logo-150x150.png" pelo URL completo do seu logótipo.

Se precisar de etiquetas adicionais para o modelo, a lista completa está disponível na documentação oficial em contactform7.com.

4. Otimizar o carregamento de scripts do CF7

Por predefinição, o Contact Form 7 carrega CSS e JavaScript em todas as páginas do site, mesmo onde não existe nenhum formulário. São pedidos desnecessários que tornam o carregamento mais lento.

A partir da versão 5.9, o programador adicionou uma opção nativa para controlar o carregamento: no wp-config.php pode definir as constantes WPCF7_LOAD_JS e WPCF7_LOAD_CSS como false, e os scripts serão carregados apenas nas páginas com um formulário. Mais detalhes na documentação do CF7.

Para um controlo mais fino (apenas páginas específicas), utilize um snippet no functions.php:

1
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);
2
function cf7_dequeue_scripts() {
3
    if (!is_page(array('contact', 'order'))) {
4
        wp_dequeue_script('contact-form-7');
5
        wp_dequeue_style('contact-form-7');
6
    }
7
}

Este snippet remove os scripts do CF7 de todas as páginas, exceto as especificadas no array is_page(). Substitua 'contact' e 'order' pelos slugs das suas páginas que contêm formulários.

⁉️🤔 Perguntas frequentes

Os formulários não enviam após a importação. O que devo fazer?

Primeiro, verifique o separador «Mail»: os campos «To» e «From». O ficheiro de exportação contém marcadores de posição nesses campos. «To» deve conter um email real, e «From» deve ser um endereço do domínio do site. Se o domínio não corresponder, o servidor de correio do destinatário rejeitará o email como spam.

Onde é melhor colocar os estilos CSS: no style.css do tema ou em CSS Adicional?

O CSS Adicional é preferível. Quando o tema é atualizado, o style.css é sobrescrito, mas o CSS Adicional não. A desvantagem: os estilos no CSS Adicional são carregados inline no <head> em vez de como um ficheiro externo, mas para 100-150 linhas de CSS a diferença de velocidade é insignificante.

Como altero as cores dos botões para corresponderem à marca do cliente?

Encontre as duas regras para input.wpcf7-form-control.wpcf7-submit nos estilos (normal e hover). Substitua #5a8f2b pela cor de destaque da marca na propriedade background da regra principal e nas propriedades color e border da regra hover. Não é necessário alterar mais nada.

Porque é que o reCAPTCHA se desloca para a esquerda no telemóvel?

O bloco .g-recaptcha nos nossos estilos tem uma largura padrão fixa. Em ecrãs muito estreitos, pode não caber. Adicione uma regra com transform: scale() e transform-origin: left à media query, e o reCAPTCHA encolherá proporcionalmente para caber em qualquer ecrã.

Os estilos não estão a ser aplicados. Qual é a causa?

Três causas comuns: (1) cache do navegador (abra o site em modo de navegação anónima); (2) cache de um plugin de desempenho (WP Rocket, LiteSpeed) que precisa de ser limpa; (3) ordem de carregamento, uma vez que o CF7 carrega o seu CSS por último. Adicione !important à regra em conflito ou aumente a especificidade do seletor adicionando uma classe pai.

Como verifico se o formulário realmente funciona após a configuração?

Envie um email de teste através do formulário no próprio site. Se o email não chegar, verifique a pasta de spam. Se também não estiver lá, configure um plugin SMTP (por exemplo, FluentSMTP ou Post SMTP). Sem SMTP, o WordPress envia via wp_mail(), e muitos servidores de alojamento bloqueiam esses emails.

Estilizar o CF7: rápido, de uma vez, e para todos os projetos

Um ficheiro de exportação preparado e um conjunto de estilos refinado poupam 15 a 30 minutos em cada novo projeto. Em vez de ajustar manualmente margin-top: -14px por tentativa e erro, obtém um formulário com campos, botão e validação já organizados. Só falta inserir o email e o logótipo.

Se a paleta verde #5a8f2b não se adequar ao design, substitua a cor de destaque pela sua. Se o formulário estiver incorporado num popup, adicione um seletor com o ID do popup, conforme mostrado na secção 2.10. Se o site for multilingue, utilize as duplicações de idioma da exportação (RU/UK/EN/DE).

Em projetos sem designer, este conjunto de estilos cobre a grande maioria das necessidades para um formulário de contacto com aparência decente. Em projetos com designer, serve como base para uma personalização mais fina.

Guarde os estilos como um snippet, e a sua próxima configuração do CF7 demorará exatamente dois minutos.