Landing Page com n8n: Capture Leads no Google Sheets

Objetivo

O objetivo deste artigo é apresentar como construir, do zero, uma landing page funcional de captura de leads utilizando apenas o n8n — sem precisar de servidor, hospedagem própria ou ferramentas pagas de landing page. A página é servida diretamente por um Webhook do n8n, e os dados preenchidos pelo visitante (nome, e-mail e WhatsApp) são validados e salvos automaticamente em uma planilha do Google Sheets, prontos para serem usados por times de vendas, marketing ou em campanhas de captação para eventos, mentorias e materiais gratuitos.

Pré-requisitos

Para seguir este roteiro você vai precisar de:

Uma conta no n8n (Post da ValueHub explicando como criar sua conta, caso ainda não tenha).
Uma conta Google com acesso ao Google Sheets e credencial OAuth2 configurada no n8n (nó Google Sheets).
Noções básicas de HTML/JavaScript são úteis, mas não obrigatórias — o código já vem pronto neste artigo.

Como o fluxo funciona

O workflow é dividido em dois blocos independentes, conectados pelo próprio formulário da página:

Bloco 1 — Exibir a página: um Webhook (GET) responde com o HTML da landing page sempre que alguém acessa a URL.
Bloco 2 — Capturar o lead: um segundo Webhook (POST) recebe os dados enviados pelo formulário, valida as informações e grava uma nova linha no Google Sheets.

Essa separação em dois webhooks é o que permite servir uma página completa (HTML, CSS e JavaScript) e, ao mesmo tempo, processar o envio do formulário sem sair do n8n.

Figura 1: visão geral do workflow no n8n, com os dois blocos lado a lado

Configurando o Bloco 1 — Exibição da Landing Page

Passo 1: Webhook de entrada (Abrir Landing Page)

Adicione um nó Webhook.
HTTP Method: GET.
Path: landing-page (esse será o endereço público da sua página).
Response Mode: Using Response Node (a resposta será controlada por outro nó mais à frente no fluxo).

Figura 2: nó Webhook configurado com HTTP Method GET e path landing-page

Passo 2: Gerando o HTML (nó Code)

Adicione um nó Code logo após o Webhook.
Nele, é montada uma string HTML completa contendo:
- Um formulário com os campos Nome, E-mail e WhatsApp;
- Estilização própria (cores, tipografia e responsividade) direto em uma tag <style>;
- Um script que intercepta o envio do formulário (submit), monta o payload em JSON e faz um fetch para o segundo Webhook (/webhook/capturar-lead), exibindo mensagens de sucesso ou erro para o usuário sem recarregar a página.

Trecho essencial da lógica de envio no JavaScript da página:

const html = `<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Cadastre-se</title>
</head>
<body>
  <h1>Receba nossas novidades</h1>
  <form id="leadForm">
    <div>
      <label for="nome">Nome</label>
      <input id="nome" name="nome" required>
    </div>
    <div>
      <label for="email">E-mail</label>
      <input id="email" name="email" type="email" required>
    </div>
    <div>
      <label for="whatsapp">WhatsApp</label>
      <input id="whatsapp" name="whatsapp" type="tel" required>
    </div>
    <button id="btn" type="submit">Quero me cadastrar</button>
    <div id="msg"></div>
  </form>

  <script>
    const form = document.getElementById('leadForm'), 
          btn = document.getElementById('btn'), 
          msg = document.getElementById('msg');

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      btn.disabled = true;
      msg.textContent = 'Enviando...';
      
      try {
        const payload = Object.fromEntries(new FormData(form));
        const res = await fetch('/webhook/capturar-lead', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        
        if (!res.ok) throw new Error('Erro');
        
        msg.textContent = 'Cadastro realizado com sucesso!';
        form.reset();
      } catch (err) {
        msg.textContent = 'Erro ao enviar. Tente novamente.';
      } finally {
        btn.disabled = false;
      }
    });
  </script>
</body>
</html>`;

return [{ json: { html } }];

Dica: como o HTML inteiro está dentro do nó Code, você pode personalizar cores, textos e campos do formulário sem precisar de nenhuma ferramenta externa — basta editar a string.

Figura 3: nó Code com a string HTML da landing page

Passo 3: Respondendo com a página (Exibir Landing Page)

Adicione um nó Respond to Webhook.
Respond With: Text.
Response Body: {{ $json.html }} (o HTML gerado no passo anterior).
Em Response Headers, adicione Content-Type: text/html; charset=utf-8 para o navegador renderizar a página corretamente.

Com esses três nós, ao acessar a URL pública do Webhook (.../webhook/landing-page) o visitante já vê a landing page completa.

Figura 4: landing page aberta no navegador pela URL do webhook

Configurando o Bloco 2 — Captura e validação do lead

Passo 4: Webhook de recebimento (Receber Lead)

