💡 Como configurar um formulário CF7 universal com um campo oculto

• Instale o plugin Dynamic Text Extension e ative-o na secção Plugins
• Adicione uma tag dinâmica oculta com o identificador id:HIDDENINPUT ao seu formulário para passar o título do bloco
• Crie um popup no Popup Maker, insira o shortcode do formulário e configure o gatilho Click Open
• Conecte um script jQuery que captura o título do bloco e o insere no campo oculto
• Adicione [dynamichidden-120] ao modelo de e-mail para poder ver de que bloco veio o envio
• Teste o envio: popup de erro num formulário vazio e popup de sucesso após um envio bem-sucedido

Passo 1: plugin para campo oculto, Dynamic Text Extension

O Contact Form 7 básico não consegue adicionar campos ocultos de raiz. Até recentemente, o plugin Contact Form 7 Modules tratava desta tarefa, mas não é atualizado desde 2017 e não foi testado com versões recentes do WordPress.

O substituto atual é o Contact Form 7 - Dynamic Text Extension (DTX). Este plugin é mantido ativamente (última atualização em junho de 2026), funciona com o WordPress 7.0 e faz muito mais do que apenas campos ocultos: valores dinâmicos de URLs, cookies, campos meta de posts, dados do utilizador atual e shortcodes personalizados.

Instale o plugin através de Plugins → Adicionar Novo Plugin, pesquise por "Dynamic Text Extension", clique em "Instalar Agora" e ative. Dois novos botões aparecerão no menu suspenso do gerador de tags do editor de formulários do Contact Form 7: dynamic text e dynamic hidden.

Para o nosso cenário, precisamos do dynamic hidden. Crie um campo oculto com um identificador através do qual o script jQuery passará o título do bloco:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Se o DTX não lhe servir por algum motivo, ainda pode usar o antigo Contact Form 7 Modules: continua funcional para campos ocultos básicos, mas não foi testado com versões recentes do WordPress e não é atualizado desde 2017. O shortcode teria este aspeto: [hidden hidden-120 id:HIDDENINPUT].

Passo 2: formulário e modelo de e-mail

O formulário é construído com campos padrão do CF7 mais o nosso campo oculto. Aqui está um modelo funcional; copie-o para o editor de formulários:

1
[text* text-59 placeholder "Your Name*"]
2
[tel* tel-116 placeholder "Phone*"]
3
[email Email placeholder "Email"]
4
[recaptcha]
5
[submit "Send"]
6
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Os campos text-59, tel-116 e Email são obrigatórios (asterisco após o tipo). O reCAPTCHA protege contra spam. O botão de envio e o campo oculto completam o formulário.

Configure agora o modelo de e-mail no separador «Mail» do editor do formulário. O ponto essencial é adicionar [dynamichidden-120] (ou [hidden-120] para módulos CF7) ao corpo do e-mail, para poder ver de que bloco veio o envio:

Para: moc.niamodruoy@liame-ruoy

De: [Email]

Assunto: Pedido de contacto do site, [dynamichidden-120]

Corpo do e-mail:

1
Selected product/service: [dynamichidden-120]
2
---
3
Name: [text-59]
4
Phone: [tel-116]
5
Email: [Email]
6
---
7
Message sent from page: [_url]

Certifique-se de que ativa a caixa de seleção «Use HTML content type», caso contrário a formatação será quebrada. Para uma entrega fiável de e-mails, configure SMTP (através de qualquer plugin SMTP: Post SMTP, WP Mail SMTP ou Google Gmail API); sem isto, os e-mails do CF7 acabam frequentemente no spam.

Passo 3: criar um popup no Popup Maker

O antigo plugin Popups - WordPress Popup foi encerrado em julho de 2022 devido a uma vulnerabilidade e não está disponível para instalação. O substituto moderno é o Popup Maker: mais de 780 000 instalações ativas, integração nativa com o CF7 e dezenas de acionadores e regras de segmentação.

