# Como adicionar um campo honeypot que bots preenchem e pessoas não
> Adicione a qualquer formulário um honeypot que pega bots sem atrapalhar leitores de tela, teclados ou preenchimento automático, com a verificação no servidor para cada stack.
Publicado em 2026-10-25 · https://ikiform.com/pt-br/guides/spam-protection/honeypot
Adicione um campo de texto extra que você esconde fora da tela, tira da ordem de tabulação e envolve em `aria-hidden`, com um nome que nenhum navegador preenche automaticamente. Pessoas nunca o preenchem; bots que preenchem todos os campos, sim. No servidor, trate qualquer envio com valor nele como spam e responda exatamente como faria com uma mensagem real.
## O que um honeypot tem de diferente
Um honeypot precisa ser duas coisas ao mesmo tempo. Para um bot lendo o HTML, deve parecer um campo normal que vale a pena preencher. Para toda pessoa, não pode existir, e isso inclui quem não usa o formulário do mesmo jeito que você: alguém com leitor de tela, alguém navegando pelo teclado, alguém cujo gerenciador de senhas preenche formulários por ele. A maioria dos bugs de honeypot vem de esquecer uma dessas pessoas, e o sintoma é uma mensagem real arquivada como spam sem alarde.
Diagrama: Como uma pessoa e um bot encontram o mesmo campo honeypot
1. Uma pessoa preenche o formulário com o que costuma usar: tela, teclado ou leitor de tela.
2. A armadilha está fora da tela, fora da ordem de tabulação e oculta das tecnologias assistivas, então ela nunca chega até lá.
3. O nome dela é um que navegadores e gerenciadores de senha não preenchem, então ela fica vazia.
4. O envio chega com a armadilha vazia e é recebido.
5. Um bot de script lê o HTML e encontra todos os campos, inclusive a armadilha.
6. Ele preenche todos e envia na hora.
7. A armadilha tem valor, então o envio é spam. O bot ainda recebe uma resposta de sucesso normal.
Cada proteção da linha de cima fecha um caminho pelo qual uma pessoa real chegaria ao campo. Tire qualquer uma e a linha de cima também pode terminar em spam.
## O markup
Coloque a armadilha dentro do formulário, ao lado dos campos reais, como um campo de texto comum. Um campo `type="hidden"` não funciona: os bots sabem que pessoas não podem editá-lo e o deixam em paz.
`contact.html`:
```html
```
`estilos`:
```html
```
- `aria-hidden="true"` no contêiner remove o rótulo e o campo da árvore de acessibilidade, então leitores de tela não os anunciam.
- `tabindex="-1"` impede que a tecla Tab pare num campo que ninguém vê.
- O rótulo diz **Leave this empty** (deixe vazio). Se alguma ferramenta ainda expuser o campo, quem o ler sabe o que fazer.
- Não adicione `required`. Um campo obrigatório que as pessoas não veem bloqueia todo envio honesto.
## Como escondê-lo
Os bots aprenderam a pular campos obviamente ocultos. Scrapers simples ainda preenchem tudo, mas alguns conferem o atributo `hidden` ou um `display: none` inline antes de digitar. Quanto mais longe do próprio campo estiver o que o esconde, mais bots caem.
| Técnica | Oculto para pessoas | Bots que ainda pega |
| --- | --- | --- |
| Atributo `hidden` ou `display: none` inline | Sim | Só os mais simples. É a primeira coisa que um bot mais esperto confere |
| Classe fora da tela na sua folha de estilo | Sim | A maioria. O bot precisa carregar e aplicar seu CSS para perceber |
| `opacity: 0` ou tamanho zero | Quase sempre. Algumas lupas e contornos de foco ainda o revelam | A maioria, mas é mais arriscado para pessoas |
| Adicionado por JavaScript após o carregamento | Sim | Bots que rodam scripts. Scrapers de HTML simples nunca o veem, então ele os deixa passar |
Use a classe fora da tela da sua folha de estilo. Ela pega mais bots e é a mais segura para pessoas. Se um honeypot parar de funcionar, adicione um segundo com outro nome em vez de um truque de esconder mais esperto.
## Escolha um nome que o preenchimento automático ignore
Navegadores e gerenciadores de senha preenchem campos adivinhando pelo `name`, `id`, rótulo e valor de `autocomplete`. `autocomplete="off"` é só uma dica, e alguns navegadores a ignoram em campos que parecem endereços ou dados de contato. Então quem faz o trabalho de verdade é o nome.
| Evite | Por quê | Use no lugar |
| --- | --- | --- |
| `email2`, `phone`, `name`, `address` | O preenchimento automático os reconhece e os preenche para pessoas reais | `_gotcha`, `company_website` |
| `honeypot`, `trap`, `bot` | Alguns bots pulam campos com nomes óbvios | Um nome sem graça e plausível |
| `url`, `website` sozinhos | Algumas ferramentas de preenchimento automático preenchem um campo de site a partir de um perfil salvo | Um nome composto como `company_website` |
## Confira no servidor
Um honeypot só funciona se o servidor o ler. Uma verificação no navegador é inútil, já que um bot nunca roda seu script. Quando o campo tiver valor, responda exatamente como faria com uma mensagem real e não guarde nem repasse o envio. Uma resposta diferente diz ao bot qual campo o denunciou. Os exemplos abaixo chamam a sua própria `saveMessage`; troque pelo que guarda ou envia a mensagem por e-mail.
**HTML**
Um formulário HTML simples não tem servidor próprio. Aponte-o para o Ikiform e chame a armadilha de `_gotcha`, ou renomeie por formulário em **Honeypot field**. O Ikiform faz a verificação no servidor, e a armadilha nunca é guardada como resposta.
`contact.html`:
```html
```
**Next.js**
Numa server action, redirecione um envio pego na armadilha para a mesma página de agradecimento que um real recebe, e pule o salvamento.
`app/contact/actions.ts`:
```ts
"use server";
import { redirect } from "next/navigation";
export async function sendMessage(formData: FormData) {
if (String(formData.get("company_website") ?? "").trim() !== "") {
console.info("honeypot", { at: new Date().toISOString() });
redirect("/contact/thanks");
}
await saveMessage({
email: String(formData.get("email") ?? ""),
message: String(formData.get("message") ?? ""),
});
redirect("/contact/thanks");
}
```
**Astro**
Numa Astro Action, tire a armadilha do input e retorne o resultado normal quando ela tiver valor.
`src/actions/index.ts`:
```ts
import { defineAction } from "astro:actions";
import { z } from "astro/zod";
export const server = {
sendMessage: defineAction({
accept: "form",
input: z.object({
email: z.email(),
message: z.string().min(1),
company_website: z.string().nullish(),
}),
handler: async ({ company_website, ...fields }) => {
if (company_website?.trim()) return { sent: true };
await saveMessage(fields);
return { sent: true };
},
}),
};
```
**TanStack Start**
Leia a armadilha em `.validator()` e pule o salvamento no handler. Os dois caminhos retornam a mesma resposta.
`src/server/send-message.ts`:
```ts
import { createServerFn } from "@tanstack/react-start";
export const sendMessage = createServerFn({ method: "POST" })
.validator((data: unknown) => {
if (!(data instanceof FormData)) throw new Error("Expected form data");
return {
email: String(data.get("email") ?? ""),
message: String(data.get("message") ?? ""),
trapped: String(data.get("company_website") ?? "").trim() !== "",
};
})
.handler(async ({ data: { trapped, ...fields } }) => {
if (!trapped) await saveMessage(fields);
return { ok: true };
});
```
**React Router**
A action da rota redireciona para a página de agradecimento nos dois casos e só salva um envio que não caiu na armadilha.
`app/routes/contact.tsx`:
```ts
import { redirect } from "react-router";
import type { Route } from "./+types/contact";
export async function action({ request }: Route.ActionArgs) {
const form = await request.formData();
if (String(form.get("company_website") ?? "").trim()) return redirect("/contact/thanks");
await saveMessage({ email: String(form.get("email")), message: String(form.get("message")) });
return redirect("/contact/thanks");
}
```
**SvelteKit**
A form action só salva quando a armadilha está vazia e depois redireciona com `303` nos dois casos.
`src/routes/contact/+page.server.ts`:
```ts
import { redirect } from "@sveltejs/kit";
import type { Actions } from "./$types";
export const actions = {
default: async ({ request }) => {
const form = await request.formData();
if (!String(form.get("company_website") ?? "").trim()) {
await saveMessage({ email: String(form.get("email")), message: String(form.get("message")) });
}
redirect(303, "/contact/thanks");
},
} satisfies Actions;
```
**Nuxt**
A server route responde `201` com o mesmo corpo para um envio pego na armadilha e para um real.
`server/api/contact.post.ts`:
```ts
export default defineEventHandler(async (event) => {
const body = await readBody<{ email?: string; message?: string; company_website?: string }>(event);
if (body.company_website?.trim()) {
setResponseStatus(event, 201);
return { sent: true };
}
await saveMessage({ email: body.email ?? "", message: body.message ?? "" });
setResponseStatus(event, 201);
return { sent: true };
});
```
**React**
Um app de página única não consegue conferir a armadilha sozinho. Envie-a com os outros campos e deixe o servidor para onde você envia decidir. `FormData` a inclui sem código extra.
`submit.ts`:
```ts
const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
```
**Vue**
Igual no Vue: mantenha a armadilha dentro do `