स्टैटिक HTML वेबसाइट पर अपना बैकएंड बनाए बिना संपर्क फ़ॉर्म

स्टैटिक पेज के बाद सेवा काम संभालती है

HTML इनपुट दिखाता है, लेकिन अकेले संदेश सहेजकर ईमेल नहीं भेजता। Formgong यह काम करता है। टेक्स्ट फ़ील्ड वाले पोर्टफ़ोलियो और सेवाओं के पेज के लिए यह तरीका उपयोगी है।

पहले से बैकएंड और विशेष नियम हों तो उसका इस्तेमाल करें। यह उदाहरण केवल संपर्क फ़ॉर्म के लिए नया सर्वर बनाने से बचाता है।

कोड से पहले खाते की तैयारी

Formgong में फ़ॉर्म बनाएँ, ईमेल सत्यापित करें और वेबसाइट कनेक्शन से कुंजी लें। fk_your_access_key बदलें। सार्वजनिक कुंजी HTML में रह सकती है; असत्यापित ईमेल पर सूचनाएँ रोकी जा सकती हैं।

यह कोड संपर्क अनुभाग में रखें

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

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

तीन एट्रिब्यूट ज़रूरी हैं

action पता, method="POST" तरीका और name प्रत्येक मान का नाम तय करता है। केवल id पर्याप्त नहीं है। फ़ोन के लिए name="phone" जोड़ सकते हैं।

botcheck बॉट के लिए छिपा जाल है। उसे स्क्रीन से बाहर और खाली रखें। भरा होने पर संदेश स्पैम बन सकता है और सूचना नहीं आएगी।

भेजने के बाद कहाँ जाना है

बिना बदलाव के Formgong का परिणाम पेज खुलता है। अपना धन्यवाद पेज चाहिए तो पूरा HTTPS URL सेट करें। _redirect भी विकल्प है; यदि पैनल कोड से आए पते अनदेखे करता है तो पैनल की सेटिंग लागू होती है।

उसी पेज पर रहना हो तो fetch और स्थिति प्रबंधन चाहिए। जवाब की जाँच का उदाहरण देखें।

वास्तविक डोमेन से टेस्ट भेजें

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

सुरक्षा बदलें तो कोड भी अपडेट करें

Turnstile के लिए विजेट और cf-turnstile-response चाहिए; यह honeypot उसका विकल्प नहीं है। पैनल से ताज़ा कोड लें। अनुमत डोमेन की सूची हो तो प्रकाशित वेबसाइट का डोमेन जोड़ें; पूर्वावलोकन अलग हो सकता है।