Formularz w Lovable: od przycisku do prawdziwego zgłoszenia

Najpierw ustal, kto odbiera dane

Na podglądzie Lovable wszystko może wyglądać poprawnie: pola, przycisk i podziękowanie. To jeszcze nie dowód, że wiadomość została zapisana. Potrzebujesz miejsca, które faktycznie przyjmie zgłoszenie.

Lovable ma własny backend oraz integracje pocztowe i Telegram. Jeśli korzystasz już z nich w rozbudowanej aplikacji, możesz pozostać przy tym rozwiązaniu. Formgong przydaje się, gdy chcesz osobną skrzynkę na zgłoszenia z prostego formularza, bez tworzenia dodatkowych funkcji serwerowych.

Przygotuj klucz i potwierdzoną skrzynkę

Na Formgong podaj adres, do którego masz dostęp. Otwórz otrzymany email i potwierdź adres. Zgłoszenia wysłane przed potwierdzeniem mogą czekać na zwolnienie, więc nie zaczynaj testu dostawy od niezweryfikowanego konta.

W panelu wybierz konkretny formularz i sekcję podłączenia strony. Stąd skopiuj klucz. access_key jest publiczny: umożliwia wysyłanie zgłoszeń, a nie czytanie skrzynki ani zmienianie ustawień.

Poproś Lovable o podłączenie istniejących pól

Rozpocznij polecenie od prośby o zachowanie obecnego wyglądu i nazw pól. Następnie wklej instrukcję poniżej lub gotową wersję z panelu. Podmień fk_your_access_key na klucz swojego formularza.

Dla formularza tekstowego wystarczą imię, email i wiadomość. Nie dodawaj tokena bota, klucza usługi pocztowej ani pola przesyłania plików do tego przykładu.

Dodaj formularz kontaktowy wysyłający zgłoszenia do Formgong. Nie twórz backendu, bazy ani sekretów.

- POST https://formgong.com/submit
- Ukryte pole access_key o wartości fk_your_access_key (klucz jest publiczny)
- Pola: name, email, phone (opcjonalnie), message. Etykiety po polsku
- Honeypot: pole botcheck ukryte CSS-em poza ekranem
- Bez uploadu plików i bez funkcji serwerowych
- Zwykły formularz HTML albo fetch z Accept: application/json. Sukces to json.success === true

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",
    },
    body: JSON.stringify({ ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Formgong error");
}

Zrób test, który da się odnaleźć

Wyślij ręcznie wiadomość „Test formularza ze strony”. Sprawdź ją w zgłoszeniach właściwego formularza oraz w poczcie, także w folderze spam. Obejrzyj wszystkie pola, nie tylko treść wiadomości.

Przy fetch podziękowanie powinno pojawić się po odpowiedzi success: true. Błąd ma zostawić wpisany tekst. Po publikacji powtórz test na rzeczywistym adresie strony i na telefonie.

Dodaj czat jako osobny kanał

W ustawieniach formularza otwórz Telegram, użyj linku połączenia i uruchom bota. Dla grupy dodaj bota i wyślij /connect z kodem wydanym w panelu. To inny kod niż klucz formularza.

Sprawdź listę połączonych czatów i wyślij nowe zgłoszenie. Szczegóły znajdziesz w poradniku Telegrama.

Gdy podziękowanie nie oznacza dostawy

Brak wpisu w panelu? Sprawdź endpoint https://formgong.com/submit i klucz. Wpis istnieje, ale nie ma emaila? Sprawdź weryfikację odbiorcy, włączenie powiadomień i spam.

Po włączeniu Turnstile pobierz aktualny przykład podłączenia: musi przesyłać token. Pole botcheck pozostaw puste i niewidoczne. Pełną ścieżkę kontroli opisuje diagnostyka dostawy.

Ustawienia można zmieniać po publikacji

Adresy odbiorców, temat emaila, czaty i stronę podziękowania ustawiasz w Formgong bez ponownej publikacji witryny. Przed udostępnieniem formularza sprawdź jeszcze zachowanie po błędzie. Plan Free obejmuje 300 zgłoszeń miesięcznie na konto, z pocztą i Telegramem.