गाइड

Astro कॉन्टैक्ट फ़ॉर्म (कोई बैकएंड नहीं चाहिए)

Astro डिफ़ॉल्ट रूप से स्थिर HTML में रेंडर करता है, जिसका अर्थ है कि एक Astro कॉन्टैक्ट फ़ॉर्म बस सही action एट्रिब्यूट के साथ एक सादा HTML फ़ॉर्म है। आपको सर्वर एंडपॉइंट या Astro एकीकरण की आवश्यकता नहीं है - स्निपेट को .astro पेज में पेस्ट करें और हो गया।

स्निपेट

contact.Astro

---
// src/pages/contact.astro
---

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

यह कैसे काम करता है

क्योंकि Astro डिफ़ॉल्ट रूप से स्थिर HTML डिलीवर करता है, क्लाइंट-साइड वायरिंग के लिए कुछ नहीं है। फ़ॉर्म का action सीधे formhook.app/f/YOUR_API_KEY को POST करता है, जहाँ YOUR_API_KEY आपके Formhook डैशबोर्ड में फ़ॉर्म सेटिंग्स से आती है। _gotcha फ़ील्ड एक हनीपॉट है - बॉट्स इसे भरते हैं, मनुष्य इसे नहीं देखते, और उसमें सामग्री वाला कुछ भी चुपचाप गिरा दिया जाता है। _redirect फ़ील्ड सफल POST के बाद उपयोगकर्ताओं को धन्यवाद पेज पर भेजता है, और URL आपकी अनुमत मूल सूची के विरुद्ध सत्यापित होता है।

सबमिट के बाद धन्यवाद पेज दिखाएँ

स्टैटिक Astro फ़ॉर्म सबमिट होते ही पेज छोड़ देता है, इसलिए src/pages/thanks.astro जैसा एक पेज बनाएँ और छिपे हुए _redirect इनपुट को उसकी ओर इंगित करें। पूरा URL इस्तेमाल करें, जैसे https://example.com/thanks। मान एक पूर्ण URL होना चाहिए जिसका origin फ़ॉर्म के अनुमत origin में हो; वरना Formhook उसे अनदेखा कर देता है और विज़िटर को JSON जवाब दिखता है। अगर आपने astro.config.mjs में site सेट किया है, तो मान new URL("/thanks", Astro.site) से बना सकते हैं।

पेज छोड़े बिना नतीजा दिखाएँ

विज़िटर को पेज पर ही रखने के लिए कॉम्पोनेंट में एक छोटा <script> जोड़ें जो submit इवेंट को रोके, फ़ील्ड को fetch से JSON के रूप में भेजे, और स्टेटस एलिमेंट में संदेश लिखे। Astro इस स्क्रिप्ट को जैसा है वैसा ब्राउज़र को भेजता है, इसलिए किसी फ़्रेमवर्क या island की ज़रूरत नहीं। यह पैटर्न Next.js गाइड में दिखाया गया है और सुलभ स्टेटस संदेशों के साथ AJAX फ़ॉर्म सबमिशन में समझाया गया है। JSON सबमिशन _redirect का इस्तेमाल नहीं करते।

डेवलपमेंट, प्रीव्यू और प्रोडक्शन के लिए अनुमत origin

जिन-जिन origin से फ़ॉर्म परोसा जाता है, सबको अनुमत origin में जोड़ें, स्कीम, होस्ट और पोर्ट बिल्कुल सटीक रखते हुए: astro dev के लिए http://localhost:4321, प्रोडक्शन डोमेन https:// के साथ, और आपके होस्ट का प्रीव्यू डोमेन अगर वहाँ टेस्ट करते हैं। अगर सबमिशन origin_not_allowed से विफल हो, तो सबसे पहले यही सूची देखें।

यही सेटअप Cloudflare Pages, GitHub Pages, Netlify और Vercel पर भी काम करता है, क्योंकि ब्राउज़र सीधे Formhook को पोस्ट करता है और आपके होस्ट को सबमिशन दिखता ही नहीं।

