# Backend dla formularzy z Lovable, Bolt, v0 i Cursor

Kreatory AI generują formularze, które niczego nie wysyłają. Porównaj trzy działające podejścia, podłącz hosted backend jednym poleceniem i sprawdź dostawę przed startem.

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

Lovable, Bolt, v0 i Cursor tworzą formularze, które pokazują sukces, ale nie wysyłają danych. Masz trzy drogi: backend kreatora, hosted form backend albo własną funkcję serverless. Dla formularza kontaktowego najszybszy jest hosted backend: jedno polecenie podpina POST na /submit z publicznym kluczem, a dostawę sprawdź w skrzynce, poczcie i Telegramie jeszcze przed startem.

## Dlaczego wygenerowany formularz nic nie wysyła

Lovable, Bolt, v0 i Cursor świetnie generują interfejs: pola, walidacja, przycisk i „Dziękujemy!”. Domyślnie jednak przycisk często nie robi nic użytecznego — obsługa pokazuje podziękowanie od razu, bez żadnego żądania sieciowego, więc dane nigdzie się nie zapisują.

Drugi wzorzec: AI samo podpina Supabase albo Lovable Cloud. To działa, ale dla prostego formularza kontaktowego ciągnie za sobą bazę danych, konfigurację dostępów i zwykle osobną usługę email w rodzaju Resend. Stan swojej formy sprawdzisz w minutę: otwórz narzędzia deweloperskie, kartę Network i wyślij formularz — brak żądania POST oznacza formę dekoracyjną.

## Trzy działające drogi dla formularza

**1. Backend kreatora.** Lovable Cloud / Supabase plus konektor pocztowy. Ma sens, gdy aplikacja już korzysta z autoryzacji, baz danych lub innych scenariuszy serwerowych. Dla samotnego formularza kontaktowego to zbędna infrastruktura.

**2. Hosted form backend.** Formularz wysyła POST na jeden endpoint z publicznym kluczem; serwis zapisuje zgłoszenia i powiadamia pocztą oraz Telegramem. Najszybsza droga dla landingów i wizytówek: bez schematów, funkcji edge i serwerów.

**3. Własna funkcja serverless.** Pełna kontrola i pełna odpowiedzialność: kod, sekrety, filtrowanie spamu i ponawianie dostawy po twojej stronie. Ten artykuł opisuje drugą drogę — działa tak samo w każdym kreatorze generującym HTML lub React.

## Kryteria wyboru backendu dla formularzy

**Dowód dostawy.** „Dziękujemy” na stronie nic nie dowodzi: potrzebujesz skrzynki ze statusami przyjęcia, dostawy i spamu. W Formgong to inbox ze szczegółami dostawy per kanał. **Ochrona przed spamem.** Minimum honeypot, lepiej z opcjonalnym Turnstile i oceną spamu; spam nie powinien zużywać miesięcznego limitu.

**Kanały powiadomień.** Poczta to baza, dla szybkiej reakcji zespołu potrzebny jest Telegram, dla integracji podpisane webhooki. **Lokalizacja danych.** Przy klientach z UE sprawdź, gdzie fizycznie leżą zgłoszenia: Formgong trzyma wszystko w Cloudflare z jurysdykcją UE — D1, kolejka i pliki są europejskie. **Zmiany bez przebudowy strony.** Odbiorców, przekierowania i auto-odpowiedź zmieniaj w panelu, nie w kodzie generowanym ponownie przez AI.

## Jedno polecenie dla każdego kreatora

Otwórz czat swojego projektu i poproś o podłączenie istniejącego formularza z zachowaniem designu. Polecenie poniżej działa w Lovable, Bolt, v0 i Cursor; zastąp `fk_your_access_key` kluczem z sekcji podłączenia strony twojego formularza w panelu Formgong.

```text
Connect this form to Formgong. Keep its design and field names.
1. Send a POST request to https://formgong.com/submit (FormData or JSON with access_key).
2. access_key: fk_your_access_key (a public key; it can stay in the code).
3. Show success only after a response with success: true.
4. On error, keep the entered field values and show an error message.
5. Add a hidden botcheck field (honeypot) with no visible UI change.
6. Do not add tokens, secrets, or file inputs.
```

### Przykład żądania API

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

## Sprawdź dostawę, nie napis „Udało się”

Gdy kreator zastosuje zmiany, wyślij jedno rozpoznawalne zgłoszenie testowe i przejdź całą drogę:

