# AI से बने फ़ॉर्म को असल में डेटा भेजना सिखाएँ

Lovable, Bolt, v0 और Cursor के फ़ॉर्म धन्यवाद दिखाकर डेटा खो देते हैं। तीन काम के रास्ते देखें, एक निर्देश से होस्टेड बैकएंड जोड़ें और लॉन्च से पहले डिलीवरी जाँचें।

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

Lovable, Bolt, v0 और Cursor जैसे उपकरण ऐसे फ़ॉर्म बनाते हैं जो सफलता दिखाते हैं पर कोई नेटवर्क अनुरोध नहीं भेजते। तीन काम के रास्ते हैं: बिल्डर का अपना बैकएंड, होस्टेड फ़ॉर्म बैकएंड, या अपनी serverless फ़ंक्शन। संपर्क फ़ॉर्म के लिए सबसे तेज़ होस्टेड बैकएंड है: एक निर्देश से सार्वजनिक कुंजी वाला POST जुड़ जाता है, और लॉन्च से पहले इनबॉक्स, ईमेल व Telegram में डिलीवरी जाँचनी चाहिए।

## बनाया गया फ़ॉर्म कहीं भेजता क्यों नहीं

Lovable, Bolt, v0 और Cursor अच्छे इंटरफ़ेस बनाते हैं: फ़ील्ड, वैलिडेशन, बटन और «धन्यवाद!» संदेश। पर डिफ़ॉल्ट रूप से वह बटन अक्सर कुछ उपयोगी नहीं करता — हैंडलर तुरंत धन्यवाद दिखा देता है, बिना किसी नेटवर्क अनुरोध के। डेटा कहीं सहेजा नहीं जाता।

दूसरा पैटर्न: उपकरण खुद Supabase या Lovable Cloud जोड़ देता है। यह चलता है, पर सादे संपर्क फ़ॉर्म के लिए साथ में डेटाबेस, एक्सेस सेटिंग और आमतौर पर Resend जैसी अलग ईमेल सेवा खींच लाता है।

अपना फ़ॉर्म एक मिनट में जाँच सकते हैं: डेवलपर टूल खोलें, Network टैब चुनें और फ़ॉर्म भेजें। POST अनुरोध नहीं है तो फ़ॉर्म सजावटी है — बनाई गई ज़्यादातर साइटों में यही होता है।

## फ़ॉर्म के लिए तीन काम के रास्ते

**1. बिल्डर का अपना बैकएंड।** Lovable Cloud या Supabase के साथ ईमेल कनेक्टर। तर्कसंगत है जब ऐप पहले से प्रमाणीकरण या डेटाबेस रिकॉर्ड के लिए उनका इस्तेमाल करता हो; अकेले संपर्क फ़ॉर्म के लिए यह अतिरिक्त अवसंरचना है।

**2. होस्टेड फ़ॉर्म बैकएंड।** फ़ॉर्म सार्वजनिक कुंजी के साथ एक एंडपॉइंट पर POST करता है; सेवा संदेश सहेजती है और ईमेल व Telegram पर सूचना देती है। लैंडिंग और ब्रोशर साइटों के लिए सबसे तेज़ रास्ता: कोई स्कीमा, edge फ़ंक्शन या सर्वर नहीं।

**3. अपनी serverless फ़ंक्शन।** पूरा नियंत्रण और पूरी ज़िम्मेदारी: कोड, सीक्रेट, स्पैम फ़िल्टरिंग और डिलीवरी रीट्राई आपके हाथ में। तब उचित जब फ़ॉर्म पहले से जटिल लॉजिक का हिस्सा हो।

यह लेख दूसरे रास्ते पर है: वह Lovable, Bolt, v0, Cursor और HTML या React बनाने वाले किसी भी अन्य उपकरण में एक जैसा काम करता है।

## बैकएंड चुनने के मापदंड

**डिलीवरी का प्रमाण।** पेज पर «धन्यवाद» कुछ साबित नहीं करता। स्थिति वाले संदेश भंडार की ज़रूरत है: स्वीकृत, वितरित, स्पैम। Formgong में यह इनबॉक्स है जिसमें हर चैनल की डिलीवरी का ब्योरा मिलता है।

**स्पैम सुरक्षा।** कम से कम honeypot; बेहतर वह जहाँ वैकल्पिक Turnstile/कैप्चा और स्पैम मूल्यांकन हो, और स्पैम आपकी मासिक सीमा न खाए।

**सूचना चैनल।** ईमेल आधार है; टीम की तेज़ प्रतिक्रिया के लिए Telegram, और इंटीग्रेशन के लिए हस्ताक्षरित webhook चाहिए।

**डेटा का स्थान।** ग्राहक EU में हैं तो देखें संदेश असल में कहाँ रहते हैं। Formgong सब कुछ EU क्षेत्राधिकार वाले Cloudflare पर रखता है: D1, कतार और फ़ाइलें।

**साइट दोबारा बनाए बिना बदलाव।** प्राप्तकर्ता, रीडायरेक्ट और ऑटो-रिप्लाई डैशबोर्ड में बदलने चाहिए — उस कोड में नहीं जिसे AI दोबारा लिखे।

## एक निर्देश जो हर बिल्डर में चलता है

