AJAX संपर्क फ़ॉर्म

वही संपर्क फ़ील्ड, fetch से JSON में। विज़िटर पेज पर रहता है और छोटा स्टेटस देखता है।

आप क्या कॉपी कर रहे हैं

यह स्टार्टर वही संपर्क फ़ील्ड fetch से भेजता है, इसलिए विज़िटर आपके पेज पर रहता है और एक छोटा स्टेटस पढ़ता है।

फ़ॉर्म में फिर भी action और मेथड POST है। यदि JavaScript नहीं चलता, तो ब्राउज़र सामान्य पोस्ट करता है।

यह फ़ॉलबैक पुराने ब्राउज़रों और उन लोगों के लिए ज़रूरी है जो स्क्रिप्ट रोकते हैं। आपको दो फ़ॉर्म बनाए रखने नहीं हैं।

मुख्य स्निपेट JSON भेजता है। यह Content-Type को application/json और Accept को application/json पर सेट करता है।

सफलता JSON में बूलियन success है। जब वह true होता है, स्निपेट प्रतिक्रिया संदेश दिखाता है, या छोटा धन्यवाद, और फ़ॉर्म रीसेट करता है।

जब वह false होता है, स्निपेट प्रतिक्रिया संदेश दिखाता है। Formgong वह संदेश _lang की भाषा में लिखता है।

JSON और FormData

JSON बॉडी में वे फ़ील्ड होने चाहिए जिन्हें आप भेजना चाहते हैं। स्निपेट में access_key, _lang, name, email, phone, message और botcheck शामिल हैं।

यदि आप बाद में Turnstile की टिप्पणी हटाते हैं, तो JSON पथ cf-turnstile-response भी कॉपी करता है जब उस फ़ील्ड में मान हो।

अतिरिक्त स्निपेट JSON की जगह FormData उपयोग करता है। ब्राउज़र कंटेंट टाइप सेट करता है, सीमा सहित। Content-Type खुद न सेट करें।

FormData फ़ॉर्म का हर फ़ील्ड उठाता है, Turnstile टोकन भी, यदि विजेट फ़ॉर्म के अंदर हो।

दोनों पथ Accept: application/json भेजते हैं। उस हेडर के बिना सामान्य ब्राउज़र फ़ॉर्म पोस्ट को धन्यवाद पेज मिलता है, JSON नहीं।

JSON बॉडी और multipart बॉडी दोनों एक साथ न भेजें। एक चुनें। दोनों स्निपेट विकल्प हैं, परतें नहीं।

स्पैम, Telegram और सीमाएँ

हनीपॉट का नाम botcheck रखें, खाली, स्क्रीन से बाहर, tabindex -1 के साथ। भरा हुआ हनीपॉट स्पैम के रूप में सहेजा जाता है और डिलीवर नहीं होता।

फ़ील्ड नाम छोटे रखें ताकि Telegram उन्हें मोटे अक्षरों में छाप सके। email का नाम लंबा वाक्य न बनाएँ।

एक्सेस कुंजी पेज में रहती है। उसे सर्वर सीक्रेट में ले जाना फ़ॉर्म को अधिक सुरक्षित नहीं बनाता, और इस स्निपेट का कोई सर्वर नहीं है।

मुफ़्त प्लान पर Telegram तुरंत आता है और ईमेल दैनिक सारांश है। इनबॉक्स सबमिशन 30 दिन रखता है।

मुफ़्त प्लान में महीने के 300 सबमिशन शामिल हैं। स्पैम सबमिशन उनमें से एक का उपयोग नहीं करता।

यह पूर्वावलोकन पोस्ट नहीं करता। स्निपेट अपनी साइट पर जोड़ें, फिर उस पेज से परीक्षण भेजें।

Formgong सेवा चलाता है। उत्पाद की सहायता के लिए support@formgong.com पर लिखें।

पूर्वावलोकन

फ़ॉर्म कोड

