📮 Guia passo a passo

Como criar uma lista de inscritos no seu site

Quando alguém gosta do que você publica, o jeito de manter contato é ter o e-mail dessa pessoa. Este guia monta isso: um campo de inscrição no seu site, e uma lista sua guardando quem se inscreveu — com a cara do seu site, não a de um serviço de fora.

⏱️ Uns 20 minutos 💳 Sem custo 🎨 Com o visual do seu site 📋 Precisa: o site já publicado

🧭 Por que isso precisa de um serviço

O seu site é o que se chama de site estático: as páginas já estão prontas e são entregues ao visitante praticamente do jeito que foram criadas, sem uma aplicação no servidor cuidando de coisas como cadastro de usuários ou armazenamento de dados.

Isso ajuda a deixar o site simples, rápido e barato, mas significa que ele, sozinho, não mantém uma lista de quem se inscreveu. Quando alguém informa o e-mail, esse endereço precisa ser enviado para algum lugar capaz de armazená-lo.

Por isso usamos um serviço de newsletter. Ele não só guarda a lista de inscritos, como também já oferece justamente o que será necessário depois: enviar atualizações para essas pessoas, controlar descadastros e ajudar na entrega dos e-mails.

Um serviço de formulário também poderia coletar os endereços, mas resolveria apenas essa primeira etapa. Depois ainda seria necessário organizar a lista e encontrar uma forma adequada de fazer os envios.

📌 O escolhido é o Kit (o antigo ConvertKit): grátis até 10.000 inscritos, com envio ilimitado. ⚠️ A contrapartida do plano gratuito é que o Kit mantém um espaço de recomendação gerenciado por eles, que você não remove sem pagar — no fluxo deste guia ele não aparece para quem se inscreve, mas vale saber que existe.

💡 E se eu quisesse fazer por conta, sem depender de um serviço de newsletter?

Dá para fazer. Você poderia guardar os inscritos no próprio Cloudflare e criar toda a lógica da lista no seu site: cadastro, descadastro, confirmação e controle de quem deve receber cada mensagem.

A parte que não vale muito a pena fazer sozinho é entregar os e-mails na internet.

Para mandar mensagens para Gmail, Outlook e outros provedores com boa chance de chegar à caixa de entrada, é preciso cuidar de reputação, autenticação do domínio, rejeições, endereços inválidos, pedidos de descadastro e reclamações de spam. Isso exige acompanhamento contínuo.

Por isso, mesmo quem constrói o próprio sistema normalmente usa algum serviço especializado para fazer o envio.

Com um serviço de newsletter, como o Kit
Ele guarda os inscritos, cuida dos descadastros e faz os envios.
Fazendo o sistema por conta
Você constrói e controla a lista, mas ainda usa um serviço de envio para entregar as mensagens.

Então a escolha não é exatamente entre “usar um serviço” ou “não usar nenhum”. É entre usar uma solução que já cuida de praticamente tudo, ou construir você mesmo a parte da newsletter e terceirizar apenas a entrega dos e-mails.

💡 Serve nos dois casos: se o seu site já tem um campo de inscrição, ele continua igual — só passa a guardar quem preenche. Se ainda não tem, o passo 4 cria um, no estilo do site.
1

Crie a conta

Crie uma conta no Kit. O plano gratuito já basta para tudo o que este guia faz.

Na configuração inicial, ele pede algumas informações sobre você e sobre o que pretende publicar. Não gaste muito tempo aqui — mas o nome do negócio e a bio merecem atenção, porque podem aparecer na página pública que o Kit cria para a sua newsletter.

📌 Leia o que já vier preenchido antes de seguir. No nosso teste, o nome do negócio veio com o nome completo da conta, e a bio foi montada automaticamente em inglês, a partir de uma palavra digitada — quem escrever “Engenheiro” pode acabar com algo como “I'm a engenheiro who…” publicado sem perceber. Tudo isso pode ser trocado depois, mas é mais fácil resolver agora.

