MWONGOZO WA UTENGENEZAJI · ASTRO & JAMSTACK

Muunganisho wa Fomu ya Mawasiliano ya Astro (Tuli na SSR)

Jinsi ya kuongeza fomu za mawasiliano kwenye tovuti za Astro tuli (SSG) na njia za seva mseto kwa kutumia vituo vya Lugatu bila kutunza seva za barua pepe au hifadhidata.

Unganisha Mradi wa Astro → Gundua Mwongozo wa WordPress

1. Uingizaji wa Fomu ya Safi Static Site (SSG).

Astro inajulikana kwa sifuri-Javascript kwa chaguo-msingi. Ukiwa na Lugatu, unaweza kuweka tovuti yako ya Astro 100% tuli huku unakusanya maswali kwa kutumia fomu za kawaida za HTML na uletaji wa upande wa mteja.

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. Njia ya Astro Hybrid / SSR API yenye Ufunguo wa API ya Seva

Ikiwa tovuti yako ya Astro inaendeshwa katika hali ya mseto au SSR kwenye Kurasa za Cloudflare, Netlify, au Vercel, sambaza mawasilisho kwa usalama kupitia njia ya 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' },
  });
};

Tofauti ya Usalama na Uthibitishaji

Maagizo ya Usalama: Usiwahi kufichua import.meta.env.LUGATU_API_KEY katika lebo za hati za upande wa mteja wa Astro. Hati za mteja lazima zitumie mwisho wa umma pekee.

Utatuzi na Hitilafu za Kawaida za Kumeza

Fomu hufanya kazi ndani ya nchi lakini inashindwa kwenye utayarishaji wa Cloudflare / Netlify build

Hakikisha vibadala vya mazingira yako ya utayarishaji (LUGATU_FORM_ID na LUGATU_API_KEY) vimesanidiwa katika dashibodi yako ya upangishaji.

Maswali Yanayoulizwa Mara Kwa Mara

Je, ninaweza kuweka tovuti yangu ya Astro 100% tuli na Lugatu?

Ndiyo. Safi tuli tovuti (SSG) huwasilisha moja kwa moja kwa kituo cha umma cha Lugatu bila kuhitaji komputa yoyote ya seva kwenye mtoa huduma wako wa kukupangisha.

Je, uko tayari kuunda mwisho wa fomu yako?

Anza bila malipo kwa sekunde chache. Hakuna kadi ya mkopo inahitajika.

Anza Bure →