Instale o Popup Maker através de Plugins → Adicionar Novo Plugin e, em seguida, vá a Popup Maker → Criar Popup. Atribua um nome ao popup e insira o shortcode do formulário no editor de conteúdo:

1
[contact-form-7 id="123" title="Universal Form"]

Encontre o ID do formulário na lista de formulários do CF7 (coluna «Shortcode»). Nas definições do popup, à direita, no bloco Triggers, selecione Click Open e especifique o seletor CSS do botão que abrirá o popup (por exemplo, .jet-button-order). Isto é análogo ao «Manual Triggering» do antigo plugin Popups.

Agora encontre o ID do popup que criou. Abra o popup no editor e observe o URL do navegador: post.php?post=4197&action=edit; o número após post= é o ID (4197 neste exemplo). Vai precisar dele para o script no próximo passo.

Passo 4: script jQuery para capturar o título do bloco

O script resolve a tarefa principal: ao clicar num botão dentro de um bloco, captura o texto do título desse bloco e insere-o tanto no título do popup como no campo oculto do formulário. Vamos analisá-lo.

Primeiro, atribua uma classe CSS comum a todos os blocos onde precisa de encontrar o título (por exemplo, ForContactForm7HiddenInput). No Elementor, isto é feito através de «Avançado → Classes CSS» para a secção do wrapper.

O script em si é ligado através do ficheiro functions.php do tema filho ou do plugin Code Snippets (mais seguro, não se perde quando o tema é atualizado):

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'cf7-universal-form',
4
        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5
        ['jquery'],
6
        '1.0',
7
        true
8
    );
9
});

Conteúdo do ficheiro cf7-universal-form.js:

1
jQuery(document).ready(function ($) {
2
 
3
    // Variable for storing the block title
4
    var blockTitle = '';
5
 
6
    // Capture the title text on button click
7
    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8
        blockTitle = $(this)
9
            .closest('.ForContactForm7HiddenInput')
10
            .find('h3.elementor-heading-title')
11
            .text()
12
            .trim();
13
    });
14
 
15
    // Wait for popup to open via MutationObserver
16
    var popupId = '4197'; // Your popup ID from Popup Maker
17
    var observer = new MutationObserver(function (mutations) {
18
        mutations.forEach(function (mutation) {
19
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20
                var $popup = $('#popmake-' + popupId);
21
                if ($popup.hasClass('active') && blockTitle) {
22
                    // Insert the title into the popup
23
                    $popup.find('.popup-title').text(blockTitle);
24
                    // Insert the title into the form's hidden field
25
                    $('#HIDDENINPUT').val(blockTitle);
26
                }
27
            }
28
        });
29
    });
30
 
31
    // Start observing the popup
32
    var $popupContainer = $('#popmake-' + popupId);
33
    if ($popupContainer.length) {
34
        observer.observe($popupContainer[0], {
35
            attributes: true,
36
            attributeFilter: ['class']
37
        });
38
    }
39
 
40
});

O que está a acontecer aqui:

• Capturar o título: ao clicar no botão com a classe .jet-button-order, o script sobe no DOM até ao bloco pai .ForContactForm7HiddenInput, localiza o h3.elementor-heading-title dentro dele e guarda o seu texto na variável blockTitle.
• Monitorizar o popup: em vez do desatualizado attrchange.js (cujo CDN rawgit.com está encerrado), o script utiliza o MutationObserver nativo, que observa alterações de classe no contentor do Popup Maker. Quando a classe active aparece (popup está aberto), o script insere o título guardado no cabeçalho do popup e no campo oculto #HIDDENINPUT.
• Seletores: .jet-button-order é a classe do botão JetElements do Elementor; substitua-a pela classe do seu botão. O Popup Maker renderiza com o ID #popmake-{ID}, pelo que o código utiliza #popmake-4197; substitua 4197 pelo ID do seu popup.

Abaixo do bloco jQuery está um exemplo visual do aspeto de uma página com vários blocos e botões «Encomendar»:

