🎯 Teste Magnific Popup

Demonstração completa usando o partial form-lead.njk
Abra o console do navegador (F12) para ver os logs de debug

📝 Exemplo 1: Popup de Formulário

Clique no botão abaixo para abrir o formulário de captura em popup modal.
Este formulário usa o partial form-lead.njk com popup: true

🚀 Abrir Formulário em Popup

💡 Como funciona

  • O botão tem a classe .js-form
  • O atributo href="#lead-form-popup-teste" aponta para o ID do formulário
  • O formConfig tem popup: true para renderizar em popup
  • O Magnific Popup detecta automaticamente e abre o modal

🎥 Exemplo 2: Popup de Vídeo

Clique nos cards para abrir vídeos do YouTube em popup iframe.
O vídeo é carregado dinamicamente com player responsivo.

Documentário Remote First

Um curta sobre trabalho remoto e propósito

▶ Assistir

Vídeo de Exemplo

Teste com vídeo do YouTube

▶ Assistir

💡 Como funciona

  • O link tem a classe .js-testimony-video
  • O href aponta diretamente para a URL do YouTube ou Vimeo
  • O Magnific Popup detecta e abre em iframe responsivo

🔄 Exemplo 3: Múltiplos Gatilhos

Vários botões podem abrir o mesmo popup.
Útil para ter CTAs em diferentes partes da página (hero, meio, footer).

📩 Botão Hero 📩 Botão Meio da Página 📩 Botão Footer

🔍 Como Debugar no Console

Abra o Console do navegador (F12 → Console) e digite:

  • $ → Deve retornar uma função (jQuery carregado ✅)
  • $.fn.jquery → Deve retornar "3.7.1" (versão do jQuery)
  • $.fn.magnificPopup → Deve retornar uma função (Magnific Popup carregado ✅)
  • $('.js-form').length → Deve ser 4 (4 botões de formulário na página)
  • $('.js-testimony-video').length → Deve ser 2 (2 botões de vídeo)
  • Procure por: ✅ Magnific Popup inicializado

❌ Problemas Comuns

  • Popup não abre: Verifique se o href="#lead-form-popup-teste" do botão bate com o id: "lead-form-popup-teste" do formConfig
  • jQuery undefined: Limpe o cache do navegador (Ctrl+Shift+R ou Cmd+Shift+R)
  • Classe errada: Use .js-form para formulários e .js-testimony-video para vídeos
  • Esqueceu popup: true: Sem esse parâmetro o formulário aparece inline na página, não em popup
  • Formulário não aparece: Verifique se o include do form-lead.njk está no final da página

✅ Checklist de Verificação

  • ✅ Botão tem classe .js-form
  • ✅ Atributo href aponta para #ID-do-formulário
  • ✅ FormConfig tem id que bate com o href (sem #)
  • ✅ FormConfig tem popup: true
  • ✅ Include do form-lead.njk está no final da página
  • ✅ jQuery 3.7.1 está carregado (veja no console)
  • ✅ Magnific Popup está inicializado (veja no console)

📚 Parâmetros Principais do form-lead.njk

Parâmetros obrigatórios:

  • id - ID único do formulário (deve bater com o href do botão)
  • capturaId - ID de rastreamento da captura
  • capturaGrupo - Grupo de capturas

Parâmetros importantes:

  • popup: true - Renderiza o formulário dentro de popup (obrigatório para modal)
  • showStep2: true/false - Mostra campos adicionais (cargo, empresa)
  • title - Título do formulário
  • subtitle - Subtítulo do formulário
  • buttonText - Texto do botão de envio
  • redirect - URL de redirecionamento após envio