Um utilizador abre um formulário, vê um botão «Submeter», clica e recebe erros de validação. A janela destaca campos a vermelho: «Obrigatório.» Parece-lhe familiar?

O Contact Form 7, o plugin de formulários mais popular para WordPress, tem mais de 5 milhões de instalações ativas. Mas, por defeito, mostra sempre o botão de submeter, mesmo quando os campos estão vazios. Para o utilizador, isto significa um clique extra e frustração. Para o proprietário do site, significa leads perdidas: um terço dos visitantes que encontram um erro num formulário simplesmente saem e nunca mais voltam.

Pode corrigir isto com três linhas de jQuery. Ou pode fazê-lo sem qualquer script, usando apenas CSS puro. Nesta análise, terá ambas as abordagens, além de um plugin pronto a usar para quem não quer mexer em código.

💡 Visão geral rápida:

• Monitorização com jQuery: oculte o botão e mostre-o apenas quando o comprimento do texto em todos os campos atingir os seus limites
• CSS puro: um truque com :valid, :has() e o atributo required, sem uma única linha de JavaScript
• Plugin Conditional Fields para Contact Form 7: um construtor visual de condições para lógica complexa sem código

Porquê ocultar o botão de submeter

Um utilizador não deveria ter de adivinhar o que correu mal. Quando um botão está visível e clicável, mas o formulário não está pronto, isso cria dissonância cognitiva. A pessoa clica, recebe um erro, procura os campos destacados, corrige-os, clica novamente. Cada ciclo destes reduz a conversão.

Um botão oculto até que tudo esteja pronto resolve três problemas:

• Elimina tentativas de submissão falsas. Sem botão, sem clique prematuro.
• Fornece feedback visual. O aparecimento do botão = um sinal de que o formulário está pronto para ser submetido.
• Reduz a fricção. O utilizador preenche os campos, o botão aparece, um clique, está feito.

O Contact Form 7 não tem um mecanismo nativo para este comportamento. Mas adicioná-lo demora 10 minutos de trabalho.

Método 1: Monitorização de input com jQuery

A abordagem mais flexível. Define as suas próprias regras: quantos caracteres cada campo deve conter antes de o botão aparecer. Funciona com qualquer tipo de campo (texto, email, área de texto, telefone).

Corpo do formulário do Contact Form 7

Como exemplo, considere um formulário de contacto padrão com três campos, Google reCAPTCHA e um botão de submeter. Aqui está a sua marcação no editor do CF7:

1
[text text-776 id:bim-name class:bim-name placeholder "Name"]
2
[email email-498 id:bim-email class:bim-email placeholder "Email"]
3
[textarea textarea-697 id:bim-message class:bim-message placeholder "Message"]
4
 
5
<style>
6
.g-recaptcha > div {
7
    width: 100% !important;
8
}
9
.g-recaptcha iframe {
10
    width: 100% !important;
11
}
12
div#GoogleReCapchaFullWidth {
13
    width: 100% !important;
14
    padding-bottom: 6px;
15
}
16
</style>
17
 
18
[recaptcha id:GoogleReCapchaFullWidth]
19
 
20
[submit id:bim-button class:bim-button "Submit"]

O bloco de CSS dentro do formulário é uma solução para esticar o reCAPTCHA à largura total do contentor; é útil se o formulário estiver numa coluna estreita.

Script jQuery

Copie este código para o ficheiro custom.js do seu tema ou para o campo «Scripts Adicionais» do plugin Code Snippets:

1
jQuery(document).ready(function ($) {
2
 
3
    // Initially the button is hidden
4
    $('#bim-button').css('display', 'none');
5
 
6
    // Listen for input on all three fields
7
    $('#bim-name, input#bim-email, #bim-message').on('input', function () {
8
        var nameVal = $('#bim-name').val().trim();
9
        var emailVal = $('#bim-email').val().trim();
10
        var messageVal = $('#bim-message').val().trim();
11
 
12
        // Conditions: name > 4 characters, email > 6, message > 20
13
        if (nameVal.length > 4 && emailVal.length > 6 && messageVal.length > 20) {
14
            $('#bim-button').fadeIn(200);
15
        } else {
16
            $('#bim-button').fadeOut(200);
17
        }
18
    });
19
 
20
});

