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 umfetchpara 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-8para 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-pageno 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
Conheça as formações de IA para negócios para aumentar performance dos negócios
