SITES STATIQUES · SSG & HYBRIDE

Formulaires de contact Astro pour sites statiques | Lugatu

Intégrez facilement des formulaires dans vos projets Astro SSG sans déployer de serveur backend. Idéal pour Cloudflare Pages, Vercel, Netlify et GitHub Pages.

Créer un formulaire Astro → Voir la route API

1. Les sites statiques ont besoin d’ingestion dynamique

Astro génère un balisage HTML statique d’une rapidité incomparable. Avec Lugatu en backend sans serveur, votre site reste statique tandis que vos messages sont traités en toute sécurité.

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. Option A : Composant Astro statique pur

Insérez un formulaire HTML dans votre fichier .astro et transmettez les champs via l’API Fetch directement au point de terminaison public.

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' },
  });
};

Invariant de sécurité et d'authentification

Sécurité des variables dans Astro : n’exposez jamais LUGATU_API_KEY dans des balises de script côté client. Limitez son usage aux points d’API serveur.

Dépannage et erreurs d’ingestion courantes

Les variables d’environnement ne sont pas lues en SSG

En mode SSG pur, les scripts clients doivent cibler le point de terminaison public Lugatu car aucun runtime Node.js n’est actif en production.

Foire aux questions

Puis-je héberger mon site Astro gratuitement ?

Oui. Les sites Astro statiques sont hébergés sans frais sur Cloudflare Pages ou Netlify, et Lugatu assure la réception de vos formulaires.

Prêt à créer votre point de terminaison de formulaire ?

Commencez gratuitement en quelques secondes. Aucune carte de crédit requise.

Commencez gratuitement →