Precisa de um formulário de contacto que se adapte às escolhas do utilizador: o suporte técnico mostra um conjunto de campos, a área comercial mostra um conjunto completamente diferente. O Contact Form 7 padrão não consegue fazer isto. Sem lógica condicional, a página exibe uma muralha de todos os campos de uma só vez, metade dos quais o visitante não precisa. Fica confuso e causa desorganização.

O plugin Conditional Fields** para Contact Form 7** resolve este problema: os campos aparecem e desaparecem com base no que o utilizador seleciona. Abaixo encontra um guia passo a passo para construir um formulário de suporte real, desde a instalação do plugin até às respostas de email personalizadas. A mesma abordagem adapta-se a calculadoras, inquéritos e candidaturas em várias etapas.

💡 Visão geral rápida:

• Instale o CF7 e o Conditional Fields, crie um formulário básico com um tipo de pedido
• Agrupe os campos em [group]…[/group], configure as condições de exibição através do separador "Conditional fields"
• Construa o formulário final com grupos aninhados, etiquetas dinâmicas e um ramo personalizado "Outro"
• Configure o email personalizado: texto diferente e conjuntos de campos diferentes para suporte técnico e área comercial

O que os campos condicionais oferecem

O Contact Form 7 é o construtor de formulários mais popular para WordPress: mais de 10 milhões de instalações ativas, sobrecarga mínima. Mas de origem é estático: todos os campos estão sempre visíveis. Se o formulário tiver três ramos lógicos (suporte técnico, área comercial, parcerias), o visitante vê nove campos extra que nada têm a ver com o seu pedido.

O Conditional Fields for Contact Form 7 adiciona lógica "se-então" diretamente no editor de formulários. O plugin é gratuito, tem uma classificação de 4,8 no WordPress.org e mais de 100 000 instalações ativas. O autor, Jules Colle, também desenvolve a versão Pro com campos repetíveis, formulários em várias etapas e valores calculados.

Importante: o plugin não remove os campos ocultos da marcação HTML; apenas os esconde via JavaScript. Portanto, todos os campos dentro de grupos ocultos continuam a ser enviados para o servidor. Os nomes dos campos devem ser únicos, mesmo entre grupos diferentes, caso contrário os valores serão sobrescritos. Esta é a regra número um e, na prática, é o obstáculo mais comum.

Instalação e formulário inicial

Instale ambos os plugins através de Plugins → Adicionar novo:

• Contact Form 7, o construtor de formulários em si
• Conditional Fields for Contact Form 7, o motor de lógica condicional

Após a ativação, vá a Contacto → Adicionar novo e cole o modelo de formulário. Ainda sem grupos condicionais, apenas todos os campos de uma vez:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
8
 
9
In case you selected Technical support:
10
Please specify your OS version: [text version]
11
 
12
In case you selected Sales:
13
Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
14
 
15
[textarea comments]
16
 
17
[submit "Send"]

É este o aspeto do formulário sem lógica: a seleção do sistema operativo e os campos de suporte técnico estão sempre visíveis, mesmo que o visitante tenha selecionado "Área comercial". Não existe qualquer opção "Outro SO" e a etiqueta do campo de versão não muda com base no sistema selecionado. Corrigimos isto com grupos.

Criar grupos de campos

Um grupo é um par de etiquetas [group group-name] ... [/group]. Tudo o que está entre elas fica oculto por defeito e só aparece quando uma condição é acionada. Os grupos podem ser aninhados uns dentro dos outros, o que é útil para lógica em cascata.

No editor de formulários, clique no botão Conditional group acima da área de texto; ele adiciona as etiquetas automaticamente.

Na janela que aparece, defina o nome do grupo e as opções:

• Clear on hide limpa todos os campos dentro do grupo quando este fica oculto. Útil para que os valores dos campos invisíveis não sejam enviados no email.
• Inline exibe o grupo como um elemento inline. Útil quando precisa de incorporar um pedaço de texto diretamente numa frase (mostrarei isto mais adiante).

Crie o primeiro grupo technical-support-selected e mova os campos de sistema operativo e versão para dentro dele:

1
[group technical-support-selected]
2
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
3
  [group os-selected]
4
    Please specify your OS version: [text version]
5
  [/group]
6
[/group]

Já existem aqui dois grupos, um dentro do outro. O exterior (technical-support-selected) representa o facto de ter sido selecionado suporte técnico. O interior (os-selected) é o esclarecimento da versão do SO, que aparecerá APENAS quando o utilizador selecionar um sistema operativo específico. Sem uma condição, ambos os grupos permanecem invisíveis por enquanto.

O mesmo para a área comercial:

1
[group sales-support-selected]
2
  Where is your business located?
