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

Контактна форма для статичного HTML-сайту з доставкою на пошту й у Telegram. Готовий код без PHP, сторінка подяки та перевірка заявок.

Author: Formgong
Published: 2026-10-01
Language: uk
Canonical: https://formgong.com/blog/html-contact-form-without-backend?lang=uk

Контактна форма на статичному HTML-сайті може працювати без вашого бекенду: задайте method=POST, адресу Formgong /submit та приховане поле access_key. Після підтвердження пошти сервіс прийматиме заявки й надсилатиме сповіщення. Звичайний HTML-варіант не потребує JavaScript.

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

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

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

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

Відкрийте [Formgong](/?lang=uk#top), вкажіть свою пошту й підтвердьте її за посиланням у листі. Після цього відкрийте форму в дашборді та розділ «Підключення сайту». Скопіюйте її публічний ключ.

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

Підтвердьте пошту до перевірки доставки: заявки непідтвердженого акаунта можуть зберігатися в очікуванні підтвердження.

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

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

```html
<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` та обробкою станів. У [статті про діагностику доставки](/blog/contact-form-not-sending-email?lang=uk) є приклад перевірки відповіді.

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

- Відкрийте сайт на його справжньому домені, заповніть форму вручну й надішліть впізнаване тестове повідомлення.

- У дашборді відкрийте «Заявки» саме цієї форми. Перевірте повідомлення та додаткові поля.

- Перевірте пошту отримувача, включно з папкою «Спам».

- Повторіть перевірку на телефоні: підписи, клавіатура для email, кнопка та сторінка подяки мають бути зручними.

Якщо хочете ще один канал, [підключіть Telegram](/blog/website-form-to-telegram?lang=uk). Зміна отримувачів і переходів у Formgong не вимагає повторної публікації HTML-сайту.

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

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

Якщо налаштований список дозволених доменів, він має включати реальний домен сайту. Перевірка в редакторі або на іншому preview-домені може давати інший результат. Повний опис підключення є в [HTML-документації](/docs/html?lang=uk).

## Питання та відповіді

### Чи працює HTML-форма без JavaScript?

Так. Форма з method=POST та action на Formgong надсилається засобами браузера. Після відповіді відкривається сторінка результату або налаштована сторінка подяки.

### Чи потрібен PHP для статичного сайту?

Ні, якщо дані приймає зовнішній сервіс. У цьому прикладі їх обробляє Formgong, тому PHP чи власний API на хостингу сайту не потрібні.

### Чи можна лишати access_key у HTML?

Так. Це публічний ключ приймання заявок. Він не дає доступу до читання інбоксу або редагування налаштувань.

### Чи цей приклад працює з увімкненим Turnstile?

Приклад містить honeypot. Якщо форма вимагає Turnstile, додайте актуальний віджет і передачу cf-turnstile-response з розділу підключення сайту.

## Джерела та документація

- [MDN: sending form data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
- [HTML-підключення Formgong](https://formgong.com/docs/html?lang=uk)

[Отримати ключ](https://formgong.com/?lang=uk#top)