Como adicionar um formulário de contacto ao seu site (que chega mesmo até si)

Para criar um formulário de contacto que funciona, construa um formulário curto (nome, email, mensagem) e envie-o para uma rota no servidor que valida os dados, guarda a mensagem numa base de dados e depois lhe envia uma notificação por email através de um fornecedor de email, usando uma chave de API secreta. Acrescente um campo de armadilha oculto (honeypot) e limitação de pedidos para travar a maioria do spam, mostre uma mensagem de sucesso clara e teste de ponta a ponta no site publicado. Guardar antes de enviar o email é a parte importante: se o email falhar, continua a ter o pedido.

As suas opções

Opção	Como funciona	Ideal para	Compromissos
Ligação mailto	"Envie-nos um email" abre a aplicação de email do visitante	Sites pessoais	Falha em muitos dispositivos; expõe o seu endereço a robôs
Serviço de formulários alojado	O formulário envia para um serviço de terceiros que lhe envia o email	Sites estáticos sem backend	Outra conta; limites e marca nos planos gratuitos
Ferramenta de formulários incorporada	Um widget de um construtor de formulários dentro da sua página	Inquéritos complexos, configuração rápida	Não corresponde ao seu design; os dados ficam noutro lado
O seu próprio formulário + base de dados + email	O seu servidor guarda e notifica	A maioria das apps e sites de empresas	Tem de configurar um fornecedor de email

Se o seu site já tem um backend e uma base de dados — o que as apps criadas com construtores de IA costumam ter —, a última opção é a mais fiável e mantém os pedidos num sítio onde os pode ver.

O que um bom formulário de contacto inclui

O mínimo de campos possível. Nome, email, mensagem. Acrescente uma lista de assuntos ("Vendas", "Suporte", "Outro") só se for encaminhar por eles.
Rótulos claros acima de cada campo, e não apenas um texto de exemplo que desaparece.
Validação útil: "Introduza um endereço de email válido", mostrado junto ao campo.
Um estado de sucesso que diga o que acontece a seguir: "Obrigado, respondemos num dia útil."
Uma nota de privacidade a dizer como vai usar os dados, com ligação à sua política de privacidade.
Uma alternativa, como o seu email ou número de telefone, para quem preferir.

Exemplos de prompts

O formulário básico:

Adicione um formulário de contacto na página Contacto com nome, email e mensagem (todos obrigatórios; a mensagem até 2000 caracteres). Envie-o para uma rota no servidor que valida os dados, guarda-os numa tabela contact_messages com a hora de receção e mostra a mensagem de sucesso: "Obrigado, respondemos num dia útil." Mostre os erros de cada campo em linha. Garanta que funciona bem nos telemóveis.

Notificações por email:

Quando uma mensagem de contacto for guardada, envie-me uma notificação para hello@example.com através do Resend, com a chave em RESEND_API_KEY. Defina o reply-to como o email do remetente, para que eu possa responder diretamente. Se o envio falhar, mantenha a mensagem guardada e registe o erro sem expor a chave.

Proteção contra spam:

Acrescente proteção contra spam ao formulário de contacto: um campo oculto que tem de ficar vazio, um limite de 5 submissões por IP por hora no servidor, e rejeite mensagens com mais de 3 ligações. Descarte em silêncio as submissões do campo oculto, mas mostre na mesma a mensagem de sucesso.

Uma caixa de entrada:

Adicione uma página de administração protegida por palavra-passe que liste as mensagens de contacto da mais recente para a mais antiga, com uma caixa de seleção "tratada" e um filtro para as mensagens não tratadas.

Passo a passo

Decida para onde vão as mensagens: quem recebe as notificações e quem responde.
Construa o formulário com os campos acima, rótulos acessíveis e campos adequados aos telemóveis (use o tipo de campo email, para que os telemóveis mostrem o teclado certo).
Crie a rota no servidor. Ela verifica os campos obrigatórios, o formato do email e os limites de tamanho. Nunca confie apenas na validação do browser.
Guarde primeiro na base de dados. Veja como adicionar uma base de dados à sua app.
Configure um fornecedor de email. Crie uma conta, verifique o seu domínio de envio e guarde a chave de API como segredo. Como enviar emails a partir da sua app explica a configuração do domínio (SPF, DKIM) em detalhe.
Envie a notificação a partir do servidor, depois de guardar. Use o seu domínio verificado como remetente e o email do visitante como reply-to — não envie "de" o email do visitante, porque será provavelmente rejeitado como falsificação.
Opcionalmente, envie uma resposta automática ao visitante, mas curta; respostas automáticas para endereços de spam podem prejudicar a reputação do seu envio.
Acrescente proteção contra spam: campo honeypot, limitação de pedidos e, se for necessário, uma verificação do tipo CAPTCHA.
Teste no site publicado: envie uma mensagem, verifique a base de dados, verifique a caixa de entrada e a pasta de spam, e clique em responder.