3
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
4
[/group]

Guarde o formulário e os grupos desaparecerão do frontend. Isto é normal: ainda não existem condições.

Configurar a lógica condicional

Depois de guardar o formulário, vá ao separador Conditional fields. Existem dois modos: visual (menus suspensos) e texto (escreve as regras manualmente). O modo texto é mais rápido para formulários complexos, por isso vamos usar esse.

Clique em Add new conditional rule e introduza a primeira regra:

1
show [technical-support-selected] if [support-type] equals "Technical support"

A sintaxe é simples: show <group> if <field> equals "<value>". Depois de guardar a regra, o grupo technical-support-selected ficará visível assim que o utilizador selecionar «Technical support» no menu suspenso.

Adicione a regra para vendas:

1
show [sales-support-selected] if [support-type] equals "Sales"

Agora o formulário alterna entre dois ramos, mas dentro do suporte técnico o campo de versão continua sempre visível. Precisamos que apareça apenas após selecionar um SO específico:

1
show [os-selected] if [operating-system] not equals ""

A verificação not equals "" funciona porque usamos first_as_label; o valor -- Choose your operating system -- não é considerado como selecionado. O campo operating-system permanece vazio até o visitante clicar efetivamente numa opção.

Continuando: devemos adicionar uma opção «Outro» ao menu suspenso do SO. Se o utilizador selecionar «Outro», não sabemos qual o SO que tem, por isso damos-lhe dois campos de texto: o nome do sistema e a versão. Precisamos de um novo grupo os-other-selected e de uma regra com o operador AND:

1
show [os-selected] if [operating-system] not equals ""
2
               and if [operating-system] not equals "Other"
3
show [os-other-selected] if [operating-system] equals "Other"

Duas regras para um grupo: a primeira mostra os-selected para qualquer SO exceto «Outro», a segunda mostra os-other-selected apenas para «Outro». A lógica é mutuamente exclusiva, pelo que não haverá conflitos.

Formulário final: etiquetas dinâmicas e o ramo «Outro»

Agora vamos juntar tudo. Adicionaremos grupos inline que alteram a etiqueta do campo de versão consoante o SO selecionado (Android, iOS, Linux ou Windows). O texto da etiqueta fica «incorporado» diretamente no grupo e aparece apenas quando a condição corresponde:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
[group technical-support-selected]
8
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]
9
 
10
  [group os-selected]
11
    Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
12
    [text version]
13
  [/group]
14
 
15
  [group os-other-selected]
16
    Please specify your OS and version.
17
    [text other-os "Operating System"][text other-version "Version"]
18
  [/group]
19
[/group]
20
 
21
[group sales-support-selected]
22
  Where is your business located?
23
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
24
[/group]
25
 
26
[textarea comments]
27
 
28
[submit "Send"]

O ponto-chave: grupos inline com nomes de SO ([group os-android inline]Android[/group]). O atributo inline torna o grupo um elemento inline, para que o texto da etiqueta não quebre em parágrafos. As condições para estes grupos no separador Conditional fields:

1
show [technical-support-selected] if [support-type] equals "Technical support"
2
show [sales-support-selected] if [support-type] equals "Sales"
3
show [os-selected] if [operating-system] not equals ""
4
               and if [operating-system] not equals "Other"
5
show [os-android] if [operating-system] equals "Android"
6
show [os-ios] if [operating-system] equals "iOS"
7
show [os-linux] if [operating-system] equals "Linux"
8
show [os-windows] if [operating-system] equals "Windows"
9
show [os-other-selected] if [operating-system] equals "Other"

Clique em Save conditions, depois guarde o formulário. Copie o shortcode [contact-form-7 id="..." title="..."] para uma página e teste-o no frontend. A alternância entre ramos deve funcionar instantaneamente, sem recarregar a página.

Personalizar a resposta por email

Os grupos condicionais funcionam não só no formulário, mas também no modelo de email. Isto significa que o utilizador pode receber um email diferente consoante o que selecionou.

Abra o separador Mail no editor do formulário. No campo Message body, envolva o texto nos mesmos grupos que usou no formulário:

1
[technical-support-selected]
2
Thank you for submitting your technical support question
3
[/technical-support-selected][sales-support-selected]
4
Thank you for your sales question
5
[/sales-support-selected]

A tag de fecho [/technical-support-selected] e a tag de abertura [sales-support-selected] ficam imediatamente uma ao lado da outra, sem espaço; caso contrário, aparecerá uma quebra de linha extra no email.

Agora vamos adicionar uma tabela com os campos preenchidos. Dentro de cada grupo, listamos APENAS os campos relevantes:

