lobsite! Logg inn Registrer deg

Dokumentasjon /

Skjemaer

Alle HTML-skjemaer på et Lobsite-nettsted kan samle inn meldinger: pek action mot /_lobsite/forms/<name> og deploy. Det er ingen backend å skrive, ikke noe skript å legge til og ingen nøkkel å lime inn. Innsendinger havner på siden Innsendinger i dashbordet og i e-posten din.

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

Slik fungerer skjemaer

  • Action gir skjemaet navn. /_lobsite/forms/contact er skjemaet contact. Navn består av små bokstaver, sifre, - og _. Bruk ett navn per formål (contact, newsletter, quote); flere sider kan dele ett skjema.
  • Skjemaer oppdages ved deploy. Deployen leser HTML-filene og registrerer hvert skjema som sender til /_lobsite/forms/. Skjemaet må ligge i en HTML-fil i mappen som deployes: et skjema som først finnes etter at JavaScript har rendret det, blir ikke funnet (se Rammeverk).
  • Felter lagres med navnet du gir dem. Hvert felt med name beholdes, som tekst. Et felt som heter email, brukes som Reply-To i varslings-e-posten og som tittel på siden Innsendinger. Filopplasting støttes ikke.
  • Spambeskyttelse legges til for deg. Når siden leveres, legges et skjult honeypot-felt og et signert tidsstempel til i skjemaet. Innsendinger som fyller ut honeypot-feltet eller kommer tilbake innen 2 sekunder, legges til side som spam, og for mange på rad fra én besøkende avvises.
  • Etter sending ser den besøkende en takkeside med en lenke tilbake, eller siden du har satt med redirect.
  • Skjemaer fungerer på produksjons-URL-er. Forhåndsvisnings-deployer tar ikke imot innsendinger, og et nettsted som er deployet uten konto, tar imot dem når det er krevd.

Skjematyper

Hvert skjema er et kontaktskjema eller en venteliste. Typen avgjør hvordan innsendingene vises på siden Innsendinger: radene i et kontaktskjema viser meldingen, radene i en venteliste viser hvem som meldte seg på og fra hvilken side, og ventelister telles over tabellen. Begge sender den samme varslings-e-posten.

Lobsite velger typen ved deploy:

  • Et skjema der besøkende fyller inn en e-postadresse og maks et navn, er en venteliste. Skjulte felter, felter som starter med _, og avkrysningsbokser (et samtykke) teller ikke.
  • Det samme gjelder et skjema som heter waitlist, newsletter, signup, subscribe, early-access, beta eller notify, uansett hvilke felter det har.
  • Alle andre skjemaer er kontaktskjemaer.

For å velge selv, sett type i lobsite.toml:

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

Påmeldinger til ventelister beholdes så lenge skjemaet finnes; andre innsendinger i planens lagringsperiode (se Grenser).

Kontaktskjema

En komplett side med navn, e-post og melding. Etikettene og autocomplete-verdiene gjør den lett å fylle ut; required-attributtene stopper en tom innsending før den sendes.

<!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>

For å sjekke de samme feltene på serveren og sende besøkende til din egen takkeside, legg til skjemaet i lobsite.toml og lag thanks.html:

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

Venteliste

Før lansering trenger du bare et e-postfelt. Navnet på skjemaet gjør det til en venteliste; å sette type sier det rett ut. Påmeldinger telles på siden Innsendinger og beholdes så lenge skjemaet finnes.

<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" }

Påmelding til nyhetsbrev

Ett felt er nok. Et andre skjema på samme nettsted får sitt eget navn, så påmeldinger og meldinger holdes adskilt på siden Innsendinger og i eksporter. Et skjema med bare et e-postfelt (og maks et navn) er en venteliste: se Skjematyper.

<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 er et skjult felt som velger siden som vises etter sending. Det må være en sti eller en URL på samme nettsted; redirect i lobsite.toml har forrang.

Tilbudsforespørsel

Nedtrekkslister, radioknapper og avkrysningsbokser fungerer som vanlig. Avkrysningsbokser med samme navn lagres som én kommaseparert verdi.

<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>

Sende uten å forlate siden

For å vise en melding på stedet i stedet for å laste en ny side, send skjemaet med fetch. Bygg bodyen med new FormData(form) så de skjulte spamfeltene blir med, og be om JSON med Accept-headeren:

<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>

Svaret er {"ok": true}, eller {"ok": false, "errors": {"email": "Required"}} for felter som ikke besto, eller {"ok": false, "error": "rate_limited"} (også too_large, not_found, forms_off). Uten skriptet fungerer det samme skjemaet fortsatt som et vanlig skjema.

Rammeverk

React, Vue, Svelte, Astro og resten fungerer når skjemaet ligger i den bygde HTML-en, som er det forhåndsrendring og statisk eksport gir (Astro og Eleventy som standard, Next.js med output: "export", SvelteKit med prerender, Nuxt med nuxt generate). Behold attributtene action og method på selve <form>-elementet.

I en single-page-app må skjemaet ligge i den bygde HTML-en og forbli slik det ble levert: et skjema som bare finnes i JavaScript, registreres ikke og innsendingene avvises, og et skjema nettleseren rendrer på nytt, mister spamfeltene, så meldingene havner i 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>
  );
}

Innstillinger

Hvert skjema kan ha en seksjon i lobsite.toml. Alle nøkler er valgfrie; innstillingene følger med deployen.

[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

En innsending som ikke består required eller types, lagres ikke; den besøkende ser hva som må rettes og en lenke tilbake. På gratisplanen kan notify bare være kontoens e-postadresse, og webhook er ikke tilgjengelig.

Lese innsendinger

  • Siden Innsendinger i dashbordet viser innsendingene fra alle skjemaer i én tabell. Søk i dem, avgrens etter nettsted og skjematype, og bytt til spam for å se hva kontrollene fanget opp. En innsending er ny til du åpner den.
  • Hver melding sendes på e-post til kontoens adresse, med Reply-To satt til avsenderen.
  • lobsite forms ls lister skjemaene dine; lobsite forms export contact --csv laster ned innsendingene fra ett skjema. CSV-eksport på siden Innsendinger laster ned det tabellen viser.

På gratisplanen kjører skjemaer i begrenset modus: en månedlig kvote per nettsted, varsler bare til kontoens e-postadresse og ingen webhooker. Standard-planen legger til webhooker, enhver bekreftet varslingsadresse og ingen månedlig grense. Se Grenser.

Kan vi lagre en liten cookie i 7 dager for å se hvordan du fant Lobsite? Vi bruker den ikke til annonser. Personvernerklæring