अपनी वेबसाइट में कॉन्टैक्ट फ़ॉर्म कैसे जोड़ें (जो सच में आप तक पहुंचे)

काम करने वाला कॉन्टैक्ट फ़ॉर्म बनाने के लिए एक छोटा फ़ॉर्म बनाएं (नाम, ईमेल, संदेश), जो एक सर्वर रूट पर भेजा जाए जो इनपुट को वैलिडेट करे, संदेश को डेटाबेस में सहेजे, और फिर एक सीक्रेट API key का उपयोग करके ईमेल प्रोवाइडर के ज़रिए आपको सूचना ईमेल भेजे। स्पैम ज़्यादातर रोकने के लिए एक छिपा हुआ honeypot फ़ील्ड और rate limiting जोड़ें, सफलता का साफ़ संदेश दिखाएं, और प्रकाशित साइट पर शुरू से अंत तक जांचें। ईमेल भेजने से पहले सहेजना सबसे ज़रूरी हिस्सा है: अगर कभी ईमेल विफल हो जाए, तब भी आपके पास पूछताछ रहती है।

आपके विकल्प

अगर आपकी साइट में पहले से बैकएंड और डेटाबेस है — जो AI ऐप बिल्डर से बने ऐप अक्सर होते हैं — तो आखिरी विकल्प सबसे भरोसेमंद है और पूछताछ को वहीं रखता है जहां आप उसे देख सकें।

अच्छे कॉन्टैक्ट फ़ॉर्म में क्या होता है

• जितने कम फ़ील्ड हो सकें। नाम, ईमेल, संदेश। विषय का ड्रॉपडाउन ("Sales", "Support", "Other") तभी जोड़ें जब आप उसी से रूटिंग करेंगे।
• हर फ़ील्ड के ऊपर साफ़ लेबल, सिर्फ़ placeholder टेक्स्ट नहीं जो टाइप करते ही गायब हो जाए।
• उपयोगी वैलिडेशन: "मान्य ईमेल पता दर्ज करें", फ़ील्ड के बगल में दिखाया गया।
• सफलता की स्थिति जो बताए कि आगे क्या होगा: "धन्यवाद — हम एक कार्य दिवस में जवाब देंगे।"
• एक गोपनीयता नोट जो बताए कि आप विवरण कैसे इस्तेमाल करेंगे, और आपकी गोपनीयता नीति से लिंक हो।
• एक विकल्प जैसे आपका ईमेल या फ़ोन नंबर उन लोगों के लिए जो उसे पसंद करते हैं।

उदाहरण प्रॉम्प्ट

बुनियादी फ़ॉर्म:

कॉन्टैक्ट पेज पर नाम, ईमेल और संदेश वाला कॉन्टैक्ट फ़ॉर्म जोड़ो (सभी ज़रूरी, संदेश 2,000 अक्षर तक)। इसे एक सर्वर रूट पर सबमिट करो जो इनपुट वैलिडेट करे, इसे contact_messages टेबल में समय के साथ सहेजे, और सफलता संदेश दिखाए: "धन्यवाद, हम एक कार्य दिवस में जवाब देंगे।" फ़ील्ड की गलतियां इनलाइन दिखाओ। फ़ोन पर अच्छा काम करे।

ईमेल सूचनाएं:

जब कोई कॉन्टैक्ट संदेश सहेजा जाए, तो hello@example.com पर मुझे Resend से सूचना ईमेल भेजो, जिसकी key RESEND_API_KEY में है। reply-to भेजने वाले के ईमेल पर सेट करो ताकि मैं सीधे जवाब दे सकूं। अगर भेजना विफल हो, तो सहेजा गया संदेश रखो और key को उजागर किए बिना एरर लॉग करो।

स्पैम सुरक्षा:

कॉन्टैक्ट फ़ॉर्म में स्पैम सुरक्षा जोड़ो: एक छिपा honeypot फ़ील्ड जो खाली रहना चाहिए, सर्वर पर प्रति IP प्रति घंटे 5 सबमिशन की सीमा, और 3 से ज़्यादा लिंक वाले संदेश अस्वीकार करो। honeypot वाले सबमिशन चुपचाप हटाओ, लेकिन सफलता दिखाते रहो।

इनबॉक्स:

एक पासवर्ड से सुरक्षित एडमिन पेज जोड़ो जो कॉन्टैक्ट संदेश नवीनतम पहले दिखाए, साथ में "हैंडल्ड" चेकबॉक्स और केवल अनहैंडल्ड संदेशों का फ़िल्टर।

चरण दर चरण