- **Żądanie.** W karcie Network widać POST na `https://formgong.com/submit` z odpowiedzią `success: true`.

- **Zapis.** Zgłoszenie pojawiło się w skrzynce tego formularza w Formgong, ze wszystkimi polami.

- **Poczta.** W planie Free e-mail przychodzi w porannym skrócie następnego dnia o 08:00, w strefie czasowej właściciela konta, do jednego odbiorcy. W Pro i Business każdy lead jest wysyłany osobnym e-mailem. Sprawdź folder spam.

- **Telegram.** Telegram przychodzi od razu w każdym planie, także Free. Jeśli czat jest połączony, wiadomość trafia właśnie do niego.

Po publikacji powtórz test na prawdziwym domenie: podgląd edytora może zachowywać się inaczej. Pełny rozkład jazdy opisuje [diagnostyka dostawy](/pl/blog/contact-form-not-sending-email/).

Nie używaj w tym scenariuszu pól plików: przykład dotyczy zgłoszeń tekstowych. Załączniki wymagają osobnych ustawień formularza i Turnstile.

## Po starcie: zmiany bez ponownej generacji

Gdy formularz działa, większość zmian nie wymaga powrotu do kreatora. W panelu Formgong zmienisz odbiorców emaili, połączone czaty Telegram, przekierowania po wysłaniu, auto-odpowiedź dla odwiedzającego i ochronę.

Jeśli zgłoszenia nagle przestały docierać po redesignie, nie zgaduj: diagnostyka formularza w Formgong wczyta twoją stronę i pokaże, czy snippet jest poprawnie zainstalowany — adres, metodę, klucz i wymagane pola. Analityka formularza pokaże, przy których polach odwiedzający przerywają wypełnianie; to tańsze niż eksperyment A/B i nie wymaga nowego kodu.

## Typowe błędy AI przy generowaniu formularzy

**Pojawia się „Udało się”, ale nie ma żądania**
Kreator wygenerował dekoracyjną obsługę. Poproś: „Wysyłaj dane przez fetch i pokazuj sukces dopiero po odpowiedzi success: true”.

**W kodzie został fk_your_access_key**
To placeholder. Weź prawdziwy klucz z sekcji podłączenia strony swojego formularza i go podstaw.

**Po błędzie pola się czyszczą**
Odwiedzający traci wpisany tekst. Obsługa ma zachować wartości i pokazać błąd; dopisz to w kolejnym poleceniu.

**Po włączeniu Turnstile formularz przestał działać**
Widżet trzeba dodać do kodu i przesyłać `cf-turnstile-response`. Po zmianie ochrony odśwież przykład podłączenia w panelu.

**Zgłoszenie jest, ale email nie przychodzi**
Sprawdź potwierdzenie emaila właściciela i odbiorców. Niezweryfikowane adresy nie są celami dostawy; szczegóły w [diagnostyce dostawy](/pl/blog/contact-form-not-sending-email/).

## Pytania i odpowiedzi

### Czy formularz z kreatora AI potrzebuje Supabase?

Nie, jeśli to samotny formularz kontaktowy. Hosted backend przyjmuje POST z publicznym kluczem i dostarcza powiadomienia; Supabase lub Lovable Cloud mają sens, gdy aplikacja już ich używa do innych scenariuszy.

### Czy access_key może zostać w wygenerowanym kodzie?

Tak. To publiczny klucz przyjmowania zgłoszeń bez dostępu do skrzynki ani ustawień. Sekretów, tokenów botów i kluczy usług pocztowych nie dodaje się do frontendu.

### Czy polecenie zadziała w każdym kreatorze?

W tych, które generują HTML lub React i mogą wykonać fetch: Lovable, Bolt, v0, Cursor. Różnią się sposobem zastosowania zmian; weryfikujesz efekt — żądanie POST i success: true.

### Gdzie przechowywane są zgłoszenia klientów?

Zgłoszenia i pliki są przechowywane w UE, w Cloudflare D1 i w magazynie plików z jurysdykcją UE. Powiadomienia wysłane do Telegrama, Slacka lub Discorda przetwarzają te usługi, poza tym magazynem. Polityka prywatności na stronie nadal jest potrzebna.

## Źródła i dokumentacja

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [Dokumentacja Formgong](https://formgong.com/pl/docs/)

[Pobierz klucz formularza](https://formgong.com/pl/#top)