Lovable, Bolt, v0 ve Cursor formlarına gerçek backend bağlayın

Üretilen form neden hiçbir yere göndermiyor

Lovable, Bolt, v0 ve Cursor harika arayüzler üretir: alanlar, doğrulama, düğme ve "Teşekkürler!" mesajı. Ancak varsayılan olarak o düğme çoğu zaman işe yaramaz — işleyici teşekkürü hemen gösterir, hiçbir ağ isteği göndermez. Veri hiçbir yere kaydedilmez.

Diğer kalıp: AI kendiliğinden Supabase veya Lovable Cloud bağlar. Bu çalışır ama basit bir iletişim formu için veritabanı, erişim ayarları ve genelde Resend gibi ayrı bir e-posta hizmeti getirir. Formunuzu bir dakikada sınayabilirsiniz: geliştirici araçlarında Network sekmesini açıp formu gönderin; POST isteği yoksa form dekoratiftir — üretilen sitelerde en sık olan da budur.

Form için üç çalışan yol

1. Aracın kendi backendi. Lovable Cloud / Supabase artı e-posta bağlayıcısı. Uygulamanızda zaten kimlik doğrulama veya başka sunucu taraflı akışlar varsa anlamlı; tek başına bir iletişim formu için fazladan altyapıdır.

2. Hosted form backendi. Form, açık anahtarla tek uç noktaya POST gönderir; hizmet kayıtları saklar, e-posta ve Telegram'la bildirir. Açılış sayfaları ve tanıtım siteleri için en hızlı yol: şema, edge fonksiyonu, sunucu yok.

3. Kendi serverless fonksiyonunuz. Tam kontrol ve tam sorumluluk: kod, gizli anahtarlar, spam filtreleme ve yeniden denemeler sizde. Bu yazı ikinci yolu anlatır: HTML veya React üreten her araçta aynı çalışır.

Form backendi seçerken kriterler

Teslimat kanıtı. Sayfadaki "teşekkürler" hiçbir şey kanıtlamaz; kabul, teslim ve spam durumlarını gösteren bir kayıt deposu gerekir. Formgong'da bu, kanal bazında teslim ayrıntılı gelen kutusudur. Spam koruması. En az honeypot; tercihen opsiyonel Turnstile ve spam puanlaması olmalı, spam aylık kotanızı tüketmemeli.

Bildirim kanalları. E-posta temel; hızlı ekip tepkisi için Telegram, entegrasyonlar için imzalı webhook gerekir. Veri konumu. Müşterileriniz AB'deyse kayıtların fiziksel olarak nerede saklandığına bakın: Formgong her şeyi AB yargı yetkisiyle Cloudflare'de, D1'de tutar. Yeniden derlemeden değişiklik. Alıcılar, yönlendirmeler ve otomatik yanıt kodda değil panoda değişmeli — AI'ın yeniden üretmesi gereken kodda değil.

Her araçta çalışan tek komut

Projenizin sohbetini açın ve mevcut formu, tasarımı koruyarak bağlamasını isteyin. Aşağıdaki komut Lovable, Bolt, v0 ve Cursor için uygundur; fk_your_access_key yerine Formgong panelinde o formun site bağlantısı bölümündeki anahtarı yazın.

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

Başarı mesajını değil, teslimatı test edin

Araç değişiklikleri uygulayınca tanınabilir bir test başvurusu gönderin ve tüm yolu izleyin:

1. İstek. Network sekmesinde https://formgong.com/submit adresine POST ve yanıtta success: true görünmeli.
2. Kayıt. Başvuru, o formun Formgong gelen kutusunda tüm alanlarıyla belirmeli.
3. E-posta. Free planda e-posta, hesap sahibinin saat diliminde ertesi sabah 08:00 özetinde, tek alıcıya gelir. Pro ve Business'ta her lead ayrı e-posta olur. Spam klasörüne bakın.
4. Telegram. Telegram her planda anındadır, Free dahil. Bir sohbet bağlıysa mesaj o sohbete gelir.

Yayından sonra testi gerçek alan adında tekrarlayın: editör önizlemesi farklı davranabilir. Tam anlatım “Form e-posta göndermiyor” yazısında.

Yayından sonra: yeniden üretmeden değişiklik

Form çalışmaya başladıktan sonra çoğu değişiklik için araca geri dönmeniz gerekmez. Formgong panelinde e-posta alıcıları, bağlı Telegram sohbetleri, gönderim sonrası yönlendirmeler, ziyaretçiye otomatik yanıt ve koruma değişir.

Yeniden tasarımdan sonra başvurular aniden kesilirse tahmin yürütmeyin: Formgong'un form tanılama özelliği sayfanızı yükler ve snippetin doğru kurulup kurulmadığını gösterir — uç nokta, metod, anahtar ve gerekli alanlar. Form analitiği ise ziyaretçilerin hangi alanda vazgeçtiğini gösterir; A/B deneyinden ucuzdur ve yeni kod üretmeyi gerektirmez.

AI üretiminde tipik form hataları

"Başarılı" görünüyor ama istek yok

Araç dekoratif bir işleyici üretti. Şunu isteyin: "Veriyi fetch ile gönder ve başarıyı yalnızca success: true yanıtından sonra göster".

Kodda hâlâ fk_your_access_key var

Bu bir yer tutucudur. Gerçek anahtarı formunuzun site bağlantısı bölümünden alıp değiştirin.

Hatadan sonra alanlar temizleniyor

Ziyaretçi yazdıklarını kaybeder. İşleyici değerleri korumalı ve hatayı göstermeli; bunu bir sonraki komuta ekleyin.

Turnstile açılınca form bozuldu

Widget koda eklenmeli ve cf-turnstile-response gönderilmelidir. Koruma ayarını değiştirdikten sonra paneldeki bağlantı örneğini yenileyin.

Kayıt var ama e-posta gelmiyor

Sahibin ve alıcıların e-posta doğrulamasını kontrol edin. Doğrulanmamış adresler teslim hedefi değildir; ayrıntılar teslimat tanılamasında.