Como montar uma página de captura que guarda o e-mail

Assunto: Página de captura

Por Alan Victor · publicado em 29 de outubro de 2026 · atualizado em 02 de novembro de 2026 · 7 min de leitura

1. 1Declarar o campo como campo de e-mail
2. 2Montar o elemento Form, que é outra coisa
3. 3Decidir o que acontece depois do envio
4. 4Criar o campo personalizado no painel, não na página
5. 5Dar ao botão uma área de clique que dê para acertar

No fim deste guia você tem uma página de captura publicada na Systeme.io, com o campo de e-mail declarado do jeito que faz o contato entrar na sua lista, o pós-envio definido e um botão que dá para acertar no celular. Eu monto as minhas assim, e é a ferramenta que eu uso porque página, lista, e-mail e automação ficam no mesmo painel.

Etapa 1: Declarar o campo como campo de e-mail

Resposta direta: arraste o elemento "Form input" da barra lateral para a página, clique no campo e escolha Email no menu "Input type" — é essa escolha que faz o contato entrar na sua lista quando o formulário é enviado.

Esse é o passo descrito na central de ajuda da Systeme.io, e é onde a primeira página de captura costuma falhar. O campo existe, a pessoa digita, o formulário envia, e nada chega na lista porque o tipo ficou no padrão.

O mesmo menu traz ajustes de aparência: tipografia, cores, bordas, alinhamento, cor do placeholder. Nada disso muda o tipo do campo, que é a configuração que liga o campo à lista. Escolha o tipo antes de perder tempo com o visual.

Etapa 2: Montar o elemento Form, que é outra coisa

Resposta direta: "Form input" é o campo isolado; "Form" é o container único que agrupa os campos, as caixas de seleção e o botão de envio, e é nele que ficam as abas Elements, Design e Actions.

A central de ajuda da Systeme.io separa os dois elementos. Segundo o texto, é essa separação que permite montar vários formulários independentes na mesma página.

Na aba Elements você remove campos padrão como nome e telefone, edita o placeholder, marca um campo como opcional, adiciona ícone e inclui campos novos ou caixas de seleção extras. Na aba Design ficam layout, espaçamento entre linhas, cor de fundo, bordas e posição.

Etapa 3: Decidir o que acontece depois do envio

Resposta direta: a aba Actions do elemento Form concentra quatro caminhos — mensagem de sucesso na mesma página, redirecionamento para uma URL, duplo opt-in e automação — e você escolhe um deles antes de publicar.

A central de ajuda da Systeme.io lista as quatro possibilidades, incluindo a de não redirecionar ninguém. Definir isso depois de publicar significa captar contato sem saber o que acontece com ele.

A automação é o pedaço em que a Systeme.io economiza ferramenta: o mesmo painel que publica a página guarda a lista e dispara o e-mail seguinte. Com várias ferramentas soltas, isso vira uma integração a mais para manter de pé.

Etapa 4: Criar o campo personalizado no painel, não na página

Resposta direta: campos personalizados são criados na página de contatos do painel da Systeme.io, não dentro do editor de página; depois de criados, aparecem sozinhos na área "Custom fields" das configurações do formulário.

É aqui que gente experiente trava. Procura o campo no editor, não encontra e conclui que o recurso não existe. O lugar é o painel de contatos.

Etapa 5: Dar ao botão uma área de clique que dê para acertar

Resposta direta: o critério 2.5.8 do WCAG 2.2 pede alvos de ponteiro de pelo menos 24 por 24 pixels CSS, e um botão menor que isso só passa se estiver espaçado o bastante para não encostar em outro alvo.

A saída por espaçamento é medida: alvos menores passam se um círculo de 24 pixels de diâmetro, centrado em cada um, não encostar no alvo vizinho. O critério é de nível AA, segundo o W3C.

A justificativa no documento é concreta. Quem tem limitação de destreza, tremor nas mãos ou dificuldade de movimento fino erra o alvo pequeno quando ele está perto de outro. O mesmo vale para quem usa dispositivo de entrada especializado, que em geral não tem a precisão de um mouse, e para tela de toque.

