PANDUAN INTEGRASI · ASTRO & JAMSTACK

Penyepaduan Borang Hubungan Astro (Statik & SSR)

Cara menambah borang hubungan ke tapak statik Astro (SSG) dan laluan pelayan hibrid menggunakan titik akhir Lugatu tanpa mengekalkan pelayan e-mel atau pangkalan data.

Sambung Projek Astro → Terokai Panduan WordPress

1. Pengingesan Borang Tapak Statik Tulen (SSG).

Astro terkenal dengan JavaScript sifar secara lalai. Dengan Lugatu, anda boleh memastikan tapak Astro anda 100% statik sambil mengumpul pertanyaan dengan borang HTML standard dan pengambilan sebelah pelanggan yang ringan.

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. Laluan Astro Hybrid / SSR API dengan Kunci API Pelayan

Jika tapak Astro anda berjalan dalam mod hibrid atau SSR pada Cloudflare Pages, Netlify atau Vercel, majukan penyerahan dengan selamat melalui laluan API Astro.

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

Keselamatan & Pengesahan Invarian

Arahan Keselamatan: Jangan sekali-kali dedahkan import.meta.env.LUGATU_API_KEY dalam teg skrip pihak pelanggan Astro. Skrip pelanggan mesti hanya menggunakan titik akhir awam.

Menyelesaikan masalah & Ralat Pengingesan Biasa

Borang berfungsi secara tempatan tetapi gagal pada pengeluaran Cloudflare / Netlify build

Pastikan pembolehubah persekitaran pengeluaran anda (LUGATU_FORM_ID dan LUGATU_API_KEY) dikonfigurasikan dalam papan pemuka pengehosan anda.

Soalan Lazim

Bolehkah saya mengekalkan tapak Astro saya 100% statik dengan Lugatu?

ya. Tapak statik tulen (SSG) menyerahkan terus kepada titik akhir awam Lugatu tanpa memerlukan sebarang pengiraan pelayan pada pembekal pengehosan anda.

Bersedia untuk membuat titik akhir borang anda?

Bermula secara percuma dalam beberapa saat. Tiada kad kredit diperlukan.

Mula Percuma →