РЪКОВОДСТВО ЗА ИНТЕГРАЦИЯ · ASTRO & JAMSTACK

Интегриране на Astro формуляр за контакт (статични и SSR)

Как да добавите формуляри за контакт към статични сайтове на Astro (SSG) и хибридни сървърни маршрути, използвайки крайни точки на Lugatu, без да поддържате имейл сървъри или бази данни.

Свържете Astro Project → Разгледайте ръководството за WordPress

1. Поглъщане на форма на чист статичен сайт (SSG).

Astro е известен с нулевия 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 Pages, 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

Уверете се, че променливите на производствената ви среда (LUGATU_FORM_ID и LUGATU_API_KEY) са конфигурирани във вашето хостинг табло.

Често задавани въпроси

Мога ли да поддържам сайта си Astro 100% статичен с Lugatu?

да Чисто статични (SSG) сайтове се подават директно към публичната крайна точка на Lugatu, без да изискват никакви сървърни изчисления на вашия хостинг доставчик.

Готови ли сте да създадете вашата крайна точка на формуляр?

Започнете безплатно за секунди. Не се изисква кредитна карта.

Започнете безплатно →