Documentazione /

Moduli

Qualsiasi modulo HTML su un sito Lobsite può raccogliere messaggi: punta il suo action a /_lobsite/forms/<name> e pubblica. Nessun backend da scrivere, nessuno script da aggiungere e nessuna chiave da incollare. Gli invii arrivano nella pagina Invii della tua dashboard e nella tua email.

<form action="/_lobsite/forms/contact" method="POST">
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <button>Send</button>
</form>

Come funzionano i moduli

• L'action dà il nome al modulo. /_lobsite/forms/contact è il modulo contact. I nomi sono lettere minuscole, cifre, - e _. Usa un nome per scopo (contact, newsletter, quote); più pagine possono condividere un modulo.
• I moduli vengono individuati al deploy. Il deploy legge i file HTML e registra ogni modulo che invia a /_lobsite/forms/. Il modulo deve trovarsi in un file HTML della cartella pubblicata: un modulo che esiste solo dopo che JavaScript lo ha generato non viene trovato (vedi Framework).
• I campi vengono salvati con il nome che dai loro. Ogni campo con un name viene conservato, come testo. Un campo chiamato email viene usato come Reply-To dell'email di notifica e come titolo nella pagina Invii. Il caricamento di file non è supportato.
• La protezione antispam viene aggiunta per te. Quando la pagina viene servita, al modulo si aggiungono un campo trappola nascosto e un timestamp firmato. Gli invii che compilano la trappola o tornano entro 2 secondi vengono messi da parte come spam, e troppi di fila da uno stesso visitatore vengono respinti.
• Dopo l'invio, il visitatore vede una pagina di ringraziamento con un link per tornare indietro, o la pagina impostata con redirect.
• I moduli funzionano sugli URL di produzione. I deploy di anteprima non accettano invii, e un sito pubblicato senza account li accetta una volta rivendicato.

Tipi di modulo

Ogni modulo è un modulo di contatto o una lista d'attesa. Il tipo decide come vengono mostrati i suoi invii nella pagina Invii: le righe di un modulo di contatto mostrano il messaggio, quelle di una lista d'attesa mostrano chi si è iscritto e da quale pagina, e le liste d'attesa vengono contate sopra la tabella. Entrambi inviano la stessa email di notifica.

Lobsite sceglie il tipo al deploy:

• Un modulo in cui i visitatori inseriscono un'email e al massimo un nome è una lista d'attesa. I campi nascosti, i campi che iniziano con _ e le caselle di spunta (un consenso) non contano.
• Lo è anche un modulo chiamato waitlist, newsletter, signup, subscribe, early-access, beta o notify, qualunque siano i suoi campi.
• Ogni altro modulo è un modulo di contatto.

Per scegliere tu, imposta type in lobsite.toml:

[forms.launch]
type = "waitlist"   # or "contact"

Le iscrizioni alle liste d'attesa vengono conservate finché il modulo esiste; gli altri invii per il periodo di conservazione del piano (vedi Limiti).

Modulo di contatto

Una pagina completa con nome, email e messaggio. Le etichette e i valori autocomplete lo rendono facile da compilare; gli attributi required bloccano un invio vuoto prima che parta.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact</title>
</head>
<body>
  <h1>Get in touch</h1>
  <form action="/_lobsite/forms/contact" method="POST">
    <label>Name
      <input name="name" autocomplete="name" required>
    </label>
    <label>Email
      <input name="email" type="email" autocomplete="email" required>
    </label>
    <label>Message
      <textarea name="message" rows="5" required></textarea>
    </label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Per controllare gli stessi campi sul server e mandare i visitatori alla tua pagina di ringraziamento, aggiungi il modulo a lobsite.toml e crea thanks.html:

[forms.contact]
required = ["name", "email", "message"]
types    = { email = "email" }
redirect = "/thanks"

Lista d'attesa

Prima del lancio basta un campo email. Il nome del modulo lo rende una lista d'attesa; impostare type lo dichiara esplicitamente. Le iscrizioni vengono contate nella pagina Invii e conservate finché il modulo esiste.

<form action="/_lobsite/forms/waitlist" method="POST">
  <label for="wl-email">Get early access</label>
  <input id="wl-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required>
  <button>Join the waitlist</button>
</form>

[forms.waitlist]
type     = "waitlist"
required = ["email"]
types    = { email = "email" }

Iscrizione alla newsletter

Basta un campo. Un secondo modulo sullo stesso sito ha un nome suo, così iscrizioni e messaggi restano separati nella pagina Invii e negli export. Un modulo con il solo campo email (e al massimo un nome) è una lista d'attesa: vedi Tipi di modulo.

<form action="/_lobsite/forms/newsletter" method="POST">
  <label for="nl-email">Get updates by email</label>
  <input id="nl-email" name="email" type="email" autocomplete="email" required>
  <input type="hidden" name="_redirect" value="/subscribed">
  <button>Subscribe</button>
</form>