O documento lista cinco exceções ao tamanho mínimo: o espaçamento, o caso em que a mesma função existe em outro controle da página, alvos dentro de uma frase, alvos cujo tamanho é definido pelo navegador e não pelo autor, e apresentações exigidas por lei. Ele também deixa claro que o critério define um mínimo, não um ideal — por isso a recomendação de tamanho maior.

Qual teclado abre quando a pessoa toca no campo?

A documentação da MDN descreve o atributo global inputmode: ele dá ao navegador uma dica do tipo de dado esperado e troca o teclado virtual. Com o valor email, o teclado vem otimizado para endereço e costuma trazer o @ em destaque.

O mesmo texto avisa de uma confusão comum: inputmode não cria exigência de validação nenhuma. Quem checa formato é input type=email. A MDN registra o atributo em todos os navegadores desde dezembro de 2021.

É isto que o campo precisa entregar ao navegador:

<input id="email" name="email" type="email" inputmode="email" autocomplete="email" required>

Na Systeme.io você chega no mesmo resultado pelo menu "Input type", sem escrever a tag: o editor monta o campo e você fica com a lista no mesmo painel. É por isso que eu prefiro montar por lá em vez de juntar editor de página com ferramenta de lista.

Publiquei e o Google não acha. Por quê?

A central de ajuda da Systeme.io mostra o caminho: no editor, clique em Settings, no canto superior esquerdo, e desça até a seção de otimização para buscadores. Lá está a caixa "Hide from search engines". Marcada, a página não é indexada; desmarcada, volta a aparecer nos resultados.

Confira essa caixa antes de suspeitar de qualquer outra coisa. O tipo do campo de e-mail é conferência separada: uma coisa não depende da outra.

Dá para começar sem pagar

O plano gratuito da Systeme.io já serve para publicar essa página e começar a lista hoje. Quando a sua lista crescer e o plano gratuito ficar pequeno, o plano pago é o degrau seguinte — e nessa hora você já sabe que a página capta, porque testou sem pagar.

Se você ainda não tem conta, criar a conta gratuita pelo botão desta página é o primeiro passo do guia. Faça a Etapa 1 agora, com o texto aberto do lado: arrastar o campo e declarar o tipo Email leva menos tempo do que ler esta seção até o fim.

Cada dia sem lista é um dia de visita que vai embora sem deixar contato. A página que sai das cinco etapas acima é o que impede isso.

O que eu não vou afirmar

• Que existe uma ordem de erros, ou um erro que trava mais gente que outro. Nenhuma fonte aqui mede isso.
• Que o campo sem tipo declarado deixa a lista vazia. A documentação descreve o que acontece quando o tipo é Email, não os outros casos.
• Que reduzir o número de campos aumenta conversão, que existe taxa de conversão média de página de captura, ou que existe cor de botão que converte mais.
• Que caixa de consentimento é obrigatória por lei. As fontes não tratam de consentimento nem de LGPD.
• Que o critério 2.5.8 do WCAG é exigência legal no Brasil.
• Quanto tempo o Google leva para indexar a página depois de liberada.
• Que domínio próprio ranqueia melhor que o endereço padrão da plataforma.
• Quanto custa o plano pago da Systeme.io. Preço de plano muda, e este guia não é o lugar de arriscar um número errado.

Leve isto com você

Fontes

• Adicionar campo e elemento de formulario (Documentacao do Systeme.io (o parceiro que nos paga))
• WCAG 2.2: tamanho do alvo (2.5.8) (Documentacao oficial do padrao (RFC, Google, W3C, MDN, ANPD))
• MDN: input type=email (Documentacao oficial do padrao (RFC, Google, W3C, MDN, ANPD))
• MDN: inputmode (Documentacao oficial do padrao (RFC, Google, W3C, MDN, ANPD))
• Controlar a visibilidade nos buscadores (Documentacao do Systeme.io (o parceiro que nos paga))

Se alguma fonte estiver desatualizada quando você ler, confie nela e não em mim — eu escrevi na data acima.

Receba o resto por e-mail