अपने प्रोजेक्ट की चैट खोलें और मौजूदा फ़ॉर्म को डिज़ाइन तथा फ़ील्ड नाम बनाए रखते हुए जोड़ने को कहें। इस खंड के नीचे जो निर्देश दिखता है वह Lovable, Bolt, v0 और Cursor सब में काम करता है; `fk_your_access_key` की जगह 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.
```

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

## सफलता का संदेश नहीं, डिलीवरी जाँचें

जब उपकरण बदलाव लागू कर दे, एक पहचानने योग्य टेस्ट सबमिशन भेजें और पूरा रास्ता तय करें:

- **अनुरोध।** Network टैब में `https://formgong.com/submit` पर POST दिखे और जवाब में `success: true` हो।

- **रिकॉर्ड।** संदेश Formgong में उस फ़ॉर्म के इनबॉक्स में सभी फ़ील्ड के साथ दिखे।

- **ईमेल।** Free पर ईमेल अगली सुबह 08:00 के डाइजेस्ट में आता है, खाता मालिक के टाइमज़ोन में, एक प्राप्तकर्ता को। Pro और Business पर हर लीड अलग ईमेल होती है। स्पैम फ़ोल्डर भी देखें।

- **Telegram।** Telegram हर प्लान पर तुरंत आता है, Free सहित। चैट जुड़ा हो तो संदेश उसी में आता है।

प्रकाशित करने के बाद वास्तविक डोमेन पर दोहराएँ; एडिटर का पूर्वावलोकन अलग व्यवहार कर सकता है। पूरा विवरण [«फ़ॉर्म ईमेल नहीं भेजता»](/hi/blog/contact-form-not-sending-email/) लेख में है।

इस व्यवस्था में फ़ाइल इनपुट न जोड़ें: उदाहरण टेक्स्ट संदेशों के लिए है। अटैचमेंट के लिए अलग फ़ॉर्म सेटिंग और Turnstile चाहिए।

## लॉन्च के बाद: दोबारा बनवाए बिना बदलाव

फ़ॉर्म चलने के बाद ज़्यादातर बदलावों के लिए बिल्डर में लौटना ज़रूरी नहीं। Formgong डैशबोर्ड से ईमेल प्राप्तकर्ता, जुड़े Telegram चैट, सबमिशन के बाद रीडायरेक्ट, आगंतुक ऑटो-रिप्लाई और सुरक्षा बदलते हैं।

रीडिज़ाइन के बाद संदेश अचानक बंद हो जाएँ तो अनुमान न लगाएँ: Formgong की फ़ॉर्म डायग्नोस्टिक्स सुविधा आपका पेज लोड करके बताती है कि स्निपेट सही लगा है या नहीं — एंडपॉइंट, तरीक़ा, कुंजी और ज़रूरी फ़ील्ड।

फ़ॉर्म एनालिटिक्स दिखाता है कि आगंतुक किन फ़ील्ड पर भरना छोड़ते हैं। यह A/B प्रयोग से सस्ता है और नया कोड बनवाने की ज़रूरत नहीं पड़ती।

## AI से बने फ़ॉर्म की आम ग़लतियाँ

**«सफलता» दिखती है पर अनुरोध नहीं जाता**
उपकरण ने सजावटी हैंडलर बनाया है। कहें: «डेटा fetch से भेजो और success: true जवाब के बाद ही सफलता दिखाओ»।

**कोड में अभी भी fk_your_access_key है**
यह placeholder है। अपने फ़ॉर्म के वेबसाइट कनेक्शन अनुभाग से असली कुंजी लेकर बदलें।

**त्रुटि के बाद फ़ील्ड खाली हो जाते हैं**
आगंतुक का लिखा खो जाता है। हैंडलर को मान रखने और त्रुटि दिखानी चाहिए; यह अगले निर्देश में जोड़ें।

**Turnstile चालू करने पर फ़ॉर्म टूट गया**
विजेट कोड में जोड़ना और `cf-turnstile-response` भेजना ज़रूरी है। सुरक्षा बदलने के बाद डैशबोर्ड का कनेक्शन उदाहरण ताज़ा करें।

**रिकॉर्ड है पर ईमेल नहीं आता**
मालिक और प्राप्तकर्ताओं का ईमेल सत्यापन देखें; असत्यापित पता डिलीवरी गंतव्य नहीं है। ब्योरा [डिलीवरी जाँच गाइड](/hi/blog/contact-form-not-sending-email/) में।

## आम सवाल

### AI बिल्डर के फ़ॉर्म को Supabase चाहिए?

अकेले संपर्क फ़ॉर्म के लिए नहीं। होस्टेड बैकएंड सार्वजनिक कुंजी वाले POST स्वीकार करता है और सूचनाएँ पहुँचाता है; Supabase या Lovable Cloud तब समझदारी है जब ऐप उन्हें पहले से दूसरे कामों में उपयोग करता हो।

### बने हुए कोड में access_key रखना सुरक्षित है?

हाँ। यह सार्वजनिक सबमिशन कुंजी है: इनबॉक्स या सेटिंग की पहुँच नहीं देती। सीक्रेट, बॉट टोकन और ईमेल सेवा की कुंजियाँ फ़्रंटएंड कोड में कभी नहीं रखी जातीं।

### निर्देश हर बिल्डर में चलेगा?

हाँ, उन सबमें जो HTML या React बनाते हैं और fetch चला सकते हैं: Lovable, Bolt, v0, Cursor। फ़र्क़ सिर्फ़ बदलाव लागू करने के तरीक़े का है; जाँच परिणाम की होती है — POST अनुरोध और success: true।

### ग्राहकों के संदेश कहाँ सहेजे जाते हैं?

संदेश और फ़ाइलें EU में रहती हैं, EU क्षेत्राधिकार वाले 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/hi/docs/)

[फ़ॉर्म कुंजी लें](https://formgong.com/hi/#top)