Dokümanlar /

Formlar

Bir Lobsite sitesindeki her HTML formu mesaj toplayabilir: action değerini /_lobsite/forms/<name> adresine yönlendirin ve deploy edin. Yazılacak bir backend, eklenecek bir betik ya da yapıştırılacak bir anahtar yoktur. Gönderimler panelinizdeki Gönderimler sayfasına ve e-postanıza düşer.

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

Formlar nasıl çalışır

• Action, formun adını belirler. /_lobsite/forms/contact, contact formudur. Adlar küçük harfler, rakamlar, - ve _ karakterlerinden oluşur. Her amaç için bir ad kullanın (contact, newsletter, quote); birden fazla sayfa tek bir formu paylaşabilir.
• Formlar deploy sırasında bulunur. Deploy HTML dosyalarını okur ve /_lobsite/forms/ adresine gönderen her formu kaydeder. Form, deploy edilen klasördeki bir HTML dosyasında olmalıdır: yalnızca JavaScript onu oluşturduktan sonra var olan bir form bulunmaz (bkz. Framework'ler).
• Alanlar verdiğiniz adlarla saklanır. name özniteliği olan her alan metin olarak tutulur. email adlı bir alan, bildirim e-postasının Reply-To adresi ve Gönderimler sayfasındaki başlık olarak kullanılır. Dosya yükleme desteklenmez.
• Spam koruması sizin için eklenir. Sayfa sunulduğunda forma gizli bir tuzak alanı ve imzalı bir zaman damgası eklenir. Tuzağı dolduran ya da 2 saniye içinde geri dönen gönderimler spam olarak ayrılır ve bir ziyaretçiden art arda gelen çok fazla gönderim reddedilir.
• Gönderimden sonra ziyaretçi, geri dönüş bağlantılı bir teşekkür sayfası ya da redirect ile belirlediğiniz sayfayı görür.
• Formlar üretim URL'lerinde çalışır. Önizleme deploy'ları gönderim kabul etmez; hesapsız deploy edilen bir site ise sahiplenildikten sonra gönderim kabul eder.

Form türleri

Her form bir iletişim formu ya da bir bekleme listesidir. Tür, gönderimlerin Gönderimler sayfasında nasıl gösterileceğini belirler: bir iletişim formunun satırları mesajı, bir bekleme listesinin satırları kimin hangi sayfadan katıldığını gösterir ve bekleme listeleri tablonun üstünde sayılır. İkisi de aynı bildirim e-postasını gönderir.

Lobsite türü deploy sırasında seçer:

• Ziyaretçilerin bir e-posta ve en fazla bir ad doldurduğu form bir bekleme listesidir. Gizli alanlar, _ ile başlayan alanlar ve onay kutuları (bir izin kutusu) sayılmaz.
• Alanları ne olursa olsun waitlist, newsletter, signup, subscribe, early-access, beta veya notify adlı bir form da öyledir.
• Diğer her form bir iletişim formudur.

Kendiniz seçmek için lobsite.toml içinde type ayarlayın:

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

Bekleme listesi kayıtları form var olduğu sürece saklanır; diğer gönderimler planın saklama süresi boyunca saklanır (bkz. Sınırlar).

İletişim formu

Ad, e-posta ve mesaj içeren eksiksiz bir sayfa. Etiketler ve autocomplete değerleri doldurmayı kolaylaştırır; required öznitelikleri boş bir gönderimi daha gönderilmeden durdurur.

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

Aynı alanları sunucuda da kontrol etmek ve ziyaretçileri kendi teşekkür sayfanıza göndermek için formu lobsite.toml dosyasına ekleyin ve thanks.html oluşturun:

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

Bekleme listesi

Lansmandan önce tek ihtiyacınız bir e-posta alanıdır. Formun adı onu bir bekleme listesi yapar; type ayarlamak bunu açıkça belirtir. Kayıtlar Gönderimler sayfasında sayılır ve form var olduğu sürece saklanır.

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

Bülten kaydı

Tek bir alan yeterlidir. Aynı sitedeki ikinci bir form kendi adını alır; böylece kayıtlar ve mesajlar Gönderimler sayfasında ve dışa aktarmalarda ayrı kalır. Yalnızca bir e-posta alanı (ve en fazla bir ad) olan bir form bekleme listesidir: bkz. Form türleri.

<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, gönderimden sonra gösterilecek sayfayı seçen gizli bir alandır. Aynı sitede bir yol veya URL olmalıdır; lobsite.toml içindeki redirect önceliklidir.

Teklif isteği

Açılır listeler, radyo düğmeleri ve onay kutuları her zamanki gibi çalışır. Aynı ada sahip onay kutuları virgülle ayrılmış tek bir değer olarak saklanır.

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

Sayfadan ayrılmadan göndermek

Yeni bir sayfa yüklemek yerine yerinde bir mesaj göstermek için formu fetch ile gönderin. Gizli spam alanlarının da gitmesi için gövdeyi new FormData(form) ile oluşturun ve Accept başlığıyla JSON isteyin:

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

Yanıt {"ok": true}, geçemeyen alanlar için {"ok": false, "errors": {"email": "Required"}} ya da {"ok": false, "error": "rate_limited"} olur (ayrıca too_large, not_found, forms_off). Betik olmadan aynı form düz bir form olarak çalışmaya devam eder.

Framework'ler

React, Vue, Svelte, Astro ve diğerleri, form derlenmiş HTML'in içindeyse çalışır; önceden oluşturma ve statik dışa aktarma bunu üretir (Astro ve Eleventy varsayılan olarak, output: "export" ile Next.js, prerender ile SvelteKit, nuxt generate ile Nuxt). action ve method özniteliklerini doğrudan <form> öğesinin üzerinde tutun.

Tek sayfalı bir uygulamada form derlenmiş HTML'de olmalı ve sunulduğu gibi kalmalıdır: yalnızca JavaScript'te var olan bir form kaydedilmez ve gönderimleri reddedilir; tarayıcının yeniden oluşturduğu bir form ise spam alanlarını kaybeder ve mesajları spam'e düşer.

// 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>
  );
}

Ayarlar

Her formun lobsite.toml içinde bir bölümü olabilir. Tüm anahtarlar isteğe bağlıdır; ayarlar deploy ile birlikte gider.

[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

required veya types kontrolünü geçemeyen bir gönderim saklanmaz; ziyaretçi neyi düzeltmesi gerektiğini ve bir geri dönüş bağlantısını görür. Ücretsiz planda notify yalnızca hesap e-postanız olabilir ve webhook kullanılamaz.

Gönderimleri okumak

• Paneldeki Gönderimler sayfası tüm formların gönderimlerini tek bir tabloda gösterir. Onlarda arama yapın, siteye ve form türüne göre daraltın ve kontrollerin neyi yakaladığını görmek için spam'e geçin. Bir gönderim siz açana kadar yenidir.
• Her mesaj, Reply-To gönderene ayarlı olarak hesap adresinize e-postayla gönderilir.
• lobsite forms ls formlarınızı listeler; lobsite forms export contact --csv bir formun gönderimlerini indirir. Gönderimler sayfasındaki CSV dışa aktarma, tablonun gösterdiğini indirir.

Ücretsiz planda formlar sınırlı modda çalışır: site başına aylık bir kota, yalnızca hesap e-postanıza bildirim ve webhook yok. Standard planı webhook'ları, doğrulanmış herhangi bir bildirim adresini ekler ve aylık bir üst sınır koymaz. Bkz. Sınırlar.