VODIČ ZA INTEGRACIJU · ASTRO & JAMSTACK

Integracija Astro obrasca za kontakt (Statički & SSR)

Kako dodati kontakt forme na Astro static sites (SSG) i hibridne poslužiteljske rute koristeći Lugatu krajnje točke bez održavanja poslužitelja e-pošte ili baza podataka.

Connect Astro Project → Istražite Vodič za WordPress

1. Gutanje oblika čistog statičkog mjesta (SSG).

Astro je poznat po zadanom bez JavaScripta. S Lugatuom možete održavati svoju Astro stranicu 100% statičnom dok prikupljate upite sa standardnim HTML obrascima i laganim dohvaćanjem sa strane klijenta.

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 ruta s API ključem poslužitelja

Ako vaša Astro stranica radi u hibridnom ili SSR načinu rada na Cloudflare Pages, Netlify ili Vercel, sigurno proslijedite podneske putem Astro API rute.

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

Sigurnost i provjera autentičnosti

Sigurnosne upute: Nikada ne izlažite import.meta.env.LUGATU_API_KEY u Astro oznakama skripte na strani klijenta. Klijentske skripte moraju koristiti samo javnu krajnju točku.

Rješavanje problema i uobičajene pogreške gutanja

Obrazac radi lokalno, ali ne radi na produkcijskoj Cloudflare/Netlify izgradnji

Osigurajte da su varijable vaše proizvodne okoline (LUGATU_FORM_ID i LUGATU_API_KEY) konfigurirane na nadzornoj ploči vašeg hostinga.

Često postavljana pitanja

Mogu li svoju Astro stranicu držati 100% statičnom uz Lugatu?

Da. Čisto statičke (SSG) stranice podnose se izravno Lugatu javnoj krajnjoj točki bez potrebe za bilo kakvim računanjem poslužitelja na vašem davatelju usluga hostinga.

Jeste li spremni za izradu krajnje točke obrasca?

Započnite besplatno za nekoliko sekundi. Kreditna kartica nije potrebna.

Počni besplatno →