HTML
<form id="fg-ajax" action="https://formgong.com/submit" method="POST" style="position:relative">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="hi">
  <label>नाम <input type="text" name="name" autocomplete="name" required></label>
  <label>ईमेल <input type="email" name="email" autocomplete="email" required></label>
  <label>फ़ोन <input type="tel" name="phone" autocomplete="tel"></label>
  <label>संदेश <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>इस फ़ील्ड को खाली छोड़ें <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
वैकल्पिक। इस फ़ॉर्म के लिए Turnstile चालू करें, फिर ये टिप्पणी चिह्न हटाएँ और साइट कुंजी चिपकाएँ।
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="hi"></div>
-->
  <button type="submit">भेजें</button>
  <p data-status role="status"></p>
</form>
<script>
(function () {
  var form = document.getElementById("fg-ajax");
  if (!form) return;
  var status = form.querySelector("[data-status]");
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    var data = {
      access_key: form.access_key.value,
      _lang: form._lang.value,
      name: form.name.value,
      email: form.email.value,
      phone: form.phone.value,
      message: form.message.value,
      botcheck: form.botcheck.value
    };
    var token = form.querySelector('[name="cf-turnstile-response"]');
    if (token && token.value) data["cf-turnstile-response"] = token.value;
    var body = JSON.stringify(data);
    fetch("https://formgong.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: body
    }).then(function (res) { return res.json(); }).then(function (result) {
      if (status) status.textContent = result && result.success ? (result.message || "भेज दिया गया। धन्यवाद!") : ((result && result.message) || "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
      if (result && result.success) form.reset();
    }).catch(function () {
      if (status) status.textContent = "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।";
    });
  });
})();
</script>
JSON की जगह FormData वाला वही फ़ॉर्म
JSON की जगह FormData वाला वही फ़ॉर्म
<form id="fg-ajax" action="https://formgong.com/submit" method="POST" style="position:relative">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="hi">
  <label>नाम <input type="text" name="name" autocomplete="name" required></label>
  <label>ईमेल <input type="email" name="email" autocomplete="email" required></label>
  <label>फ़ोन <input type="tel" name="phone" autocomplete="tel"></label>
  <label>संदेश <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>इस फ़ील्ड को खाली छोड़ें <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
वैकल्पिक। इस फ़ॉर्म के लिए Turnstile चालू करें, फिर ये टिप्पणी चिह्न हटाएँ और साइट कुंजी चिपकाएँ।
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="hi"></div>
-->
  <button type="submit">भेजें</button>
  <p data-status role="status"></p>
</form>
<script>
(function () {
  var form = document.getElementById("fg-ajax");
  if (!form) return;
  var status = form.querySelector("[data-status]");
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    var body = new FormData(form);
    fetch("https://formgong.com/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: body
    }).then(function (res) { return res.json(); }).then(function (result) {
      if (status) status.textContent = result && result.success ? (result.message || "भेज दिया गया। धन्यवाद!") : ((result && result.message) || "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
      if (result && result.success) form.reset();
    }).catch(function () {
      if (status) status.textContent = "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।";
    });
  });
})();
</script>

सवाल और जवाब

फ़ॉर्म में अब भी action URL क्यों है?

ताकि JavaScript बंद होने पर भी पोस्ट काम करे। स्क्रिप्ट preventDefault केवल तभी कॉल करती है जब वह चलती है।

JSON भेजें या FormData?

दोनों मान्य हैं। JSON हर फ़ील्ड को स्पष्ट बताता है। FormData छोटा रहता है जब आप बाद में इनपुट जोड़ते हैं, क्योंकि वह फ़ॉर्म पढ़ता है।

स्टेटस पंक्ति खाली रहती है। क्या विफल हुआ?

जाँचें कि Accept application/json है, एक्सेस कुंजी आपके अपने फ़ॉर्म से मेल खाती है, और पेज http या https पर परोसा जा रहा है, स्थानीय फ़ाइल के रूप में नहीं।

क्या यह फ़ॉर्म फ़ाइल अपलोड कर सकता है?

इस स्टार्टर में नहीं। फ़ाइल फ़ील्ड के लिए अटैचमेंट चालू और मान्य Turnstile टोकन चाहिए। उस सेटअप के लिए डैशबोर्ड दस्तावेज़ देखें।