Backend dla formularzy z Lovable, Bolt, v0 i Cursor

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.

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.

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ę:

1. Żądanie. W karcie Network widać POST na https://formgong.com/submit z odpowiedzią success: true.
2. Zapis. Zgłoszenie pojawiło się w skrzynce tego formularza w Formgong, ze wszystkimi polami.
3. 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.
4. 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.

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.