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

ब्लॉग

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

· 3 मिनट का पठन

GitHub Pages केवल स्थिर (static) फ़ाइलें परोसता है - कोई PHP नहीं, कोई सर्वर कोड नहीं, फ़ॉर्म POST प्राप्त करने का कोई तरीका नहीं। इसलिए कॉन्टैक्ट फ़ॉर्म को भेजने के लिए एक बाहरी endpoint चाहिए। यहाँ तीन असली विकल्प दिए गए हैं, और वह एक-मिनट वाला संस्करण भी।

विकल्प 1: फ़ॉर्म बैकएंड (अनुशंसित)

अपने फ़ॉर्म के action को एक होस्टेड फ़ॉर्म endpoint की ओर इंगित करें:

<form action="https://formhook.app/f/fh_your-key" method="POST">
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>

Commit करें, push करें, हो गया। सबमिशन एक डैशबोर्ड में आते हैं और पुश सूचना के ज़रिए आपके फ़ोन पर सूचित करते हैं। स्पैम को honeypot और रेट लिमिट द्वारा फ़िल्टर कर दिया जाता है, इससे पहले कि वह आप तक पहुँचे। यह सादे HTML repos और Jekyll साइटों (GitHub Pages का नेटिव जेनरेटर) दोनों के लिए समान रूप से काम करता है - थीम वाले include के लिए Jekyll गाइड देखें, या सादा HTML गाइड देखें।

फ़ायदे: बस एक attribute, किसी JavaScript की ज़रूरत नहीं, स्पैम संभाला जाता है, सबमिशन संग्रहीत होते हैं।
नुकसान: यह एक थर्ड-पार्टी सेवा है - इसलिए आप जो भी चुनें उसकी मुफ़्त-स्तर सीमाएँ और रिटेंशन नीति ज़रूर देखें। Formhook का मुफ़्त स्तर सबमिशन को हमेशा के लिए रखता है।

विकल्प 2: एक mailto: लिंक

<a href="mailto:you@example.com">Email me</a>

ईमानदार लेकिन कमज़ोर: यह इस पर निर्भर करता है कि विज़िटर के पास एक कॉन्फ़िगर किया गया मेल क्लाइंट हो (डेस्कटॉप पर यह अब कम ही सच है), आपके पते को scrapers के सामने उजागर करता है, आपको कोई स्पैम सुरक्षा नहीं देता, और drop-off के बारे में कुछ नहीं बताता। किसी शौकिया README पेज के लिए ठीक है; लेकिन जहाँ पूछताछ ही पैसा है, वहाँ महंगा पड़ता है। (इस ट्रेड-ऑफ़ के बारे में और जानकारी mailto बनाम कॉन्टैक्ट फ़ॉर्म में।)

विकल्प 3: कहीं और एक serverless फ़ंक्शन

आप साइट को GitHub Pages पर ही रख सकते हैं और POST को Cloudflare Worker या इसी तरह की किसी चीज़ से प्राप्त कर सकते हैं। यह काम करता है - लेकिन अब आपको receiver लिखना और बनाए रखना पड़ता है: validation, स्पैम फ़िल्टरिंग, storage, ईमेल डिलीवरी, और CORS। आपने ठीक वही बैकएंड फिर से बना दिया है जिससे GitHub Pages आपको बचाता था। अगर आपको यह पसंद है तो ठीक है; नहीं तो इसकी ज़रूरत नहीं।

AJAX अपग्रेड (वैकल्पिक)

सादा HTML फ़ॉर्म सबमिट होने पर पेज से दूर navigate कर जाता है। पेज पर बने रहने के लिए:

<script>
document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch(e.target.action, {
    method: "POST",
    body: new FormData(e.target),
    headers: { Accept: "application/json" },
  });
  e.target.outerHTML = res.ok
    ? "<p>Thanks - message sent.</p>"
    : "<p>Something went wrong. Please email us directly.</p>";
});
</script>

कोई build चरण नहीं, कोई dependency नहीं - यह एक सादे GitHub Pages repo में काम करता है।

कस्टम डोमेन नोट

अगर आपकी Pages साइट किसी कस्टम डोमेन पर चलती है, तो सुनिश्चित करें कि आपकी फ़ॉर्म सेवा की प्रति-फ़ॉर्म सेटिंग्स (जैसे CORS allowlist) में वह डोमेन शामिल हो, न कि सिर्फ़ username.github.io। Formhook में यह फ़ॉर्म की सेटिंग्स का बस एक फ़ील्ड है।

बस यही पूरी बात है: GitHub Pages आपकी साइट संभालता है, और एक फ़ॉर्म endpoint वह एक चीज़ संभालता है जो यह नहीं कर सकता। मुफ़्त में शुरू करें और आपका अगला git push पूरा होने से पहले ही फ़ॉर्म लाइव हो जाएगा।

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

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

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

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

आगे पढ़ें