STATISCHE WEBSITES · SSG & HYBRID READY

Astro Kontaktformulare für Statische Websites | Lugatu

Integrieren Sie Formulare nahtlos in Astro SSG-Projekte ohne eigene Server. Perfekt geeignet für Cloudflare Pages, Vercel, Netlify und GitHub Pages.

Astro-Formular bauen → API-Route ansehen

1. Statische Seiten brauchen dynamische Formular-Erfassung

Astro generiert ultraschnellen statischen HTML-Code. Mit Lugatu als Serverless-Backend bleibt Ihre Website 100 % statisch, während Einsendungen dynamisch und sicher verarbeitet werden.

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: Rein statische Astro-Komponente

Fügen Sie ein HTML-Formular direkt in Ihre .astro-Datei ein und senden Sie Einsendungen per Fetch an den öffentlichen Lugatu-Endpunkt.

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

Sicherheits- und Authentifizierungsinvariante

Umgebungssicherheit in Astro: Drucken Sie LUGATU_API_KEY niemals in clientseitigen Script-Tags ab. Nutzen Sie Astros import.meta.env nur serverseitig.

Fehlerbehebung und häufige Aufnahmefehler

Statische Bereitstellung liest Umgebungsvariablen nicht

Im reinen SSG-Modus müssen Client-Scripts den öffentlichen Endpunkt verwenden, da zur Laufzeit kein Node.js-Server aktiv ist.

Häufig gestellte Fragen

Kann ich meine Astro-Seite völlig kostenlos hosten?

Ja. Statische Astro-Seiten laufen kostenlos auf Cloudflare Pages oder Netlify, und Formulare werden durch Lugatu zuverlässig erfasst.

Sind Sie bereit, Ihren Formularendpunkt zu erstellen?

Starten Sie in Sekundenschnelle kostenlos. Keine Kreditkarte erforderlich.

Kostenlos starten →