ΟΔΗΓΟΣ ΕΝΣΩΜΑΤΩΣΗΣ · ASTRO & JAMSTACK

Ενσωμάτωση φόρμας επαφής Astro (Static & SSR)

Πώς να προσθέσετε φόρμες επικοινωνίας σε Astro static sites (SSG) και διαδρομές υβριδικών διακομιστών χρησιμοποιώντας τερματικά σημεία Lugatu χωρίς τη διατήρηση διακομιστών email ή βάσεων δεδομένων.

Connect Astro Project → Εξερευνήστε τον Οδηγό WordPress

1. Κατάποση από καθαρή στατική τοποθεσία (SSG).

Το Astro είναι γνωστό για το zero-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. Διαδρομή Astro Hybrid / SSR API με κλειδί API διακομιστή

Εάν ο ιστότοπός σας Astro εκτελείται σε υβριδική ή SSR λειτουργία σε Σελίδες Cloudflare, Netlify ή Vercel, προωθήστε τις υποβολές με ασφάλεια μέσω μιας διαδρομής 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' },
  });
};

Αμετάβλητη ασφάλεια & έλεγχος ταυτότητας

Οδηγίες ασφαλείας: Ποτέ μην εκθέτετε το import.meta.env.LUGATU_API_KEY σε ετικέτες δέσμης ενεργειών από την πλευρά του πελάτη Astro. Τα σενάρια πελάτη πρέπει να χρησιμοποιούν μόνο το δημόσιο τελικό σημείο.

Αντιμετώπιση προβλημάτων και κοινά σφάλματα κατάποσης

Η φόρμα λειτουργεί τοπικά αλλά αποτυγχάνει στην παραγωγή Cloudflare / Netlify build

Βεβαιωθείτε ότι οι μεταβλητές του περιβάλλοντος παραγωγής σας (LUGATU_FORM_ID και LUGATU_API_KEY) έχουν διαμορφωθεί στον πίνακα ελέγχου φιλοξενίας σας.

Συχνές Ερωτήσεις

Μπορώ να διατηρήσω τον ιστότοπό μου Astro 100% στατικό με το Lugatu;

Ναί. Οι καθαρά στατικοί ιστότοποι (SSG) υποβάλλονται απευθείας στο δημόσιο τελικό σημείο του Lugatu χωρίς να απαιτείται υπολογισμός διακομιστή στον πάροχο φιλοξενίας σας.

Είστε έτοιμοι να δημιουργήσετε το τελικό σημείο της φόρμας σας;

Ξεκινήστε δωρεάν σε δευτερόλεπτα. Δεν απαιτείται πιστωτική κάρτα.

Ξεκινήστε δωρεάν →