整合指南·ASTRO 和 JAMSTACK

Astro 聯絡表整合（靜態和 SSR）

如何使用 Lugatu 端點將聯絡表單新增至 Astro 靜態網站 (SSG) 和混合伺服器路由，而無需維護電子郵件伺服器或資料庫。

1.純靜態站點（SSG）形式攝取

預設情況下，Astro 以零 JavaScript 聞名。透過 Lugatu，您可以保持 Astro 網站 100% 靜態，同時使用標準 HTML 表單和輕量級用戶端取得來收集查詢。

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. 帶有伺服器 API 金鑰的 Astro Hybrid / SSR API 路由

如果您的 Astro 網站在 Cloudflare Pages、Netlify 或 Vercel 上以混合或 SSR 模式運行，請透過 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' },
  });
};

安全性和身份驗證不變

安全說明：切勿在 Astro 用戶端腳本標記中公開 import.meta.env.LUGATU_API_KEY。客戶端腳本必須僅使用公共端點。

故障排除和常見攝取錯誤

表單在本地工作，但在生產 Cloudflare / Netlify 建置中失敗

確保在託管儀表板中配置生產環境變數（LUGATU_FORM_ID 和 LUGATU_API_KEY）。

常見問題解答

我可以透過 Lugatu 讓我的 Astro 網站保持 100% 靜態嗎？

是的。純靜態 (SSG) 網站直接提交到 Lugatu 公共端點，無需託管提供者進行任何伺服器運算。

準備好建立您的表單端點了嗎？

幾秒鐘內免費開始使用。無需信用卡。

免費開始 →