💡 Você também não precisa caprichar na página que o Kit oferece para a newsletter: quem vai continuar sendo a cara do projeto é o seu site, e é ele que este guia mantém no centro.

⚠️ Confira os avisos no topo do painel antes de seguir. O Kit pede que você confirme o endereço de e-mail da conta e, em alguns casos, que conclua a aprovação para envios. Resolva agora: sem isso você monta tudo normalmente, mas não consegue enviar — e o erro que aparece lá na frente não diz que a causa é essa.
2

Crie o formulário no Kit — mas não capriche nele

No menu, Audience growth → Landing pages & forms.

A tela oferece dois caminhos, e a diferença está na descrição de cada um:

Dois blocos. Landing pages: a melhor forma de compartilhar suas ideias com o mundo, com botão Create a landing page. Forms: incorpore um formulário em qualquer lugar do seu site ou página que você mesmo hospeda, com botão Create a form.
Escolha Create a form. A landing page criaria uma página nova dentro do serviço — você já tem a sua.

Depois ele pergunta o formato. Escolha Inline, o primeiro:

Quatro miniaturas ilustrando formatos de formulário: Inline, no meio do conteúdo; Modal, sobreposto ao centro; Slide in, no canto inferior; e Sticky bar, fixa no topo.
Os outros três interrompem quem está lendo. O Inline é o que fica dentro da página — e, no nosso caso, nem vai aparecer.

Por fim, ele pede para escolher um modelo visual. E aqui vem a parte que economiza seu tempo:

🎨 Escolha qualquer um e siga em frente. O visual do formulário do Kit nunca vai ser visto por ninguém — quem aparece no seu site é o campo de inscrição que você já tem, com as suas cores e os seus textos. O que a gente precisa daqui é só um número.
💡 Então por que criar um formulário no Kit, se não vou usá-lo?

Porque ele é o ponto de entrada desses inscritos dentro do Kit: quem preencher o campo no seu site entra na sua conta associado a esse formulário. É isso que depois permite saber por onde cada pessoa chegou.

O que a maioria dos tutoriais manda fazer é colar o formulário do serviço na sua página. Funciona — mas troca o seu campo de inscrição pelo deles: outro visual, textos em inglês, a marca deles embaixo, e um arquivo pesado carregando junto.

O caminho deste guia é outro: manter o seu campo de inscrição e só mudar para onde ele manda os dados. Por isso o desenho do formulário do Kit é irrelevante.

3

Pegue o número do formulário

Com o formulário aberto no Kit, olhe a barra de endereço do navegador. O número está ali, no meio do endereço.

Barra de endereço do navegador mostrando app.kit.com/forms/designers/9776342/edit, com o número 9776342 destacado por um retângulo laranja.
É o número entre /designers/ e /edit. Anote — no exemplo é 9776342, no seu vai ser outro.
✅ Você deve ter: só o número, sem barras e sem letras. É ele que vai dizer ao seu site onde cadastrar as pessoas.
4

Ligue o seu site à lista

Aqui o trabalho é da IA. Com o número em mãos, cole o pedido abaixo no Claude Code.

📌 Vale saber o que estamos usando. O endereço abaixo é o mesmo que o formulário do Kit usa por baixo dos panos. Isso mantém o seu site simples — nenhuma senha ou chave guardada nele — mas não é uma porta oficial do Kit. Funciona bem, e é por isso que o passo 6 termina pedindo um teste de tempos em tempos.
Prompt · ligar o site à lista
Quero que o campo de inscrição do meu site cadastre as pessoas no Kit, no endereço https://app.kit.com/forms/SEU-NUMERO/subscriptions, com o campo de e-mail chamado email_address. Se a página já tiver um campo de inscrição, mantém o visual e os textos exatamente como estão. Se ainda não tiver, cria um simples, seguindo o estilo do site. A pessoa deve continuar na mesma página depois de enviar, e ver ali mesmo uma mensagem dizendo que precisa confirmar a inscrição pelo e-mail — sem ser levada pra fora do site. ⚠️ Esse endereço responde com um redirecionamento, então trate isso no envio. Depois envia pro GitHub.
💡 O que a IA vai fazer, em uma frase