1
<table>
2
<tr><td>your-name</td><td>[your-name]</td></tr>
3
<tr><td>your-email</td><td>[your-email]</td></tr>
4
<tr><td>support-type</td><td>[support-type]</td></tr>
5
[technical-support-selected]
6
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
7
  [os-selected]
8
    <tr><td>version</td><td>[version]</td></tr>
9
  [/os-selected]
10
  [os-other-selected]
11
    <tr><td>other-os</td><td>[other-os]</td></tr>
12
    <tr><td>other-version</td><td>[other-version]</td></tr>
13
  [/os-other-selected]
14
[/technical-support-selected]
15
[sales-support-selected]
16
  <tr><td>continent</td><td>[continent]</td></tr>
17
[/sales-support-selected]
18
<tr><td>comments</td><td>[comments]</td></tr>
19
</table>

Quando o formulário for submetido, o plugin irá remover do email tudo o que pertence a grupos ocultos. O suporte técnico receberá as linhas com SO e versão; as vendas receberão apenas o continente. Limpo e claro.

Se precisar de construir emails manualmente e editar a marcação, o autor do plugin criou um conversor web de código CF7 para corpo de email. Cole o código do formulário e obtenha um modelo de tabela para o email.

⁉️🤔 Perguntas frequentes

Porque é que todos os grupos estão visíveis? As condições não estão a funcionar.

Primeiro, verifique a consola do navegador (F12) para detetar erros de JavaScript. O Conditional Fields carrega o seu script em último lugar, e qualquer erro de JS antes dele quebra toda a lógica. Segundo, o seu tema tem de chamar o wp_footer() no ficheiro footer.php. Sem este hook, o script não será carregado. Na maioria das vezes, o culpado é um conflito de plugins: desative tudo exceto o CF7 e o Conditional Fields e teste o formulário. Se funcionar, ative os plugins um a um até encontrar o culpado.

Os campos no email chegam com valores incorretos ou vazios.

Os nomes de TODOS os campos no formulário devem ser únicos, mesmo que os campos estejam em grupos diferentes e nunca estejam visíveis ao mesmo tempo. O plugin NÃO remove os campos ocultos no envio; apenas os esconde visualmente. Dois campos com o nome a em grupos diferentes = dois valores para a mesma chave, e um deles prevalecerá. Certifique-se de que cada campo tem o seu próprio nome.

Como crio um formulário com passos e campos repetíveis?

A versão gratuita não consegue fazer isto; precisa do Conditional Fields Pro. Este adiciona multi-passo (dividir o formulário em passos com botões «Seguinte»), blocos de campos repetíveis (repeater) e campos calculados. O custo, no site do programador, depende do número de sites. Se o seu formulário for simples e não tiver repetidores, a versão gratuita é mais do que suficiente.

O que devo fazer se o plugin entrar em conflito com o meu tema?

Ative um tema padrão do WordPress (Twenty Twenty-Five) e teste o formulário nele. Se funcionar, o problema é do seu tema. Normalmente, chamar manualmente o wp_footer() ou mover o formulário para uma página diferente, sem scripts pesados do tema, ajuda. Se o tema for personalizado, peça ao programador para garantir que o hook wp_footer() é chamado em todas as páginas com formulários.

Posso usar campos condicionais para uma calculadora de preços?

Sim, e este é um dos cenários mais comuns. Um conjunto de listas suspensas (tipo de serviço, volume, urgência) com grupos condicionais para cada opção. A versão Pro adiciona campos calculados completos; se precisar de multiplicar e somar valores diretamente no formulário, procure nessa direção.

O que fazer a seguir: do protótipo ao formulário de produção

Construímos um formulário de suporte com dois ramos lógicos, grupos aninhados e email personalizado. A mesma abordagem funciona para qualquer cenário com condições: inquéritos ramificados, calculadoras, registos com diferentes perfis.

A que deve prestar atenção antes de entrar em produção:

• Verifique a unicidade de TODOS os nomes dos campos; mais uma vez, esta é a regra número um.
• Teste o formulário em dispositivos móveis: listas de opções longas e grupos aninhados podem tornar os dispositivos mais fracos lentos.
• Configure a proteção contra spam; o Contact Form 7 funciona bem com reCAPTCHA v3, Akismet e Turnstile.

Se a lógica do seu formulário for além de «mostrar/ocultar» e precisar de repetidores, cálculos ou múltiplos passos, veja o Conditional Fields Pro. Mas para a maioria das tarefas, a versão gratuita é suficiente: é estável, atualizada a cada poucas semanas e funciona com o Contact Form 7 versão 6.1.6 e WordPress 7.0.

Veja o vídeo de demonstração de todo o processo, da instalação ao formulário final; ele reforçará cada passo com um exemplo ao vivo: