GABAY SA PAGSASAMA · ASTRO & JAMSTACK

Pagsasama ng Astro Contact Form (Static at SSR)

Paano magdagdag ng mga form sa pakikipag-ugnayan sa mga Astro static na site (SSG) at mga ruta ng hybrid na server gamit ang mga endpoint ng Lugatu nang hindi pinapanatili ang mga email server o database.

Ikonekta ang Astro Project → Galugarin ang Gabay sa WordPress

1. Pure Static Site (SSG) Form Ingestion

Ang Astro ay kilala sa zero-JavaScript bilang default. Sa Lugatu, maaari mong panatilihing 100% static ang iyong site sa Astro habang nangongolekta ng mga katanungan gamit ang mga karaniwang HTML form at magaan na pagkuha sa panig ng kliyente.

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 na may Server API Key

Kung tumatakbo ang iyong Astro site sa hybrid o SSR mode sa Cloudflare Pages, Netlify, o Vercel, ipasa nang secure ang mga pagsusumite sa pamamagitan ng ruta ng 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' },
  });
};

Invariant ng Seguridad at Pagpapatotoo

Tagubilin sa Seguridad: Huwag kailanman ilantad ang import.meta.env.LUGATU_API_KEY sa mga tag ng script sa panig ng kliyente ng Astro. Dapat lang gamitin ng mga script ng kliyente ang pampublikong endpoint.

Pag-troubleshoot at Mga Karaniwang Error sa Pag-ingest

Gumagana ang form nang lokal ngunit nabigo sa paggawa ng Cloudflare / Netlify build

Tiyaking naka-configure ang iyong production environment variable (LUGATU_FORM_ID at LUGATU_API_KEY) sa iyong hosting dashboard.

Mga Madalas Itanong

Maaari ko bang panatilihing 100% static ang aking Astro site sa Lugatu?

Oo. Ang mga pure static (SSG) na site ay direktang nagsusumite sa Lugatu public endpoint nang hindi nangangailangan ng anumang server compute sa iyong hosting provider.

Handa nang gawin ang endpoint ng iyong form?

Magsimula nang libre sa ilang segundo. Walang kinakailangang credit card.

Magsimula nang Libre →