GHID DE INTEGRARE · ASTRO & JAMSTACK

Integrare formular de contact Astro (static și SSR)

Cum să adăugați formulare de contact la site-urile statice Astro (SSG) și rutele de server hibride folosind punctele finale Lugatu fără a menține servere de e-mail sau baze de date.

Proiectul Connect Astro → Explorați Ghidul WordPress

1. Ingestie de formulare Pure Static Site (SSG).

Astro este renumit pentru zero-JavaScript în mod implicit. Cu Lugatu, vă puteți menține site-ul Astro 100% static în timp ce colectați întrebări cu formulare HTML standard și preluare ușoară pe partea clientului.

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. Rută API Astro Hybrid / SSR cu cheie API Server

Dacă site-ul dvs. Astro rulează în modul hibrid sau SSR pe Cloudflare Pages, Netlify sau Vercel, trimiteți trimiterile în siguranță printr-o rută 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' },
  });
};

Securitate și autentificare invariantă

Instrucțiuni de securitate: Nu expuneți niciodată import.meta.env.LUGATU_API_KEY în etichetele de script Astro la nivelul clientului. Scripturile client trebuie să utilizeze numai punctul final public.

Depanare și erori frecvente de ingestie

Formularul funcționează local, dar eșuează la construcția de producție Cloudflare / Netlify

Asigurați-vă că variabilele de mediu de producție (LUGATU_FORM_ID și LUGATU_API_KEY) sunt configurate în tabloul de bord de găzduire.

Întrebări frecvente

Îmi pot păstra site-ul Astro 100% static cu Lugatu?

Da. Site-urile pure statice (SSG) se trimit direct la punctul final public Lugatu, fără a necesita nici un calcul de server de la furnizorul dvs. de găzduire.

Sunteți gata să vă creați punctul final al formularului?

Începeți gratuit în câteva secunde. Nu este necesar un card de credit.

Începe gratuit →