PRŮVODCE INTEGRACÍ · ASTRO & JAMSTACK

Integrace kontaktního formuláře Astro (statické a SSR)

Jak přidat kontaktní formuláře na statické stránky Astro (SSG) a hybridní serverové trasy pomocí koncových bodů Lugatu bez údržby e-mailových serverů nebo databází.

Connect Astro Project → Prozkoumejte průvodce WordPress

1. Požití formy Pure Static Site (SSG).

Astro je ve výchozím nastavení známé pro nulový JavaScript. S Lugatu můžete udržet svůj web Astro 100% statický a zároveň shromažďovat dotazy pomocí standardních formulářů HTML a lehkého načítání na straně klienta.

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 s klíčem Server API

Pokud váš web Astro běží v hybridním režimu nebo režimu SSR na stránkách Cloudflare, Netlify nebo Vercel, přepošlete příspěvky bezpečně prostřednictvím cesty Astro API.

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

Neměnné zabezpečení a ověřování

Bezpečnostní instrukce: Nikdy nevystavujte import.meta.env.LUGATU_API_KEY ve značkách skriptu Astro na straně klienta. Klientské skripty musí používat pouze veřejný koncový bod.

Odstraňování problémů a běžné chyby při příjmu

Formulář funguje lokálně, ale selže v produkčním sestavení Cloudflare / Netlify

Ujistěte se, že jsou proměnné produkčního prostředí (LUGATU_FORM_ID a LUGATU_API_KEY) nakonfigurovány na vašem hostitelském řídicím panelu.

Často kladené otázky

Mohu s Lugatu ponechat svůj web Astro 100% statický?

Ano. Čistě statické stránky (SSG) se odesílají přímo do veřejného koncového bodu Lugatu, aniž by vyžadovaly jakýkoli výpočet serveru na vašem poskytovateli hostingu.

Jste připraveni vytvořit koncový bod formuláře?

Začněte zdarma během několika sekund. Není vyžadována žádná kreditní karta.

Začněte zdarma →