INTEGRATIONSGUIDE · ASTRO & JAMSTACK

Astro Kontaktformulär Integration (Statisk & SSR)

Hur man lägger till kontaktformulär till Astro statiska webbplatser (SSG) och hybridserverrutter med hjälp av Lugatu-slutpunkter utan att underhålla e-postservrar eller databaser.

Connect Astro Project → Utforska WordPress-guiden

1. Ren statisk plats (SSG) Form förtäring

Astro är känt för noll-JavaScript som standard. Med Lugatu kan du hålla din Astro-webbplats 100 % statisk samtidigt som du samlar in förfrågningar med vanliga HTML-formulär och lätt hämtning på klientsidan.

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. Astro Hybrid / SSR API Route med Server API Key

Om din Astro-webbplats körs i hybrid- eller SSR-läge på Cloudflare Pages, Netlify eller Vercel, vidarebefordra bidrag säkert via en Astro API-rutt.

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

Säkerhet och autentisering Invariant

Säkerhetsinstruktion: Exponera aldrig import.meta.env.LUGATU_API_KEY i Astro-skripttaggar på klientsidan. Klientskript får endast använda den offentliga slutpunkten.

Felsökning och vanliga förtäringsfel

Form fungerar lokalt men misslyckas i produktionen Cloudflare / Netlify build

Se till att dina produktionsmiljövariabler (LUGATU_FORM_ID och LUGATU_API_KEY) är konfigurerade i din värdpanel.

Vanliga frågor

Kan jag hålla min Astro-webbplats 100 % statisk med Lugatu?

Ja. Rena statiska (SSG) webbplatser skickas direkt till Lugatu offentliga slutpunkt utan att kräva någon serverberäkning på din värdleverantör.

Är du redo att skapa din formulärslutpunkt?

Kom igång gratis på några sekunder. Inget kreditkort krävs.

Börja gratis →