PASSO A PASSO · ARQUITETURA MODERNA

Criar formulário de contacto sem servidor SMTP — Guia completo | Lugatu

Aprenda a recolher mensagens de clientes com total segurança sem configurar palavras-passe de SMTP, sem gerir servidores de correio e sem falhas de entrega.

Obter endpoint gratuito → Ver exemplo em React

1. Os problemas dos formulários SMTP clássicos

Portas de SMTP como a 25 e a 587 são habitualmente bloqueadas em ambientes serverless e Jamstack. Adicionalmente, credenciais expiradas causam perdas inadvertidas de clientes.

warning

Nunca guarde credenciais de SMTP em repositórios Git ou no código do cliente. Utilize endpoints de ingestão HTTPS seguros.

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

Desenvolva o seu formulário com HTML semântico e adicione um campo honeypot oculto que os visitantes humanos ignoram, mas os bots preenchem.

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 através da Fetch API

Intercete o evento de submissão com JavaScript e envie os dados em JSON para a API da Lugatu, obtendo feedback imediato.

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: Adicione sempre campos honeypot a endpoints públicos. As chaves de API secretas nunca devem constar no código fonte do cliente.

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

Erro de CORS no envio pelo navegador

A Lugatu aceita pedidos JSON de qualquer origem em /api/v1/public/forms/.... Verifique se o URL está rigorosamente correto.

Perguntas frequentes

Funciona no GitHub Pages, Netlify ou Vercel?

Sim, perfeitamente. Como a Lugatu assume o processamento backend, o formulário funciona de forma idêntica em qualquer alojamento estático.

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 →