ऐसे फ़ॉर्म जो बिना बैकएंड के चलते हैं
अपनी स्टैटिक साइट के किसी फ़ॉर्म में एक एट्रिब्यूट जोड़ें और हर सबमिशन आपके डैशबोर्ड में आ जाएगा। कोई JavaScript नहीं, कोई एम्बेड किया विजेट नहीं, कोई थर्ड-पार्टी सर्विस नहीं, और भरने वाले को कहीं साइन अप भी नहीं करना पड़ता।
Its markup, styles and deploy script are on GitHub — copy it, change the fields, redeploy.
<form harvis-form="contact"> <input name="email" type="email" required> <textarea name="message"></textarea> <button>Send</button> </form>
तीन स्टेप, और उनमें से एक तो बस दोबारा डिप्लॉय करना है
न कोई फ़ॉर्म बिल्डर सीखना है, न कोई एंडपॉइंट कॉपी करना है। यह एट्रिब्यूट ही पूरा सेटअप है।
- 01
एट्रिब्यूट जोड़ें
अपने HTML के किसी भी फ़ॉर्म पर harvis-form लगा दें। साइट पर एक से ज़्यादा फ़ॉर्म हैं तो उसे एक नाम दे दें। action और method छोड़ दें — पेज सर्व होते समय वे अपने आप भर जाते हैं।
- 02
दोबारा डिप्लॉय करें
फ़ोल्डर को एक बार फिर खींच लाएँ, या npx harvis चलाएँ। कुछ भी कॉन्फ़िगर नहीं करना, कोई की पेस्ट नहीं करनी, डैशबोर्ड में पहले से कोई स्विच ऑन नहीं करना।
- 03
जो आए उसे पढ़ें
सबमिशन डैशबोर्ड में आपकी साइट के नीचे दिखते हैं, सबसे नया सबसे ऊपर। पूरा पढ़ने के लिए कोई भी पंक्ति खोलें, या पूरा सेट CSV में ले जाएँ।
पूरी बात बस दो एट्रिब्यूट की है
harvis फ़ॉर्म को सर्वर से बाहर निकलते वक़्त फिर से लिखता है, ताकि आपका लिखा पेज आपका ही लिखा पेज बना रहे।
<form harvis-form="contact"
data-harvis-redirect="/thanks.html">
<input name="email" type="email" required>
<button>Send</button>
</form><form harvis-form="contact"
data-harvis-redirect="/thanks.html"
action="/__harvis/form/contact" method="post">
<input type="hidden" name="_harvis_redirect" value="/thanks.html">
<input type="text" name="_harvis_hp" tabindex="-1" aria-hidden="true" style="…">
<input name="email" type="email" required>
<button>Send</button>
</form>वे दो एट्रिब्यूट
- harvis-form
- फ़ॉर्म को ऐसा चिह्नित करता है जिससे सबमिशन इकट्ठा किए जाएँ। इसकी वैल्यू ही उसका नाम बनती है, ताकि एक साइट के कई फ़ॉर्म आपस में न मिलें; वैल्यू न दें तो सबमिशन “default” के नाम से जमा होते हैं।
- data-harvis-redirect
- वैकल्पिक। आपकी साइट का वह पेज जहाँ लोगों को सबमिट करने के बाद भेजा जाए। आपकी साइट से बाहर की तरफ़ इशारा करती कोई भी चीज़ नज़रअंदाज़ कर दी जाती है।
जब फ़ॉर्म JavaScript बनाता हो, तो एंडपॉइंट ख़ुद लिख दीजिए
harvis पेज के सर्वर से निकलते समय action भर देता है। जो फ़ॉर्म आपके बंडल के चलने के बाद ही बनता है, वह उस वक़्त पेज में होता ही नहीं — तो भरने को कुछ है ही नहीं, और आप वही लिख देते हैं जो वह पुनर्लेखन लिखता। यह अब भी सामान्य HTML पोस्ट है, और इस पेज की बाकी सारी बातें वैसी ही लागू रहती हैं।
- React
- Vue
- Svelte
- Angular
<form action="/__harvis/form/contact" method="post">
<input name="email" type="email" required />
<textarea name="message" />
{/* optional — where to land after sending */}
<input type="hidden" name="_harvis_redirect" value="/thanks" />
{/* optional — the decoy harvis would have added */}
<input
type="text"
name="_harvis_hp"
tabIndex={-1}
autoComplete="off"
aria-hidden="true"
style={{ position: "absolute", left: "-9999px", opacity: 0 }}
/>
<button>Send</button>
</form>- action + method
- वही एंडपॉइंट जो harvis लिखता, साथ में post। आख़िरी हिस्सा फ़ॉर्म का नाम है — छोटे अक्षर, अंक और डैश; बाकी सब कुछ “default” के नीचे जमा होता है।
- _harvis_redirect
- वैकल्पिक, और यह data-harvis-redirect का हाथ से लिखा रूप है। आपकी अपनी साइट का पथ हो; बाहर की ओर इशारा करने वाला कुछ भी अनदेखा कर दिया जाता है।
- _harvis_hp
- वैकल्पिक, और फ़ॉर्म ख़ुद लिखने पर आप बस यही खोते हैं: बॉट पकड़ने वाला चारा। display:none के बजाय इसे स्क्रीन से बाहर रखिए और ख़ाली छोड़िए — जो भी इसे भर दे, वह जवाब हटा दिया जाता है।
- harvis-form
- इसे मत लगाइए। यह एट्रिब्यूट harvis से action लिखवाने का अनुरोध है, और वह आपने अभी ख़ुद लिख दिया है।
भेजने का काम ब्राउज़र को करने दीजिए
न preventDefault, न fetch। जवाब एक रीडायरेक्ट होता है जिसे ब्राउज़र ख़ुद फ़ॉलो करता है — यही वजह है कि स्क्रिप्ट न चलने पर भी फ़ॉर्म काम करता रहता है।
प्रीरेंडर भी JavaScript ही गिना जाता है
अगर आपका बिल्ड फ़ॉर्म को HTML में लिख देता है और फिर ऐप ब्राउज़र में उसे संभाल लेता है, तब भी ये फ़ील्ड लिख दीजिए — harvis के डाले हुए फ़ील्ड आपके कंपोनेंट में नहीं हैं, इसलिए हाइड्रेशन उन्हें हटा सकता है।
आपको क्या मिलता है
नीचे की हर चीज़ पहले से ही चालू है। इनमें से किसी के लिए कोई सेटिंग्स पेज नहीं है।
कोई JavaScript नहीं
फ़ॉर्म वैसे ही सबमिट करता है जैसे HTML हमेशा से करता आया है। स्क्रिप्ट ब्लॉक होने पर भी, धीमे फ़ोन पर भी, और सिर्फ़ टेक्स्ट दिखाने वाले ब्राउज़र में भी यह चलता है।
स्पैम छँट जाता है
हर फ़ॉर्म के साथ एक ऐसा फंदा फ़ील्ड भेजा जाता है जो किसी इंसान को दिखता ही नहीं, और जो कुछ उसे भरता है वह चुपचाप हटा दिया जाता है। रेट लिमिट तय करती है कि एक विज़िटर और एक साइट एक घंटे में कितना भेज सकते हैं।
जितने चाहें उतने फ़ॉर्म
उन्हें नाम दे दें — एक ही साइट पर कॉन्टैक्ट फ़ॉर्म और साइनअप फ़ॉर्म की अपनी-अपनी लिस्ट रहती है, और आप उन्हें अलग-अलग फ़िल्टर और एक्सपोर्ट कर सकते हैं।
अपना खुद का थैंक-यू पेज
फ़ॉर्म को अपने लिखे हुए किसी पेज की तरफ़ मोड़ दें, भेजने के बाद लोग वहीं पहुँचेंगे। न बताएँ तो उन्हें एक सादा कन्फ़र्मेशन पेज मिलेगा।
जब चाहें एक्सपोर्ट करें
एक बटन से आपको ऐसी CSV मिलती है जिसमें अब तक किसी के भी भेजे हर फ़ील्ड का एक कॉलम होता है, तो बीच रास्ते में जिस फ़ॉर्म में एक सवाल जुड़ गया, वह भी एक ही टेबल की तरह खुलता है।
कोई किसी का पीछा नहीं करता
कोई ट्रैकिंग स्क्रिप्ट नहीं, कोई कुकी नहीं, पेज के अंदर कोई थर्ड पार्टी नहीं। विज़िटर का पता सेव होने से पहले हैश कर दिया जाता है, वह भी सिर्फ़ इसलिए कि रेट लिमिट दो सबमिशन में फ़र्क कर सके।
सीमाएँ
एक कॉन्टैक्ट फ़ॉर्म के लिए काफ़ी खुली, और इतनी कसी हुई कि आपकी साइट पर तानी गई कोई स्क्रिप्ट आपका इनबॉक्स न भर दे।
- हर सबमिशन में फ़ील्ड
- 30
- एक फ़ील्ड की लंबाई
- 5,000 अक्षर
- एक सबमिशन का आकार
- 64 KB
- हर साइट पर सबमिशन
- 60 प्रति घंटा
- हर विज़िटर के सबमिशन
- 20 प्रति घंटा
- हर साइट पर सहेजे जाते हैं
- 1,000, सबसे नए पहले
सवाल
स्टैटिक साइट पर फ़ॉर्म लगाने से पहले लोग यही पूछते हैं।
स्टैटिक फ़ॉर्म क्या होता है?
ऐसी साइट पर लगा फ़ॉर्म जिसका अपना कोई सर्वर नहीं है। आम तौर पर इसका मतलब है कि फ़ॉर्म के पास कुछ भेजने की कोई जगह ही नहीं है, इसीलिए स्टैटिक साइट्स आमतौर पर किसी थर्ड-पार्टी फ़ॉर्म सर्विस से काम चलाती हैं। harvis तो आपकी साइट का हर पेज पहले से ही सर्व करता है, इसलिए वह सबमिशन को रास्ते में ही ले सकता है।
क्या मुझे कोडिंग आनी चाहिए?
बस इतना कि आप HTML की एक लाइन में एक शब्द जोड़ सकें। अगर आपकी साइट किसी AI ने लिखी है, तो उससे कहें कि फ़ॉर्म में harvis-form एट्रिब्यूट जोड़ दे — उसे तरीका पता है, क्योंकि harvis जो निर्देश AI असिस्टेंट्स के लिए पब्लिश करता है उनमें यही लिखा है।
क्या JavaScript बंद होने पर भी यह चलता है?
हाँ। इसे इसी वजह से ऐसे बनाया गया है। फ़ॉर्म एक सामान्य HTML पोस्ट करता है और उसके बाद ब्राउज़र एक रीडायरेक्ट पर चला जाता है — ठीक वैसे ही जैसे JavaScript के आने से पहले फ़ॉर्म काम करते थे।
क्या मैं अपना एंडपॉइंट या कोई दूसरी फ़ॉर्म सर्विस इस्तेमाल करता रह सकता हूँ?
हाँ — बस एट्रिब्यूट मत जोड़िए। जिन फ़ॉर्म में harvis-form नहीं है वे बिल्कुल वैसे ही सर्व होते हैं जैसे आपने लिखे थे, action समेत। जिस फ़ॉर्म में यह है, उसमें harvis action बदल देता है, क्योंकि एट्रिब्यूट जोड़ना ही यह कहने का तरीका है कि सबमिशन कहाँ जाना चाहिए।
क्या यह React, Vue या Svelte के साथ काम करता है?
हाँ, बस एक क़दम और। अगर फ़ॉर्म उसी HTML में है जो आपका बिल्ड बनाता है, तो एट्रिब्यूट ही काफ़ी है। अगर वह JavaScript चलने के बाद ही दिखता है, तो कंपोनेंट में action="/__harvis/form/contact" और method="post" लिख दीजिए — वही एंडपॉइंट, वही डैशबोर्ड, और भेजने का काम अब भी ब्राउज़र ही करता है।
क्या लोग फ़ाइल अटैच कर सकते हैं?
अभी नहीं। जिस फ़ॉर्म से सबमिशन इकट्ठे हो रहे हैं उसमें फ़ाइल इनपुट विज़िटर के लिए काम तो करता है, पर फ़ाइल सेव नहीं होती — सिर्फ़ टेक्स्ट फ़ील्ड ही रखे जाते हैं।
अगर मैं साइट डिलीट कर दूँ तो सबमिशन का क्या होगा?
वे भी साथ चले जाएँगे। सबमिशन किसी डिप्लॉय के नहीं, साइट के होते हैं, इसलिए दोबारा डिप्लॉय करने पर वे बने रहते हैं और साइट डिलीट करने पर हमेशा के लिए मिट जाते हैं। रखना चाहते हैं तो पहले CSV एक्सपोर्ट कर लें।
एक साइट ऑनलाइन करके देखिए
पब्लिश करना मुफ़्त है और करीब दो सेकंड लेता है। किसी फ़ॉर्म में एट्रिब्यूट जोड़ें, दोबारा डिप्लॉय करें, और खुद को एक टेस्ट मैसेज भेजें।