O que está a acontecer aqui:

• Linha 4: o botão é ocultado imediatamente ao carregar a página (display: none).
• Linha 7: o método .on('input', ...) escuta qualquer alteração de texto nos três campos (o utilizador a digitar, a colar da área de transferência, a apagar caracteres). Anteriormente usava-se .keyup(), mas input é mais fiável: também é acionado ao colar com o rato.
• Linhas 8-10: lemos os valores atuais e removemos os espaços em branco das extremidades com .trim().
• Linha 13: verificação da condição. Pode alterar os números para se adequarem às suas necessidades: por exemplo, > 1 pode ser suficiente para um campo de nome, > 10 para uma mensagem.
• Linhas 14 e 16: fadeIn e fadeOut proporcionam um aparecimento e desaparecimento suaves do botão ao longo de 200 milissegundos. Fica mais limpo do que um show()/hide() abrupto.

Fisicamente, o elemento do botão está sempre na árvore DOM da página; a visibilidade é controlada pela propriedade CSS display. Isto é seguro: mesmo que o script não carregue (problema de rede, bloqueador de anúncios), o botão simplesmente permanece visível e o utilizador não perde a capacidade de submeter o formulário.

Como adaptar ao seu formulário

Altere três coisas:

• IDs dos campos: na marcação do CF7, substitua bim-name, bim-email e bim-message pelos seus próprios identificadores.
• Limites de caracteres: na condição if, insira os números de que precisa. Para um campo de telefone, pode verificar .replace(/\D/g, '').length > 9 (apenas dígitos, pelo menos 10).
• Lista de campos: se tiver 5 campos, adicione-os ao seletor $('#id1, #id2, ...') e à condição if.

Para tipos de campo [checkbox], [select] ou [radio], o comprimento do texto não funciona; verifique a própria seleção:

1
var agreeChecked = $('#bim-agree').is(':checked');

Método 2: CSS puro sem scripts

Para formulários simples com um ou dois campos, pode dispensar completamente o JavaScript. A ideia é que os navegadores modernos podem verificar a validade do campo através da pseudo-classe :valid, e o combinador CSS :has() (suportado em todos os navegadores desde 2023) permite «olhar para dentro» de um elemento pai.

Funciona assim:

1
form.wpcf7-form .wpcf7-submit {
2
    display: none;
3
}
4
 
5
form.wpcf7-form:has(input[required]:invalid) .wpcf7-submit {
6
    display: none;
7
}
8
 
9
form.wpcf7-form:not(:has(input[required]:invalid)) .wpcf7-submit {
10
    display: block;
11
}

Mas há uma nuance: o CF7 não adiciona o atributo required aos campos automaticamente. Precisa de o adicionar manualmente na marcação do formulário; um asterisco * ao lado do nome do campo no editor do CF7 é suficiente:

1
[text* text-776 id:bim-name placeholder "Name"]
2
[email* email-498 id:bim-email placeholder "Email"]

O asterisco após o tipo de campo (text*, email*) ativa o estado obrigatório. O próprio CF7 irá inserir o atributo HTML required na tag <input>, e o seletor CSS funcionará.

A vantagem do método CSS: zero scripts, não se quebra com conflitos de jQuery e funciona mesmo com JavaScript desativado. A desvantagem: a lógica é mais simples («todos os campos obrigatórios estão preenchidos» versus «o campo nome tem mais de 4 caracteres»). Para a maioria dos formulários de contacto, isto é suficiente.

Método 3: Plugin Conditional Fields para Contact Form 7

Quando a lógica se torna mais complexa (por exemplo, mostrar o botão apenas se um item específico em [select] for escolhido e o email estiver preenchido), o código jQuery cresce. É aqui que o plugin gratuito Conditional Fields for Contact Form 7 vem em socorro (mais de 100.000 instalações ativas, classificação de 5 estrelas).

O plugin adiciona um editor visual de condições diretamente na interface do CF7. Define regras em poucos cliques:

• «Mostrar o botão se o campo 'Nome' não estiver vazio E o campo 'Email' não estiver vazio E o campo 'Mensagem' contiver mais de 20 caracteres.»
• Ou: «Mostrar o campo 'Morada de entrega' se o botão de rádio 'Entrega por estafeta' estiver selecionado.»

