SITIOS ESTÁTICOS · SSG & HÍBRIDO

Formularios de contacto para sitios estáticos en Astro | Lugatu

Añada formularios a sus proyectos Astro SSG sin necesidad de configurar servidores backend. Excelente para Cloudflare Pages, Vercel, Netlify y GitHub Pages.

Crear formulario en Astro → Ver ruta de API

1. Los sitios estáticos precisan recepción dinámica

Astro genera código HTML estático sumamente veloz. Con Lugatu como backend serverless, su web se mantiene estática mientras las consultas se gestionan con total seguridad.

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. Opción A: Componente de Astro puramente estático

Añada un formulario HTML en su archivo .astro y envíe las consultas mediante la API Fetch al extremo público de Lugatu.

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 seguridad y autenticación

Seguridad en Astro: Jamás exponga LUGATU_API_KEY en etiquetas de script del cliente. Limite su uso a extremos de servidor mediante import.meta.env.

Solución de problemas y errores comunes de ingesta

Las variables de entorno no cargan en modo SSG

En modo SSG puro, los scripts del cliente deben invocar el extremo público, ya que no existe un entorno Node.js en ejecución en producción.

Preguntas frecuentes

¿Puedo alojar mi web Astro gratis?

Sí. Los sitios estáticos en Astro se alojan sin coste en Cloudflare Pages o Netlify, y Lugatu recibe y protege sus formularios.

¿Listo para crear el punto final de su formulario?

Comience gratis en segundos. No se requiere tarjeta de crédito.

Comience gratis →