Como travar o spam

Os formulários de contacto atraem robôs poucos dias depois de ficarem online. Acrescente defesas camada a camada, da menos para a mais intrusiva:

Campo honeypot. Um campo escondido das pessoas; os robôs preenchem-no. Não custa nada aos visitantes reais.
Limitação de pedidos no servidor. Limita quantas mensagens um endereço pode enviar num dado período.
Regras de conteúdo. Rejeite mensagens cheias de ligações, ou com um campo de mensagem vazio ou absurdamente longo.
Uma verificação do tipo CAPTCHA, como o Cloudflare Turnstile ou o Google reCAPTCHA. O token tem de ser validado no seu servidor; uma verificação que só corre no browser pode ser contornada.

Erros comuns

Mostrar "Enviado!" quando nada foi enviado. A interface diz que correu bem antes de ou independentemente da resposta do servidor. Espere sempre pela resposta do servidor.
Só email, sem base de dados. Uma chave mal configurada e os pedidos desaparecem durante semanas sem que ninguém repare.
Chave de API no código do frontend. Qualquer pessoa a pode usar para enviar emails em seu nome.
Domínio de envio não verificado. As notificações caem no spam ou nunca chegam.
Enviar "de" o email do visitante. Use o reply-to.
Sem limites de tamanho. Os robôs colam blocos enormes de texto.
Nunca testar o site ao vivo. As chaves e os domínios costumam ser diferentes entre a pré-visualização e a produção.

Lista de verificação

Formulário curto, com rótulos visíveis e erros claros
Validação no servidor e limites de tamanho
Cada mensagem guardada na base de dados
Notificação enviada a partir de um domínio verificado, com reply-to definido
Chave de API do email guardada apenas como segredo do servidor
Campo honeypot e limitação de pedidos ativos
Mensagem de sucesso só aparece depois de o servidor confirmar
A nota de privacidade tem ligação à sua política de privacidade
Testado de ponta a ponta no site publicado, incluindo a pasta de spam

Formulários de contacto na Mythex

Na Mythex, pode construir tudo a partir do chat. Peça o formulário e uma base de dados no mesmo prompt (ou escreva /database), para que as submissões fiquem guardadas. A Mythex não tem um produto de envio de email integrado; por isso, para as notificações, use um fornecedor como o Resend, o SendGrid ou o Postmark, acrescente a chave com /secrets ou nas definições do projeto, e peça ao agente que envie a partir do servidor — veja Enviar email a partir da sua app. Antes de confiar nele, execute o App Testing (/test) sobre o formulário na Pré-visualização, depois publique e teste no URL ao vivo.

Um formulário de contacto é peça-chave da maioria dos sites para pequenas empresas e das páginas de destino. Confirme a lista de segurança antes do lançamento.

Perguntas

Como faço para que um formulário de contacto me envie um email?

O formulário envia os dados para uma rota no servidor, que guarda a mensagem e depois envia uma notificação através de um fornecedor de email, como o Resend, o SendGrid ou o Postmark, usando uma chave de API guardada como segredo do servidor. Um browser sozinho não consegue enviar emails de forma fiável.

Porque não estou a receber os emails do formulário de contacto?

As causas habituais são uma chave de API em falta ou errada, um domínio de envio não verificado, notificações que caem na caixa de spam, ou o formulário mostrar sucesso sem que a chamada ao servidor funcione. Guardar primeiro cada submissão numa base de dados significa que nunca perde uma mensagem enquanto corrige o email.

Como trave o spam no formulário de contacto?

Comece por um campo oculto de armadilha (honeypot) e pela limitação de pedidos no servidor. Se o spam continuar, acrescente uma verificação do tipo CAPTCHA, como o Cloudflare Turnstile ou o Google reCAPTCHA, validada no servidor.

Devo usar uma ligação mailto em vez de um formulário?

Uma ligação mailto é simples, mas abre a aplicação de email do visitante, o que falha para muitas pessoas em computadores partilhados ou de trabalho, e expõe o seu endereço a robôs de spam. Um formulário é mais fiável para os visitantes e permite-lhe controlar os campos que recebe.