# Бекенд для форм із AI-білдерів: Lovable, Bolt, v0, Cursor

AI-білдери генерують форми, які нікуди не надсилають дані. Порівняйте три робочі маршрути, підключіть hosted-бекенд одним промптом і перевірте доставку до запуску.

Author: Formgong team
Published: 2026-10-06
Updated: 2026-10-06
Language: uk
Canonical: https://formgong.com/uk/blog/form-backend-for-ai-website-builders/

AI-білдери на кшталт Lovable, Bolt, v0 і Cursor генерують форми, які показують «успішно», але не надсилають дані. Робочих маршрутів три: бекенд самого білдера, hosted form backend або власна serverless-функція. Для контактної форми найшвидший — hosted-бекенд: один промпт підключає POST на /submit із публічним ключем, а доставку треба перевірити в інбоксі, пошті й Telegram до запуску.

## Чому згенерована форма нікуди не надсилає

Lovable, Bolt, v0 і Cursor чудово генерують інтерфейс: поля, валідація, кнопка й повідомлення «Дякуємо!». Але за замовчуванням кнопка часто не робить нічого корисного — обробник показує подяку одразу, без жодного мережевого запиту. Дані нікуди не зберігаються.

Інший варіант: AI сам підключає Supabase або Lovable Cloud. Це працює, але для простої контактної форми тягне за собою базу даних, налаштування доступів і, зазвичай, окремий поштовий сервіс на кшталт Resend.

Перевірити стан вашої форми можна за хвилину: відкрийте інструменти розробника, вкладку Network, і надішліть форму. Якщо POST-запиту немає — форма декоративна. Саме це найчастіше і трапляється зі згенерованими сайтами.

## Три робочі маршрути для форми

**1. Власний бекенд білдера.** Lovable Cloud / Supabase плюс поштовий конектор. Має сенс, якщо у вашому застосунку вже є авторизація, бази даних або інші серверні сценарії. Для ізольованої контактної форми це зайва інфраструктура.

**2. Hosted form backend.** Форма надсилає POST на один ендпоінт із публічним ключем; сервіс зберігає заявки та надсилає сповіщення на пошту й у Telegram. Найшвидший маршрут для лендингів і візитівок: жодних схем, edge-функцій і серверів.

**3. Власна serverless-функція.** Повний контроль і повна відповідальність: код, секрети, спам-фільтрація, повторні спроби доставки — на вас. Виправдано, коли форма вже частина складнішої логіки.

Ця стаття — про другий маршрут: він однаково працює в Lovable, Bolt, v0, Cursor і будь-якому іншому білдері, який генерує HTML або React.

## Критерії вибору бекенду для форм

**Доказ доставки.** «Дякуємо» на сайті нічого не доводить. Потрібне сховище заявок зі статусами: прийнято, доставлено, спам. У Formgong це інбокс із деталями доставки по кожному каналу.

**Захист від спаму.** Мінімум — honeypot; краще, коли є опційний Turnstile/капча й оцінювання спаму, а спам не витрачає ваш місячний ліміт.

**Канали сповіщень.** Пошта — база; для швидкої реакції команди потрібен Telegram, для інтеграцій — підписані webhooks.

**Розташування даних.** Якщо клієнти з ЄС, перевірте, де фізично зберігаються заявки. Formgong тримає все в Cloudflare з юрисдикцією ЄС: D1, черга й файли — європейські.

**Зміни без перебірки сайту.** Отримувачі, перенаправлення, авто-відповідь мають змінюватися в дашборді, а не в коді, який знову генеруватиме AI.

## Універсальне підключення: один промпт для будь-якого білдера

Відкрийте чат свого проєкту й попросіть підключити наявну форму, зберігши дизайн. Промпт нижче підходить для Lovable, Bolt, v0 і Cursor; замініть `fk_your_access_key` ключем із дашборда Formgong (розділ «Підключення сайту» потрібної форми).