Após clicar no botão do primeiro bloco, o script captura o texto «Estores de Rolo», insere-o no título do popup e no campo oculto do formulário:

O mesmo se aplica a todos os cinco blocos: o título muda dinamicamente enquanto o formulário permanece o mesmo.

Passo 5: popups para submissão bem-sucedida e erro

O Popup Maker permite criar quantos popups precisar. Para mensagens de estado (sucesso / erro), crie mais dois popups de forma semelhante ao passo 3. Não precisa de os associar manualmente a gatilhos; o CF7 controla-os através de eventos JavaScript.

O popup de erro aparece quando o formulário falha a validação. Conteúdo:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Error icon" width="177" height="161">
3
</p>
4
<p style="text-align: center;">
5
    The form has errors. Check the messages under the input fields and try again.
6
</p>

O popup de sucesso aparece após uma submissão bem-sucedida. Conteúdo:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/like.svg" alt="Successful submission icon" width="177" height="161">
3
</p>
4
<p style="text-align: center; padding-top: 15px;">
5
    Done! Your message has been sent successfully. We will contact you shortly.
6
</p>

Estes ícones SVG foram utilizados no popup antigo para indicar o estado da submissão. Pode substituí-los pelos seus ou mantê-los como estão; são neutros e não estão vinculados a nenhum plugin específico.

Associe os popups de estado através de eventos do CF7. Adicione este código ao mesmo ficheiro JS cf7-universal-form.js após o script principal:

1
// Show popup on CF7 validation error
2
document.addEventListener('wpcf7invalid', function () {
3
    $('#popmake-1065').popmake('open');
4
}, false);
5
 
6
// Show popup on successful submission
7
document.addEventListener('wpcf7mailsent', function () {
8
    $('#popmake-1068').popmake('open');
9
}, false);

Substitua 1065 e 1068 pelos IDs reais dos seus popups de estado do Popup Maker.

Os estilos CSS básicos para os popups de estado são ligados via Aparência → Personalizar → CSS adicional ou no ficheiro do tema:

1
/* Error popup */
2
div#popmake-1065 {
3
    z-index: 99999999;
4
}
5
div#popmake-1065 .popmake-close {
6
    font-size: 30px;
7
    color: #9e9e9e;
8
}
9
 
10
/* Success popup */
11
div#popmake-1068 {
12
    z-index: 99999999;
13
}
14
div#popmake-1068 .popmake-close {
15
    font-size: 30px;
16
    color: #9e9e9e;
17
}

Passo 6: testes e depuração

Antes de lançar num site de produção, verifique cada cenário:

• Clique em blocos diferentes: o título no popup e no campo oculto muda corretamente para cada bloco.
• Formulário vazio: submeter sem preencher os campos obrigatórios mostra o popup de erro.
• Submissão completa: o email chega e o campo oculto contém o título correto do bloco.
• Reabertura: após fechar e reabrir o popup, o título atualiza-se.

Se o título não estiver a ser inserido, verifique na consola do navegador (F12 → Consola) que:

• O seletor jQuery .ForContactForm7HiddenInput h3.elementor-heading-title encontra um elemento na página;
• A variável popupId corresponde ao ID real do popup no admin;
• A classe do botão (.jet-button-order) corresponde à classe real na página.

Os seletores no código estão ligados ao Elementor + JetElements. Se usar um construtor diferente (Gutenberg, Bricks, Oxygen), substitua pelas suas próprias classes e estrutura de título. O princípio mantém-se: botão → bloco pai → título → campo oculto.

Veja este vídeo para uma demonstração visual da configuração de um formulário popup com o Contact Form 7:

⁉️🤔 Perguntas frequentes

Posso dispensar um plugin adicional para o campo oculto?

