Форми, які працюють без бекенду
Додайте один атрибут до форми на своєму статичному сайті — і кожна відповідь потрапить до вашої панелі керування. Без JavaScript, без вбудованих віджетів, без сторонніх сервісів, і тому, хто заповнює форму, ніде не треба реєструватися.
<form harvis-form="contact"> <input name="email" type="email" required> <textarea name="message"></textarea> <button>Send</button> </form>
Три кроки, і один з них — просто розгорнути сайт ще раз
Немає конструктора форм, який довелося б вивчати, і немає ендпоїнта, який треба скопіювати. Атрибут — це і є все налаштування.
- 01
Додайте атрибут
Впишіть harvis-form у будь-яку форму у вашому HTML. Дайте їй назву, якщо на сайті форм більше однієї. Action і method можна не вказувати — вони підставляються, коли сторінка віддається браузеру.
- 02
Розгорніть ще раз
Перетягніть папку знову або виконайте npx harvis. Нічого не треба налаштовувати, не треба вставляти жодного ключа й попередньо вмикати перемикач у панелі керування.
- 03
Читайте те, що надходить
Відповіді з'являються під вашим сайтом у панелі керування, найновіші згори. Відкрийте рядок, щоб прочитати все, або заберіть усе разом у CSV.
Усе зводиться до двох атрибутів
harvis переписує форму дорогою з сервера, тож сторінка, яку ви написали, залишається сторінкою, яку ви написали.
<form harvis-form="contact"
data-harvis-redirect="/thanks.html">
<input name="email" type="email" required>
<button>Send</button>
</form><form harvis-form="contact"
data-harvis-redirect="/thanks.html"
action="/__harvis/form/contact" method="post">
<input type="hidden" name="_harvis_redirect" value="/thanks.html">
<input type="text" name="_harvis_hp" tabindex="-1" aria-hidden="true" style="…">
<input name="email" type="email" required>
<button>Send</button>
</form>Ці два атрибути
- harvis-form
- Позначає форму як таку, з якої треба збирати відповіді. Значення дає їй назву, щоб кілька форм на одному сайті не змішувалися; якщо значення не вказати, відповіді збираються під назвою «default».
- data-harvis-redirect
- Необов'язковий. Сторінка вашого сайту, на яку потраплять люди після надсилання. Усе, що вказує за межі вашого сайту, ігнорується.
Що ви отримуєте
Усе нижче ввімкнено від самого початку. Сторінки налаштувань немає для жодного з цих пунктів.
Без JavaScript
Форма надсилає дані так, як HTML робив це завжди. Вона працює й із заблокованими скриптами, і на повільному телефоні, і у браузері, який показує лише текст.
Спам відсіюється
Кожна форма віддається з полем-приманкою, якого не бачить жодна людина, і все, що його заповнює, тихо відкидається. Обмеження частоти встановлюють межу для того, скільки за годину може надіслати один відвідувач і один сайт.
Скільки завгодно форм
Дайте їм назви — форма зворотного зв'язку й форма реєстрації на одному сайті матимуть окремі списки, які можна фільтрувати й експортувати нарізно.
Власна сторінка подяки
Спрямуйте форму на сторінку, яку ви написали самі, і саме туди люди потраплять після надсилання. Якщо не вказати її, вони побачать просту сторінку підтвердження.
Експорт коли завгодно
Одна кнопка дає CSV зі стовпчиком для кожного поля, яке будь-хто коли-небудь надсилав, тож форма, до якої на півдорозі додалося запитання, все одно відкриється як одна таблиця.
Ніхто ні за ким не стежить
Жодного скрипта відстеження, жодних куків, жодних третіх сторін усередині сторінки. Адреса відвідувача хешується перед збереженням — і лише для того, щоб обмеження частоти могло відрізнити дві відповіді.
Обмеження
Щедрі для форми зворотного зв'язку й водночас достатньо тісні, щоб скрипт, наведений на ваш сайт, не завалив вашу пошту.
- Полів на одну відповідь
- 30
- Довжина одного поля
- 5 000 символів
- Розмір однієї відповіді
- 64 КБ
- Відповідей на сайт
- 60 на годину
- Відповідей від відвідувача
- 20 на годину
- Зберігається на сайт
- 1 000, найновіші згори
Запитання
Про що питають, перш ніж поставити форму на статичний сайт.
Що таке статична форма?
Це форма на сайті, який не має власного сервера. Зазвичай це означає, що формі нікуди надсилати дані, — саме тому статичні сайти найчастіше позичають сторонній сервіс форм. harvis і так віддає кожну сторінку вашого сайту, тож може прийняти відповідь просто дорогою.
Чи треба вміти програмувати?
Треба вміти додати одне слово до рядка HTML. Якщо ваш сайт написав ШІ, попросіть його додати атрибут harvis-form до форми — він знає, як це зробити, бо саме так написано в інструкціях, які harvis публікує для ШІ-асистентів.
Чи працює це з вимкненим JavaScript?
Так. Власне, заради цього все й побудовано саме так. Форма робить звичайний HTML-запит POST, а браузер потім переходить за перенаправленням — точно як форми працювали ще до появи JavaScript.
Чи можу я й далі користуватися власним ендпоїнтом або іншим сервісом форм?
Так — просто не додавайте атрибут. Форми без harvis-form віддаються рівно такими, якими ви їх написали, разом з action. У формі, де атрибут є, harvis замінює action, бо додати атрибут — це і є спосіб сказати, куди має піти відповідь.
Чи можна прикріплювати файли?
Поки що ні. Поле для файлу у формі, з якої збираються відповіді, для відвідувача працює, але сам файл не зберігається — залишаються лише текстові поля.
Що станеться з відповідями, якщо я видалю сайт?
Вони зникнуть разом із ним. Відповіді належать сайту, а не окремому розгортанню, тож повторне розгортання їх зберігає, а видалення сайту прибирає їх назавжди. Спершу експортуйте CSV, якщо хочете їх зберегти.
Опублікуйте сайт і спробуйте
Публікація безкоштовна й займає близько двох секунд. Додайте атрибут до форми, розгорніть сайт ще раз і надішліть собі тестове повідомлення.