1. तय करें संदेश कहां जाएंगे: सूचनाएं कौन पाएगा, और जवाब कौन देगा।
2. फ़ॉर्म बनाएं ऊपर दिए फ़ील्ड, सुलभ लेबल और मोबाइल-अनुकूल इनपुट के साथ (ईमेल इनपुट टाइप इस्तेमाल करें ताकि फ़ोन सही कीबोर्ड दिखाए)।
3. सर्वर रूट बनाएं। यह ज़रूरी फ़ील्ड, ईमेल फ़ॉर्मेट और लंबाई सीमा जांचता है। केवल ब्राउज़र की वैलिडेशन पर कभी भरोसा न करें।
4. पहले डेटाबेस में सहेजें। देखें अपने ऐप में डेटाबेस कैसे जोड़ें।
5. ईमेल प्रोवाइडर सेट करें। अकाउंट बनाएं, भेजने वाला डोमेन सत्यापित करें, और API key को सीक्रेट के रूप में सहेजें। अपने ऐप से ईमेल कैसे भेजें में डोमेन सेटअप (SPF, DKIM) विस्तार से है।
6. सहेजने के बाद सर्वर से सूचना भेजें। अपने सत्यापित डोमेन को भेजने वाले के रूप में और विज़िटर के पते को reply-to के रूप में इस्तेमाल करें — विज़िटर के पते को "from" में न रखें, वरना उसे स्पूफ़िंग मानकर अस्वीकार किया जा सकता है।
7. विज़िटर को वैकल्पिक ऑटो-रिप्लाई भेजें, लेकिन छोटा रखें; स्पैम पतों पर ऑटो-रिप्लाई आपकी सेंडर प्रतिष्ठा को नुकसान पहुंचा सकते हैं।
8. स्पैम सुरक्षा जोड़ें: honeypot, rate limiting, और ज़रूरत पड़ने पर CAPTCHA-शैली की जांच।
9. प्रकाशित साइट पर जांचें: सबमिट करें, डेटाबेस देखें, अपना इनबॉक्स और स्पैम फ़ोल्डर देखें, और reply पर क्लिक करें।

स्पैम रोकना

कॉन्टैक्ट फ़ॉर्म लाइव होने के कुछ ही दिनों में बॉट्स को आकर्षित करते हैं। बचाव की परतें सबसे कम से सबसे ज़्यादा दखलअंदाज़ी तक लगाएं:

1. Honeypot फ़ील्ड। एक फ़ील्ड जो इंसानों से छिपा है; बॉट उसे भर देते हैं। असली विज़िटर का इससे कोई नुकसान नहीं होता।
2. सर्वर-साइड rate limiting। एक अवधि में एक पता कितने संदेश भेज सकता है, उसकी सीमा।
3. सामग्री के नियम। लिंक से भरे संदेश, या खाली या बेतुकी लंबी संदेश फ़ील्ड अस्वीकार करें।
4. CAPTCHA-शैली की जांच, जैसे Cloudflare Turnstile या Google reCAPTCHA। टोकन को आपके सर्वर पर सत्यापित होना चाहिए; केवल ब्राउज़र में चलने वाली जांच छोड़ी जा सकती है।

आम गलतियां

• "भेजा गया!" दिखाना जबकि कुछ भेजा ही नहीं गया। UI सर्वर के जवाब से पहले या उसकी परवाह किए बिना सफलता दिखा देता है। हमेशा सर्वर की पुष्टि का इंतज़ार करें।
• सिर्फ़ ईमेल, डेटाबेस नहीं। एक गलत कॉन्फ़िगर की गई key और पूछताछ हफ़्तों तक गायब रहती है, और किसी को पता नहीं चलता।
• फ़्रंटएंड कोड में API key। कोई भी उसका इस्तेमाल करके आपके नाम से ईमेल भेज सकता है।
• सत्यापित न किया गया भेजने वाला डोमेन। सूचनाएं स्पैम में जाती हैं या कभी पहुंचती ही नहीं।
• विज़िटर के ईमेल से "from" भेजना। इसके बजाय reply-to इस्तेमाल करें।
• लंबाई की सीमा न होना। बॉट्स बड़े टेक्स्ट ब्लॉक पेस्ट करते हैं।
• लाइव साइट की कभी जांच न करना। Keys और डोमेन अक्सर प्रीव्यू और प्रोडक्शन में अलग होते हैं।

चेकलिस्ट

• साफ़ लेबल और स्पष्ट एरर वाला छोटा फ़ॉर्म
• सर्वर-साइड वैलिडेशन और लंबाई सीमा
• हर संदेश डेटाबेस में सहेजा गया
• सत्यापित डोमेन से भेजी गई सूचना ईमेल, reply-to सेट के साथ
• ईमेल API key केवल सर्वर-साइड सीक्रेट में
• honeypot और rate limiting लागू
• सफलता संदेश तभी दिखे जब सर्वर पुष्टि करे
• गोपनीयता नोट आपकी गोपनीयता नीति से लिंक है
• प्रकाशित साइट पर शुरू से अंत तक जांचा गया, स्पैम फ़ोल्डर सहित

Mythex में कॉन्टैक्ट फ़ॉर्म

Mythex में आप पूरा काम चैट से बना सकते हैं। फ़ॉर्म और डेटाबेस एक ही प्रॉम्प्ट में मांगें (या /database टाइप करें) ताकि सबमिशन सहेजे जाएं। Mythex में बिल्ट-इन ईमेल भेजने वाला प्रोडक्ट नहीं है, इसलिए सूचनाओं के लिए आप Resend, SendGrid या Postmark जैसा प्रोवाइडर लाते हैं, उसकी key /secrets या प्रोजेक्ट सेटिंग्स से जोड़ते हैं, और एजेंट से सर्वर से भेजने को कहते हैं — देखें अपने ऐप से ईमेल भेजें। इस पर भरोसा करने से पहले, प्रीव्यू में फ़ॉर्म पर App Testing (/test) चलाएं, फिर पब्लिश करें और लाइव URL पर जांचें।

कॉन्टैक्ट फ़ॉर्म ज़्यादातर छोटे व्यवसाय की वेबसाइटों और लैंडिंग पेजों का अहम हिस्सा है। लॉन्च से पहले सुरक्षा चेकलिस्ट देख लें।

सवाल