Astro एंडपॉइंट से इस्तेमाल करना

स्टैटिक पेजों को और कुछ नहीं चाहिए। अगर आपकी साइट सर्वर या हाइब्रिड मोड में चलती है और आप सबमिशन को एंडपॉइंट या Astro action से भेजना चाहते हैं, तो सर्वर कोड से Formhook को X-Auth-Token हेडर के साथ कॉल करें, जिसे आप फ़ॉर्म की सेटिंग्स में बनाते हैं और सिर्फ़ सर्वर वाले पर्यावरण चर में रखते हैं। सर्वर अनुरोधों में Origin हेडर नहीं होता, इसलिए इस टोकन के बिना वे अस्वीकार हो जाते हैं। विवरण डॉक्स में हैं।

स्पैम और गोपनीयता

छिपा हुआ _gotcha फ़ील्ड रखें: बॉट इसे भरते हैं और ऐसे सबमिशन चुपचाप छोड़ दिए जाते हैं। रेट लिमिट प्रति-IP और प्रति-फ़ॉर्म लागू होती हैं, और Cloudflare Turnstile डैशबोर्ड में हर फ़ॉर्म का अलग स्विच है; यह गाइड विकल्पों की तुलना करता है। EU के विज़िटरों के लिए फ़ॉर्म के नीचे एक छोटा नोटिस जोड़ें। GDPR-अनुपालक कॉन्टैक्ट फ़ॉर्म गाइड में अपनाने लायक शब्दावली है।

आगे क्या होता है

सबमिशन एक सेकंड के भीतर आपके Formhook डैशबोर्ड में दिखाई देता है।
हर सक्षम डिवाइस पर पुश सूचना बजती है।
अपने वास्तविक ईमेल पते को प्रकट किए बिना डैशबोर्ड से सीधे उत्तर दें (Pro और इससे ऊपर)।

आज ही अपना Astro कॉन्टैक्ट फ़ॉर्म लॉन्च करें।

मुफ़्त साइन अप करें, फ़ॉर्म बनाएँ, API कुंजी पेस्ट करें। पाँच मिनट।

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

मुफ़्त स्तर: 5 फ़ॉर्म · 250 सबमिशन/माह · क्रेडिट कार्ड नहीं चाहिए।

Astro कॉन्टैक्ट फ़ॉर्म - FAQ

क्या मुझे Astro एकीकरण या सर्वर एडैप्टर की आवश्यकता है?

नहीं। फ़ॉर्म सीधे Formhook को POST करता है, इसलिए यह डिफ़ॉल्ट स्थिर Astro आउटपुट के साथ काम करता है। कोई SSR मोड नहीं, @astrojs/node एडैप्टर आवश्यक नहीं।

क्या मेरे विभिन्न Astro पेजों पर कई कॉन्टैक्ट फ़ॉर्म हो सकते हैं?

हाँ। हर उपयोग-मामले के लिए एक Formhook फ़ॉर्म बनाएँ - कॉन्टैक्ट, करियर, न्यूज़लेटर - और हर फ़ॉर्म का action सही .astro पेज में पेस्ट करें। मुफ़्त स्तर पाँच फ़ॉर्म कवर करता है।

सबमिशन के बाद धन्यवाद पेज कैसे दिखाऊँ?

अपने Astro धन्यवाद रूट की ओर इशारा करते हुए एक छिपा हुआ _redirect इनपुट जोड़ें। URL फ़ॉर्म की अनुमत मूल सूची में होना चाहिए। या, यदि आप पेज रीलोड के बिना इनलाइन सफलता दिखाना चाहते हैं, तो Next.js या SvelteKit गाइड में दिखाए गए fetch पैटर्न का उपयोग करें।

अन्य फ़्रेमवर्क के लिए गाइड

Migrating from Formspree? See how Formhook compares.