SITI STATICI · SSG & IBRIDO

Moduli di contatto per siti statici con Astro | Lugatu

Integra moduli nei tuoi progetti Astro SSG senza dover gestire server backend. Ideale per Cloudflare Pages, Vercel, Netlify e GitHub Pages.

Crea modulo Astro → Vedi route API

1. I siti statici richiedono un’acquisizione dinamica

Astro genera HTML statico ad altissima velocità. Con Lugatu come backend serverless, il tuo sito rimane statico mentre le richieste vengono elaborate in sicurezza.

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. Opzione A: Componente Astro statico puro

Inserisci un modulo HTML nel tuo file .astro e invia i campi tramite Fetch API direttamente all’endpoint pubblico.

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

Invariante di sicurezza e autenticazione

Sicurezza delle variabili in Astro: Non mostrare mai LUGATU_API_KEY negli script eseguiti nel browser. Usa import.meta.env solo lato server.

Risoluzione dei problemi ed errori comuni di importazione

Le variabili d’ambiente non vengono lette in modalità SSG

In modalità SSG pura, gli script del client devono contattare l’endpoint pubblico, poiché a runtime non è presente un server Node.js.

Domande frequenti

Posso ospitare il mio sito Astro a costo zero?

Sì. I siti statici con Astro funzionano senza costi su Cloudflare Pages o Netlify, mentre Lugatu riceve e preserva i tuoi moduli.

Pronto per creare l'endpoint del modulo?

Inizia gratuitamente in pochi secondi. Nessuna carta di credito richiesta.

Inizia gratis →