सामग्री पर जाएँ
FFormhook
← ब्लॉग पर वापस जाएँ

ब्लॉग

Cloudflare Pages में कॉन्टैक्ट फ़ॉर्म कैसे जोड़ें

· 4 मिनट का पठन

Cloudflare Pages एक तेज़, उदार स्थिर (static) होस्ट है - एक repo push करें, ग्लोबल डिप्लॉयमेंट पाएँ, हो गया। जो चीज़ इसके पास नहीं है वह है Netlify Forms जैसा कुछ: कोई बिल्ट-इन सेवा नहीं जो आपके HTML को <form> टैग के लिए स्कैन करे और सबमिशन इकट्ठा करना शुरू कर दे। एक सादा HTML कॉन्टैक्ट फ़ॉर्म Cloudflare Pages पर वैसे ही डिप्लॉय करें, तो POST कहीं नहीं पहुँचता। यहाँ बताया गया है क्यों, और इसे ठीक करने के दो तरीके।

Cloudflare Pages के पास नेटिव फ़ॉर्म प्रोडक्ट क्यों नहीं है

Cloudflare Pages एक स्थिर-फ़ाइल होस्ट है जिसमें डायनामिक routes के लिए एक वैकल्पिक Functions लेयर जोड़ी गई है - यह कोई फ़ॉर्म-हैंडलिंग प्लेटफ़ॉर्म नहीं है। Netlify की फ़ॉर्म सुविधा डिप्लॉयमेंट के समय आपके बिल्ड आउटपुट को पार्स करके, मिलने वाले हर फ़ॉर्म के लिए एक छिपा हुआ बैकएंड बनाकर काम करती है; Cloudflare Pages ऐसा कोई पार्सिंग नहीं करता। आपके बिल्ड artifacts बस CDN पर मौजूद फ़ाइलें हैं। अगर किसी फ़ॉर्म को डेटा भेजने के लिए कोई जगह चाहिए, तो वह जगह आपको खुद बनानी या उधार लेनी होगी। यह ऐसा गैप नहीं है जिसे Cloudflare शायद भरे - Pages को जानबूझकर स्थिर assets और एक हल्की सर्वरलेस लेयर तक सीमित रखा गया है, न कि एक फ़ॉर्म-पार्सिंग पाइपलाइन के रूप में।

विकल्प 1: अपनी खुद की Pages Function लिखें

Cloudflare Pages, Functions को सपोर्ट करता है - छोटे Workers-जैसे handlers जो /functions डायरेक्टरी में रहते हैं और Cloudflare के edge पर चलते हैं। आप एक functions/api/contact.ts जोड़ सकते हैं जो POST body को पढ़े, उसे validate करे, स्पैम फ़िल्टर करे, एक ईमेल भेजे (किसी प्रोवाइडर के API के ज़रिए, क्योंकि Workers कच्चे SMTP कनेक्शन नहीं बना सकते), और शायद storage के लिए KV या D1 में लिखे। यह काम करता है, और सब कुछ एक ही Cloudflare प्रोजेक्ट के भीतर रहता है। लेकिन अब validation, स्पैम फ़िल्टरिंग, storage, और ईमेल डिलीवरी बनाए रखने की ज़िम्मेदारी आपकी है - ठीक वही बैकएंड जिसे लिखने से एक स्थिर होस्ट को आपको बचाना था।

विकल्प 2: फ़ॉर्म को एक होस्टेड बैकएंड की ओर इंगित करें (अनुशंसित)

तेज़ तरीका यह है कि POST को ठीक इसी काम के लिए बनी एक सेवा को भेजा जाए। अपना markup वैसा ही रखें, बस एक attribute जोड़ें:

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

बस यही पूरा एकीकरण है। कोई Function नहीं, कोई Worker नहीं, संभालने के लिए कोई ईमेल API key नहीं। सबमिशन एक डैशबोर्ड में दिखते हैं और एक वेब पुश सूचना ट्रिगर कर सकते हैं - iOS पर भी, बशर्ते साइट होम स्क्रीन पर जोड़ी गई हो। स्पैम सुरक्षा डिफ़ॉल्ट रूप से चालू रहती है: एक honeypot फ़ील्ड और रेट लिमिटिंग ज़्यादातर स्पैम को आप तक पहुँचने से पहले ही रोक देते हैं, और अधिक टारगेटेड हमलों के लिए आप Cloudflare Turnstile जोड़ सकते हैं - Cloudflare का अपना प्राइवेसी-फ्रेंडली CAPTCHA, जो Cloudflare Pages साइट पर मौजूद फ़ॉर्म के लिए एकदम उपयुक्त जोड़ी है। सबमिशन और अपलोड की गई फ़ाइलें EU इन्फ्रास्ट्रक्चर पर संग्रहीत होती हैं। इनमें से कुछ भी इस पर निर्भर नहीं करता कि बाकी साइट कैसे बनाई गई है: Astro, सादा HTML, Next.js स्टैटिक एक्सपोर्ट, Hugo - markup चाहे जो भी जनरेट करे, फ़ॉर्म टैग वही रहता है और डिप्लॉयमेंट अपरिवर्तित रहता है।

अपना endpoint पाना

  1. साइन अप करें और डैशबोर्ड में एक फ़ॉर्म बनाएँ - किसी कार्ड की ज़रूरत नहीं।
  2. फ़ॉर्म का यूनिक URL कॉपी करें (यह https://formhook.app/f/fh_xxxxxxxx जैसा दिखता है)।
  3. इसे अपने मौजूदा <form> के action attribute में पेस्ट करें।
  4. हमेशा की तरह commit करें और डिप्लॉय करें।

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

एक ही लाइन में काम करने वाला फ़ॉर्म

EU-होस्टेड, सबमिशन हमेशा के लिए सुरक्षित, हर टियर पर पुश सूचनाएँ।

मुफ़्त में शुरू करें

क्रेडिट कार्ड नहीं चाहिए · दस्तावेज़ पढ़ें

आगे पढ़ें