PASSO A PASSO · ARQUITETURA MODERNA DE FORMULÁRIOS

Como criar formulário de contato sem servidor SMTP — Guia completo | Lugatu

Aprenda a coletar mensagens de clientes com total segurança sem configurar senhas de SMTP, sem lidar com servidores de e-mail e sem dores de cabeça com entregabilidade.

Obter endpoint gratuito → Ver exemplo com React

1. Por que formulários SMTP tradicionais falham tanto

Portas SMTP como 25 e 587 costumam ser bloqueadas em plataformas serverless e Jamstack. Além disso, senhas expiradas causam perda silenciosa de clientes.

warning

Nunca deixe credenciais SMTP salvas no código ou no Git. Utilize endpoints seguros de ingestão HTTPS.

2. Passo 1: Formulário HTML com proteção honeypot

Construa seu formulário em HTML semântico e insira um campo honeypot oculto que visitantes humanos ignoram, mas robôs preenchem automaticamente.

contact-form.html html

<!-- Vanilla HTML Form with Lugatu Form Endpoint -->
<form id="inquiry-form">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Work Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Project Details</label>
  <textarea id="message" name="message" rows="4" required></textarea>

  <!-- Built-in Honeypot Bot Trap -->
  <input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />

  <button type="submit">Send Inquiry</button>
</form>

<script>
document.getElementById('inquiry-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const form = e.target;
  const data = new FormData(form);

  const payload = {
    fields: {
      name: data.get('name'),
      email: data.get('email'),
      message: data.get('message')
    },
    honeypot: data.get('_gotcha') || ''
  };

  const res = await fetch('https://www.lugatu.com/api/v1/public/forms/YOUR_PUBLIC_FORM_ID/submissions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
    body: JSON.stringify(payload)
  });

  if (res.ok) {
    alert('Inquiry sent successfully!');
    form.reset();
  }
});
</script>

3. Passo 2: Envio seguro com a Fetch API

Intercepte o envio com JavaScript e transmita os dados em JSON para a API da Lugatu, obtendo resposta imediata para o visitante.

4. Modos de notificação flexíveis e preservação durável

Mesmo que as cotas de e-mail de saída sejam atingidas, todos os envios permanecerão preservados na caixa de entrada do seu espaço de trabalho. Você pode escolher alertas instantâneos, resumos diários ou resumos executivos semanais por formulário.

Invariante de segurança e autenticação

Regra antispam: Sempre adicione campos honeypot em endpoints públicos. Chaves de API secretas nunca devem ficar expostas no código do navegador.

Solução de problemas e erros comuns de ingestão

Erro de CORS no envio pelo navegador

A Lugatu aceita requisições JSON de qualquer origem em /api/v1/public/forms/.... Verifique se a URL está correta.

Perguntas frequentes

Funciona no GitHub Pages, Vercel ou Netlify?

Sim, com certeza. A Lugatu processa toda a lógica no backend, funcionando de forma idêntica em qualquer hospedagem estática.

Pronto para criar o endpoint do seu formulário?

Comece gratuitamente em segundos. Não é necessário cartão de crédito.

Comece grátis →