Adicione um segundo nó Webhook.
HTTP Method: POST.
Path: capturar-lead (é este endereço que o JavaScript da página chama no envio do formulário).
Response Mode: Using Response Node.

Figura 5: nó Webhook POST com o path capturar-lead

Passo 5: Validando os dados (nó Code)

Antes de gravar qualquer informação na planilha, o fluxo valida e normaliza os dados recebidos:

const body = $json.body ?? $json;
const nome = String(body.nome ?? '').trim();
const email = String(body.email ?? '').trim().toLowerCase();
const whatsappOriginal = String(body.whatsapp ?? '').trim();
const whatsapp = whatsappOriginal.replace(/\D/g, '');

if (nome.length < 2) throw new Error('Informe um nome válido.');
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) throw new Error('Informe um e-mail válido.');
if (whatsapp.length < 10 || whatsapp.length > 15) throw new Error('Informe um WhatsApp válido com DDD.');

return [{ json: {
  nome,
  email,
  whatsapp,
  data_cadastro: new Date().toISOString(),
  origem: 'landing-page'
} }];

Esse passo garante que:

Nome tenha pelo menos 2 caracteres;
E-mail siga um formato válido;
WhatsApp contenha apenas números e tenha um tamanho compatível com DDD + número;
Cada lead receba automaticamente uma data de cadastro e a origem do contato — útil quando você tiver mais de uma landing page alimentando a mesma planilha.

Se qualquer validação falhar, o nó lança um erro que pode ser tratado para retornar uma mensagem amigável ao visitante.

Figura 6: nó Code de validação com o script de normalização dos campos

Passo 6: Salvando no Google Sheets

Adicione o nó Google Sheets.
Credential: sua credencial OAuth2 do Google já conectada ao n8n.
Operation: Append.
Document: selecione a planilha de destino (ex: “Dados da Lead”).
Sheet: selecione a aba correspondente (ex: “Lead”).
Em Columns, mapeie:
- Nome → {{ $json.nome }}
- Email → {{ $json.email }}
- WhatsApp → {{ $json.whatsapp }}
- Data Cadastro → {{ $json.data_cadastro }}
- Origem → {{ $json.origem }}

Cada novo envio do formulário vira, automaticamente, uma nova linha na planilha.

Figura 7: nó Google Sheets em modo Append com as cinco colunas mapeadas

Passo 7: Confirmando o cadastro

Adicione um nó Respond to Webhook.
Respond With: JSON.
Response Body: {"success": true, "message": "Lead cadastrado com sucesso"}.
Response Code: 201.

Esse é o retorno que o fetch da landing page recebe para exibir a mensagem de sucesso ao visitante.

Figura 8: nó Respond to Webhook devolvendo o JSON de sucesso com código 201

Testando o fluxo

Ative o workflow no n8n.
Acesse a URL pública do Webhook landing-page no navegador — a página deve carregar normalmente.
Preencha o formulário com nome, e-mail e WhatsApp e envie.
Confira se a mensagem de sucesso aparece na tela e se uma nova linha foi criada na planilha do Google Sheets.
Teste também os cenários de erro (e-mail inválido, campo vazio) para confirmar que as validações estão funcionando.

Figura 9: planilha do Google Sheets com o lead gravado após o teste

Boas práticas e próximos passos

Domínio próprio: use um proxy reverso ou o domínio customizado do n8n para que a URL da landing page não exponha /webhook/....
Proteção contra spam: considere adicionar um reCAPTCHA ou um honeypot no formulário antes de liberar em produção.
Automação pós-cadastro: aproveite o mesmo fluxo para, logo após salvar no Google Sheets, disparar uma mensagem automática de boas-vindas por WhatsApp ou e-mail, ou enviar o lead para um CRM.
Múltiplas origens: reaproveite o Bloco 2 (captura e validação) para receber leads de várias landing pages diferentes, apenas variando o valor do campo origem.

Conclusão

Esse fluxo mostra como o n8n pode substituir, para casos simples e de baixo volume, ferramentas pagas de landing page e captura de leads. Ao unir dois Webhooks, um nó Code para gerar a interface e outro para validar os dados, e a integração nativa com Google Sheets, é possível colocar uma página de captação no ar em minutos — sem depender de infraestrutura própria e mantendo os dados centralizados em uma planilha simples de acompanhar. É uma base sólida para evoluir depois para automações mais completas, como notificações automáticas, integração com CRM ou disparo de campanhas de WhatsApp.

Referências

N8N. Webhook Node Documentation. In: n8n Documentation. Disponível em: https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.webhook/. Acesso em: 11 set. 2026.

N8N. Google Sheets Node Documentation. In: n8n Documentation. Disponível em: https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.googlesheets/. Acesso em: 11 set. 2026.

GOOGLE. Google Sheets API Overview. In: Google for Developers. Disponível em: https://developers.google.com/sheets/api. Acesso em: 11 set. 2026.

Autor: Daniel J. F. Nunes — https://www.linkedin.com/in/danieljfnunes