Sem necessidade de código. As condições podem ser aplicadas a qualquer campo ou grupo de campos, incluindo o próprio botão de submeter. O plugin é mantido ativamente e atualizado regularmente; em junho de 2026, é compatível com a versão atual do WordPress.

Qual a solução a escolher

As três abordagens cobrem três cenários diferentes:

• CSS puro: ideal para uma landing page com um formulário simples de 2 a 3 campos. Mínimo de partes móveis, nada para avariar.
• Script jQuery: a sua escolha quando precisa de limites ajustados com precisão («nome com mais de 4 caracteres, mensagem com mais de 20»). Controlo total sobre as condições.
• Conditional Fields: use-o quando a lógica se ramifica (conjuntos diferentes de campos para escolhas diferentes, condições aninhadas, mostrar/ocultar secções inteiras do formulário). O construtor visual poupa horas de depuração.

Para a maioria dos sites WordPress, a combinação de «jQuery + senso comum» é suficiente. O script acima (20 linhas) é inserido uma vez e funciona durante anos sem atualizações.

Vídeo: Configuração passo a passo

Este tutorial de 8 minutos percorre todo o processo, desde a criação de um formulário no CF7 até um script finalizado de ocultação de botão que verifica se todos os campos estão preenchidos:

⁉️🤔 Perguntas frequentes

O script funciona com plugins de cache?

Sim, desde que seja usado o invólucro adequado jQuery(document).ready(...). Se o site utilizar minificação agressiva (Autoptimize, WP Rocket com combinação de scripts), exclua o ficheiro de script da combinação ou use o plugin Code Snippets: este insere o código no rodapé da página como um bloco separado que os minificadores não tocam.

E se um utilizador tiver o JavaScript desativado?

Com o JavaScript desativado, o botão permanece visível; o script simplesmente não o oculta. Isto é degradação graciosa: o CF7 fará a validação do lado do servidor e exibirá os erros da forma padrão. Para o método CSS que usa :has(), a situação é a mesma: sem validação JS, o CF7 verifica os campos no servidor aquando da submissão.

Posso ocultar o botão para um formulário específico se houver vários na página?

A forma mais fácil é dar ao botão um id único no editor do CF7 e depois usar esse ID como seletor no script. Se houver vários formulários, duplique o bloco de código para cada botão com o seu próprio ID, ou encontre dinamicamente o botão dentro do formulário atual através de $(this).closest('form').find('.wpcf7-submit').

Porque não usar apenas required nos campos e confiar na validação do navegador?

Porque required não oculta o botão; apenas bloqueia a submissão do formulário e mostra uma dica nativa do navegador. O nosso objetivo é remover a própria oportunidade de um clique erróneo. Além disso, a validação padrão do navegador não verifica o comprimento do texto, apenas o facto de estar preenchido, e para uma mensagem de 2 caracteres, isto é uma proteção fraca.

Ainda preciso de validar os campos no servidor?

Sim, absolutamente. A lógica do lado do cliente para ocultar o botão não substitui a validação do lado do servidor do CF7. Configure sempre os campos obrigatórios no editor do formulário (o * na marcação) e verifique se os emails são entregues. Duas camadas de proteção: frontend para conveniência, backend para segurança.

Botão oculto, leads limpas: o que usar no seu site

A abordagem de ocultar o botão de submeter é uma daquelas micro-melhorias que são invisíveis aos olhos, mas percetíveis às mãos. Um utilizador não dirá «espetacular, o botão apareceu no momento certo». Mas irá completar o formulário e não sairá após o primeiro clique no vazio.

Para um formulário de contacto simples, use o método CSS com :has(): 5 linhas de código, zero dependências. Para limites de comprimento personalizados nos campos, use o script jQuery do método 1 (copie e cole no Code Snippets). Para formulários complexos com lógica ramificada, use o Conditional Fields.

Experimente agora mesmo: abra o editor do seu formulário de contacto no CF7, adicione id: aos campos e ao botão, cole o script e verifique como o botão aparece apenas quando todos os campos estão preenchidos de forma significativa, e não de qualquer maneira.