Se o campo já existe, a mudança é pequena: a interface continua igual, e só troca a lógica de cadastro — para onde os dados vão, e o nome do campo de e-mail, que o serviço espera que se chame email_address.

O aviso sobre o redirecionamento existe por um motivo prático: se ele não for tratado, o navegador leva a pessoa para uma página do serviço, fora do seu site.

5

Teste como quem visita

No site publicado — não no seu computador. É lá que ele precisa funcionar.

  • Abra o site numa janela anônima, e de preferência no celular também
  • Inscreva-se com um e-mail seu de verdade
🚫 Não teste com endereço inventado — nada de teste@teste.com ou de um endereço no seu domínio que não recebe. E-mail que não existe volta como rejeitado, e uma lista com rejeições prejudica a entrega das suas mensagens futuras, inclusive para quem existe. Use uma caixa que você abre.
✅ Você deve ver: a mensagem de confirmação aparecendo na própria página, sem sair do site. E, em seguida, um e-mail pedindo para confirmar a inscrição.
⚠️ Se não aparecer, confira o spam e a aba de promoções. Aqui estamos testando o cadastro; o que faz o e-mail chegar bem na caixa de entrada — o endereço de envio no seu domínio — é assunto do guia da newsletter.
6

Confirme no Kit que o cadastro chegou

A mensagem bonita na tela não prova que alguém foi cadastrado. Quem prova é a lista.

No painel do serviço, abra Subscribers. Seu e-mail de teste deve estar lá.

⏱️ Espere alguns segundos antes de concluir que falhou. O cadastro não aparece instantaneamente — leva um tempinho para ser processado. Conferir no mesmo instante do envio faz parecer que não funcionou, e é o erro mais fácil de cometer aqui. Atualize a página depois de meio minuto.
✅ Você deve ver: o e-mail na lista, provavelmente com o estado inativo (ou unconfirmed). Isso não é erro — é o serviço esperando você clicar no link do e-mail de confirmação. Clique, e ele vira ativo.
🎉 Pronto. A partir de agora, cada pessoa que se inscrever fica guardada numa lista sua — com o visual do seu site intacto e sem nada de fora carregando na página. Quando você tiver algo a contar, é para essa lista que vai.
📌 Repita esse teste de vez em quando — a cada mês ou dois. O endereço que o seu site usa é o mesmo que o formulário do Kit usa por baixo, e é ele que permite manter o seu visual. Mas não é uma porta oficial: se um dia mudar, o cadastro para de chegar sem nenhum aviso. Um teste de um minuto é o que separa saber de supor.

🎯 O que este guia ensina além da lista

Repare que duas vezes aqui a tela pode dizer "pronto" sem estar:

  1. A mensagem de sucesso prova apenas que o site conseguiu enviar o pedido de inscrição. Ela não prova que o endereço existe, que o e-mail de confirmação foi entregue, nem que a pessoa confirmou.
  2. A lista aparece vazia por alguns segundos depois de um cadastro que deu certo, porque o serviço leva um tempo para processar.

Nos dois casos, quem confiasse no que está na tela chegaria à conclusão errada — no primeiro achando que funcionou, no segundo achando que quebrou.

📌 Por isso todo passo daqui termina com um "você deve ver" apontando para um lugar diferente de onde você acabou de clicar. É um hábito que vale para tudo o que você publicar, com IA ou sem: depois de pronto, confira em outro lugar — no ar, em janela anônima, no celular, na lista. É o que separa "eu pedi" de "está funcionando".

← Projeto IA

Projeto IA · da família