SITES ESTÁTICOS · SSG & HÍBRIDO

Formulários de contato no Astro para sites estáticos | Lugatu

Integre formulários facilmente aos seus projetos Astro SSG sem manter servidores dedicados. Perfeito para Cloudflare Pages, Vercel, Netlify e GitHub Pages.

Criar formulário no Astro → Ver rota de API

1. Sites estáticos precisam de recepção dinâmica

O Astro compila HTML estático extremamente rápido. Com a Lugatu no backend, seu site continua estático enquanto suas mensagens são processadas com segurança.

src/pages/contact.astro astro

---
// src/pages/contact.astro
---
<form id="astro-contact-form" class="space-y-4 max-w-md">
  <div>
    <label class="block text-sm font-semibold mb-1">Your Name</label>
    <input type="text" name="name" required class="w-full border rounded-xl p-2.5" />
  </div>
  <div>
    <label class="block text-sm font-semibold mb-1">Email Address</label>
    <input type="email" name="email" required class="w-full border rounded-xl p-2.5" />
  </div>
  <div>
    <label class="block text-sm font-semibold mb-1">Message</label>
    <textarea name="message" rows="4" required class="w-full border rounded-xl p-2.5"></textarea>
  </div>

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

  <button type="submit" class="btn-primary-editorial py-2.5 px-6">Send Message</button>
</form>

<script>
  const form = document.getElementById('astro-contact-form') as HTMLFormElement;
  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);

    const payload = {
      fields: {
        name: formData.get('name'),
        email: formData.get('email'),
        message: formData.get('message'),
      },
      honeypot: formData.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('Thank you! Message delivered.');
      form.reset();
    }
  });
</script>

2. Opção A: Componente estático puro no Astro

Insira um formulário HTML no seu arquivo .astro e envie as respostas com Fetch API diretamente para o endpoint público.

src/pages/api/contact.ts typescript

import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => {
  const data = await request.formData();
  const fields = {
    name: data.get('name')?.toString(),
    email: data.get('email')?.toString(),
    message: data.get('message')?.toString(),
  };

  const res = await fetch(`https://www.lugatu.com/api/v1/forms/${import.meta.env.LUGATU_FORM_ID}/submissions`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${import.meta.env.LUGATU_API_KEY}`,
      'Content-Type': 'application/json',
      'Idempotency-Key': crypto.randomUUID(),
    },
    body: JSON.stringify({ fields }),
  });

  return new Response(JSON.stringify({ success: res.ok }), {
    status: res.status,
    headers: { 'Content-Type': 'application/json' },
  });
};

Invariante de segurança e autenticação

Segurança de variáveis no Astro: Nunca exponha LUGATU_API_KEY em tags de script no navegador. Utilize import.meta.env apenas no servidor.

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

Variáveis de ambiente não funcionam no modo SSG

No modo SSG estático, os scripts do cliente devem chamar o endpoint público, pois não há servidor Node.js em execução.

Perguntas frequentes

Consigo hospedar meu site no Astro de graça?

Sim. Sites estáticos no Astro rodam sem custos no Cloudflare Pages ou Netlify, e a Lugatu recebe seus formulários com confiabilidade.

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 →