Контактна HTML-форма без бекенду: готовий приклад

Що означає «без бекенду»

Браузер може надіслати HTML-форму без JavaScript, але хтось має прийняти дані, зберегти їх і доставити сповіщення. У цьому прикладі це робить Formgong. Вам не потрібні власний PHP-скрипт, API чи база даних; сервер обробки все одно існує, просто ви його не підтримуєте.

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

1. Отримайте ключ потрібної форми

Відкрийте Formgong, вкажіть свою пошту й підтвердьте її за посиланням у листі. Після цього відкрийте форму в дашборді та розділ «Підключення сайту». Скопіюйте її публічний ключ.

Замініть fk_your_access_key в прикладі на справжнє значення. Ключ дозволяє надсилати заявки, але не читати інбокс чи змінювати налаштування. Його можна залишати в HTML. Секрет поштового сервісу та токен Telegram-бота сюди не потрібні.

2. Додайте HTML-код на сайт

Вставте цей код у контактну секцію сторінки. Він не містить стилів: додайте свої класи до полів та кнопки, щоб зберегти дизайн сайту. Текст підписів можна перекласти; назви name, email та message залиште як у прикладі.

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

Чому важливі method, action та name

method="POST" передає поля в тілі запиту. action вказує адресу приймання. Атрибут name визначає назву переданого поля: самого id недостатньо. Якщо додаєте телефон, використайте, наприклад, name="phone".

Поле botcheck — пастка для ботів. Воно має залишатися поза екраном і порожнім; його не можна перетворювати на видиме обов’язкове поле. Якщо воно заповнене, Formgong може прийняти запит як спам без сповіщення.

Звичайна форма працює без fetch. Браузер надсилає дані й переходить на сторінку результату. required та type="email" допомагають відвідувачу, але не замінюють перевірку даних сервісом.

3. Виберіть сторінку після надсилання

Без додаткових налаштувань браузер відкриє сторінку результату Formgong. Для власної подяки опублікуйте сторінку на своєму сайті та вставте її повну HTTPS-адресу в налаштуваннях форми, у розділі переходів після надсилання.

Інший варіант — приховане поле _redirect з повною адресою сторінки. Якщо в дашборді ввімкнено ігнорування адрес із коду, перевагу матиме адреса з налаштувань. Для помилки можна окремо задати _error_redirect.

Хочете залишати відвідувача на тій самій сторінці? Додайте JavaScript з fetch та обробкою станів. У статті про діагностику доставки є приклад перевірки відповіді.

4. Перевірте опубліковану форму

1. Відкрийте сайт на його справжньому домені, заповніть форму вручну й надішліть впізнаване тестове повідомлення.
2. У дашборді відкрийте «Заявки» саме цієї форми. Перевірте повідомлення та додаткові поля.
3. Перевірте пошту отримувача, включно з папкою «Спам».
4. Повторіть перевірку на телефоні: підписи, клавіатура для email, кнопка та сторінка подяки мають бути зручними.

Якщо хочете ще один канал, підключіть Telegram. Зміна отримувачів і переходів у Formgong не вимагає повторної публікації HTML-сайту.

Що перевірити перед додаванням захисту

При ввімкненні Turnstile оновіть код із розділу «Підключення сайту»: формі потрібні віджет з актуальним site key і поле cf-turnstile-response. Зразок вище містить лише honeypot і не підходить для форми, яка вже вимагає Turnstile.

Якщо налаштований список дозволених доменів, він має включати реальний домен сайту. Перевірка в редакторі або на іншому preview-домені може давати інший результат. Повний опис підключення є в HTML-документації.