Документація /

Форми

Будь-яка HTML-форма на сайті Lobsite може збирати повідомлення: укажіть у її action значення /_lobsite/forms/<name> і розгорніть сайт. Не потрібно писати серверну частину, додавати скрипт або вставляти ключ. Надіслані дані потрапляють на сторінку «Відповіді» панелі керування та на вашу електронну пошту.

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

Як працюють форми

• Action визначає назву форми. /_lobsite/forms/contact — це форма contact. Назви складаються з малих літер, цифр, - і _. Використовуйте окрему назву для кожного призначення (contact, newsletter, quote); кілька сторінок можуть використовувати одну форму.
• Форми виявляються під час розгортання. Під час розгортання HTML-файли читаються, а кожна форма, що надсилає дані на /_lobsite/forms/, реєструється. Форма має бути в HTML-файлі в папці, яку ви розгортаєте: форму, що виникає лише після відображення JavaScript, не буде знайдено (див. Фреймворки).
• Поля зберігаються з тими назвами, які ви їм дали. Кожне поле з атрибутом name зберігається як текст. Поле з назвою email використовується як Reply-To листа-сповіщення та як заголовок на сторінці «Відповіді». Завантаження файлів не підтримується.
• Захист від спаму додається автоматично. Коли сторінка передається відвідувачеві, до форми додаються приховане поле-пастка та підписана позначка часу. Надсилання із заповненим полем-пасткою або отримані раніше ніж за 2 секунди зберігаються окремо як спам, а надто часті послідовні надсилання від одного відвідувача відхиляються.
• Після надсилання відвідувач бачить сторінку подяки з посиланням назад або сторінку, яку ви вказали в redirect.
• Форми працюють за робочими URL-адресами. Розгортання для попереднього перегляду не приймають дані, а сайт, розгорнутий без облікового запису, починає їх приймати після закріплення за обліковим записом.

Типи форм

Кожна форма є контактною або списком очікування. Тип визначає, як її дані відображаються на сторінці «Відповіді»: рядки контактної форми показують повідомлення, а рядки списку очікування — хто приєднався та з якої сторінки; кількість записів у списках очікування показується над таблицею. Обидва типи надсилають однаковий лист-сповіщення.

Lobsite визначає тип під час розгортання:

• Форма, у якій відвідувачі вводять електронну адресу й щонайбільше ім’я, — це список очікування. Приховані поля, поля з назвою, що починається з _, і прапорці (поле згоди) не враховуються.
• Те саме стосується форми з назвою waitlist, newsletter, signup, subscribe, early-access, beta або notify, незалежно від її полів.
• Усі інші форми — контактні.

Щоб обрати тип самостійно, задайте type у lobsite.toml:

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

Записи до списку очікування зберігаються, доки існує форма; інші надсилання — протягом строку зберігання відповідного плану (див. Ліміти).

Контактна форма

Повна сторінка з ім’ям, електронною адресою та повідомленням. Підписи й значення autocomplete спрощують заповнення; атрибути required не дають надіслати порожню форму.

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

Щоб перевіряти ті самі поля на сервері та спрямовувати відвідувачів на власну сторінку подяки, додайте форму до lobsite.toml і створіть thanks.html:

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

Список очікування

Перед запуском достатньо поля електронної адреси. Назва форми робить її списком очікування; налаштування type задає це явно. Записи підраховуються на сторінці «Відповіді» та зберігаються, доки існує форма.

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

Підписка на розсилку

Достатньо одного поля. Друга форма на тому самому сайті отримує власну назву, тому підписки й повідомлення відображаються окремо на сторінці «Відповіді» та в експортованих даних. Форма лише з полем електронної адреси (і щонайбільше ім’ям) є списком очікування: див. Типи форм.

<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 — приховане поле, що визначає сторінку після надсилання. Це має бути шлях або URL-адреса на тому самому сайті; redirect у lobsite.toml має пріоритет.

Запит вартості

Випадні списки, перемикачі та прапорці працюють як зазвичай. Прапорці з однаковою назвою зберігаються як одне значення з елементами, розділеними комами.

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

Надсилання без переходу зі сторінки

Щоб показати повідомлення на місці, не завантажуючи нову сторінку, надішліть форму через fetch. Сформуйте тіло запиту за допомогою new FormData(form), щоб передати й приховані антиспам-поля, та запитайте JSON заголовком 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>

Відповідь має вигляд {"ok": true}, або {"ok": false, "errors": {"email": "Required"}} для полів, які не пройшли перевірку, або {"ok": false, "error": "rate_limited"} (також too_large, not_found, forms_off). Без скрипту ця сама форма й далі працює як звичайна форма.

Фреймворки

React, Vue, Svelte, Astro та інші працюють, якщо форма є в зібраному HTML, який створюють попереднє відображення та статичний експорт (Astro й Eleventy за замовчуванням, Next.js з output: "export", SvelteKit з prerender, Nuxt з nuxt generate). Залишайте атрибути action і method на самому елементі <form>.

В односторінковому застосунку форма має бути в зібраному HTML і залишатися в тому вигляді, у якому її передав сервер: форма, що існує лише в JavaScript, не реєструється, а її надсилання відхиляються; форма, яку браузер відображає повторно, втрачає антиспам-поля, і її повідомлення потрапляють до спаму.

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

Налаштування

Кожна форма може мати розділ у lobsite.toml. Усі ключі необов’язкові; налаштування зберігаються разом із розгортанням.

[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 або types, не зберігається; відвідувач бачить, що потрібно виправити, і посилання назад. На безкоштовному плані notify може містити лише адресу вашого облікового запису, а webhook недоступний.

Перегляд відповідей

• Сторінка «Відповіді» на панелі керування показує дані всіх форм в одній таблиці. Шукайте в них, відбирайте за сайтом і типом форми та перемикайтеся на спам, щоб побачити, що виявили перевірки. Відповідь має статус «Нова», доки ви його не відкриєте.
• Кожне повідомлення надходить на електронну адресу вашого облікового запису; Reply-To містить адресу відправника.
• lobsite forms ls показує список ваших форм; lobsite forms export contact --csv завантажує дані однієї форми. «Експорт CSV» на сторінці «Відповіді» завантажує те, що показано в таблиці.

На безкоштовному плані форми працюють з обмеженнями: місячна квота для кожного сайту, сповіщення лише на адресу вашого облікового запису й без вебхуків. План Standard додає вебхуки, будь-яку підтверджену адресу для сповіщень і відсутність місячного ліміту. Див. Ліміти.