```text
Підключи цю форму до Formgong, збережи її дизайн і назви полів.
1. Надсилай POST-запит на https://formgong.com/submit (FormData або JSON з access_key).
2. access_key: fk_your_access_key (публічний ключ, його можна лишити в коді).
3. Показуй успіх лише після відповіді з success: true.
4. У разі помилки збережи введені значення полів і покажи повідомлення про помилку.
5. Додай приховане поле botcheck (honeypot) — без видимих змін інтерфейсу.
6. Не додавай токенів, секретів і полів для файлів.
```

### Як виглядає запит у коді

```javascript
async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "en", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Could not send. Please try again.");
  return result.message; // localized "Sent. Thank you!"
}
```

## Перевірте доставку, а не повідомлення «Успішно»

Коли білдер застосує зміни, зробіть одну впізнавану тестову заявку й пройдіть весь шлях:

- **Запит.** У вкладці Network має бути POST на `https://formgong.com/submit` із відповіддю `success: true`.

- **Запис.** Заявка з’явилася в інбоксі форми в дашборді Formgong, з усіма полями.

- **Пошта.** На тарифі Free лист приходить у ранковому дайджесті о 08:00 за часовим поясом власника акаунта, одному отримувачу. На Pro і Business кожен лід надсилається окремим листом. Перевірте папку «Спам».

- **Telegram.** Telegram надходить одразу на всіх тарифах, включно з Free. Якщо чат підключено, повідомлення приходить саме в нього.

Після публікації повторіть перевірку на реальному домені: preview у редакторі може поводитися інакше. Повний розбір — у статті [«Форма не надсилає листи»](/uk/blog/contact-form-not-sending-email/).

Файлові поля в цьому сценарії не використовуйте: приклад розрахований на текстові заявки. Для вкладень потрібні окремі налаштування форми та Turnstile.

## Після запуску: зміни без нової генерації

Коли форма працює, більшість змін не потребують повернення в білдер. У дашборді Formgong змінюються отримувачі листів, підключені чати Telegram, перенаправлення після надсилання, авто-відповідь відвідувачу й захист.

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

Аналітика форми показує, на яких полях відвідувачі припиняють заповнення. Це дешевше за A/B-експеримент і не вимагає генерації нового коду.

## Типові помилки AI-генерації форм

**«Успішно» з’являється, а запиту немає**
Білдер згенерував декоративний обробник. Попросіть: «Надсилай дані fetch-запитом і показуй успіх лише після відповіді success: true».

**У коді лишився fk_your_access_key**
Це плейсхолдер. Візьміть справжній ключ у розділі «Підключення сайту» вашої форми й замініть.

**Після помилки поля очищаються**
Відвідувач втрачає введений текст. Обробник має зберігати значення й показувати помилку; додайте це в наступний промпт.

**Увімкнули Turnstile — форма перестала працювати**
Віджет потрібно додати в код і передавати `cf-turnstile-response`. Оновіть приклад підключення в дашборді після зміни захисту.

**Заявка є, але листів немає**
Перевірте підтвердження email власника й отримувачів. Непідтверджені адреси не є адресами доставки; деталі — у [діагностиці доставки](/uk/blog/contact-form-not-sending-email/).

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

### Чи потрібен Supabase для форми з AI-білдера?

Ні, якщо форма контактна й ізольована. Hosted-бекенд приймає POST із публічним ключем і доставляє сповіщення; Supabase або Lovable Cloud мають сенс, коли застосунок уже використовує їх для інших сценаріїв.

### Чи безпечно лишати access_key у згенерованому коді?

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

### Промпт підійде для будь-якого білдера?

Так для тих, що генерують HTML або React і можуть виконувати fetch: Lovable, Bolt, v0, Cursor. Різниця лише в тому, як білдер застосує зміни; перевірці підлягає результат — POST-запит і success: true.

### Де зберігаються заявки клієнтів?

Заявки й файли зберігаються в ЄС: Cloudflare D1 і файлове сховище з юрисдикцією ЄС. Сповіщення в Telegram, Slack або Discord обробляють ці сервіси, поза цим сховищем. Політика конфіденційності на сайті все одно потрібна.

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

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [Документація Formgong](https://formgong.com/uk/docs/)

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