O CF7 básico não suporta campos ocultos. O DTX é uma solução minimalista e com manutenção ativa. Em teoria, poderia adicionar <input type="hidden"> diretamente ao DOM do formulário via JavaScript, mas isso é menos fiável: o script pode não ser executado antes da submissão e o valor não aparecerá no email se não estiver associado a uma tag específica do CF7. Use o DTX ou o antigo Contact Form 7 Modules; ambos adicionam suporte a campos ocultos ao nível da tag e o valor tem aparição garantida no email.

Porque é que o Popup Maker é melhor do que o antigo plugin Popups?

O Popup Maker é atualizado ativamente (última versão em abril de 2026), tem integração nativa com o CF7 e outros formulários, e suporta dezenas de acionadores e regras de segmentação. O antigo Popups foi oficialmente encerrado pelo WordPress.org em julho de 2022 devido a uma vulnerabilidade não corrigida e não deve ser usado em sites ativos. O Popup Maker é o seu sucessor direto e seguro, com mais de 780 000 instalações ativas. Vantagem principal: integração nativa com o CF7 (os eventos wpcf7mailsent / wpcf7invalid funcionam sem código adicional) e um editor visual de popups.

Porquê usar MutationObserver em vez de attrchange.js?

A biblioteca attrchange.js era distribuída via rawgit.com, que foi encerrado em 2020. O repositório GitHub em si ainda está ativo, mas ligar o script a partir daí é inconveniente. O MutationObserver é uma API nativa do navegador, suportada por todos os navegadores modernos desde 2014, não requer dependências externas e resolve a mesma tarefa: monitorizar alterações de atributos no DOM. Menos pedidos HTTP, sem necessidade de atualizações de dependências.

O que devo fazer se o título no campo oculto aparecer como caracteres cirílicos ilegíveis no email?

Verifique a codificação nas definições do CF7 e do plugin SMTP; deve ser UTF-8. Certifique-se de que o assunto do email não contém caracteres corrompidos. Se estiver a usar SMTP via Gmail API, o problema pode estar na codificação do cabeçalho do email; verifique as definições do plugin Post SMTP ou WP Mail SMTP. Normalmente, a origem do problema é o servidor de correio, não o script. Verifique: (1) wp-config.php, a linha define('DB_CHARSET', 'utf8'); sem espaços extra antes de <?php; (2) definições do plugin SMTP, codificação de email UTF-8; (3) assunto do email no CF7, remova caracteres não standard, deixe apenas [dynamichidden-120] sem parênteses ou aspas extra.

Posso usar esta abordagem para vários formulários diferentes num só site?

Sim. Crie um formulário separado no CF7 para cada tipo de bloco e um popup separado no Popup Maker. No script, duplique a lógica para cada par "seletor de bloco → ID do popup → ID do campo oculto". Em alternativa, use um popup e um formulário com classes de bloco diferentes; o campo oculto receberá o título do bloco em que se clicou, sem configuração adicional.

Um formulário universal para todos os blocos na página é o ponto principal desta solução. Para tipos de bloco completamente diferentes (produtos vs serviços), crie dois conjuntos: formulario_produto + popup_produto e formulario_servico + popup_servico. No script, basta duplicar o bloco de código com seletores diferentes.

Que stack de plugins usar em 2026

Um formulário universal com campo oculto é uma solução comprovada para landing pages com dezenas de blocos semelhantes. Em vez de 30 formulários separados, configura um e o script insere automaticamente o título do bloco. Esta é a stack que recomendamos em 2026:

• Contact Form 7: mais de 10 milhões de instalações, leve, gratuito.
• Dynamic Text Extension (DTX): campos ocultos e dinâmicos, suporte ativo.
• Popup Maker: popups com acionadores de clique e integração nativa com o CF7.
• MutationObserver (JS nativo): monitorização da abertura de popups sem bibliotecas externas.

Se precisar de capturar o título de um bloco e passá-lo para um formulário, use esta stack. Na prática, funciona sem problemas e a configuração demora cerca de uma hora, mesmo com conhecimentos básicos de WordPress.

🔗 Dynamic Text Extension no WordPress.org | 🔗 Popup Maker no WordPress.org