_redirect è un campo nascosto che sceglie la pagina mostrata dopo l'invio. Deve essere un percorso o un URL dello stesso sito; redirect in lobsite.toml ha la precedenza.

Richiesta di preventivo

Menu a tendina, pulsanti di opzione e caselle di spunta funzionano come al solito. Le caselle con lo stesso nome vengono salvate come un unico valore separato da virgole.

<form action="/_lobsite/forms/quote" method="POST">
  <input name="name" autocomplete="name" required>
  <input name="email" type="email" autocomplete="email" required>
  <input name="phone" type="tel" autocomplete="tel">
  <select name="budget">
    <option>Under $1,000</option>
    <option>$1,000 to $5,000</option>
    <option>Over $5,000</option>
  </select>
  <fieldset>
    <legend>Services</legend>
    <label><input type="checkbox" name="services" value="Design"> Design</label>
    <label><input type="checkbox" name="services" value="Development"> Development</label>
    <label><input type="checkbox" name="services" value="Hosting"> Hosting</label>
  </fieldset>
  <textarea name="details" required></textarea>
  <button>Request a quote</button>
</form>

Inviare senza lasciare la pagina

Per mostrare un messaggio sul posto invece di caricare una nuova pagina, invia il modulo con fetch. Costruisci il corpo con new FormData(form) così i campi antispam nascosti vengono inclusi, e chiedi JSON con l'header Accept:

<form id="contact" action="/_lobsite/forms/contact" method="POST">
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <button>Send</button>
  <p id="contact-status" role="status"></p>
</form>
<script>
  const form = document.getElementById("contact");
  const status = document.getElementById("contact-status");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    status.textContent = "Sending…";
    const res = await fetch(form.action, {
      method: "POST",
      body: new FormData(form),
      headers: { Accept: "application/json" },
    });
    const answer = await res.json();
    if (answer.ok) {
      form.reset();
      status.textContent = "Thanks! We'll be in touch.";
    } else {
      status.textContent = answer.errors ? Object.entries(answer.errors).map(([field, why]) => `${field}: ${why}`).join(", ") : "Something went wrong. Please try again.";
    }
  });
</script>

La risposta è {"ok": true}, oppure {"ok": false, "errors": {"email": "Required"}} per i campi che non hanno superato i controlli, oppure {"ok": false, "error": "rate_limited"} (anche too_large, not_found, forms_off). Senza lo script, lo stesso modulo funziona comunque come un modulo normale.

Framework

React, Vue, Svelte, Astro e gli altri funzionano quando il modulo è nell'HTML generato, che è ciò che producono il prerendering e l'export statico (Astro ed Eleventy di default, Next.js con output: "export", SvelteKit con prerender, Nuxt con nuxt generate). Tieni gli attributi action e method sull'elemento <form> stesso.

In un'app a pagina singola, il modulo deve essere nell'HTML generato e restare com'è stato servito: un modulo che esiste solo in JavaScript non viene registrato e i suoi invii vengono respinti, e un modulo che il browser rigenera perde i campi antispam, quindi i suoi messaggi finiscono nello spam.

// React: a plain form element, prerendered into the HTML.
export function Contact() {
  return (
    <form action="/_lobsite/forms/contact" method="POST">
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button>Send</button>
    </form>
  );
}

Impostazioni

Ogni modulo può avere una sezione in lobsite.toml. Tutte le chiavi sono facoltative; le impostazioni viaggiano con il deploy.

[forms.contact]
type      = "contact"                            # contact or waitlist; inferred when left out
required  = ["email", "message"]                 # fields that can't be empty
types     = { email = "email", phone = "tel" }   # text, email, number, url or tel
redirect  = "/thanks"                            # the page shown after sending
notify    = ["you@example.com"]                  # who gets an email for each message
webhook   = "https://example.com/hooks/contact"  # POSTs each submission as JSON

Un invio che non supera required o types non viene salvato; il visitatore vede cosa correggere e un link per tornare indietro. Nel piano gratuito, notify può essere solo l'email del tuo account e webhook non è disponibile.

Leggere gli invii

• La pagina Invii della dashboard mostra gli invii di tutti i moduli in un'unica tabella. Cercali, filtrali per sito e per tipo di modulo, e passa allo spam per vedere cosa hanno intercettato i controlli. Un invio è nuovo finché non lo apri.
• Ogni messaggio viene inviato per email all'indirizzo del tuo account, con Reply-To impostato sul mittente.
• lobsite forms ls elenca i tuoi moduli; lobsite forms export contact --csv scarica gli invii di un modulo. L'export CSV nella pagina Invii scarica ciò che mostra la tabella.

Nel piano gratuito i moduli funzionano in modalità limitata: una quota mensile per sito, notifiche solo all'email dell'account e niente webhook. Il piano Standard aggiunge i webhook, qualsiasi indirizzo di notifica verificato e nessun tetto mensile. Vedi Limiti.