गाइड
Next.js कॉन्टैक्ट फ़ॉर्म (कोई बैकएंड नहीं चाहिए)
Next.js को अपना फ़ॉर्म रिसीवर नहीं चाहिए। आप उसी सादे HTML फ़ॉर्म action को किसी भी Server Component में डाल सकते हैं, या - यदि आप क्लाइंट-साइड सफलता और त्रुटि अवस्थाएँ चाहते हैं - fetch के साथ एक छोटे Client Component का उपयोग कर सकते हैं। दोनों सीधे Formhook को POST करते हैं।
सादा HTML फ़ॉर्म उपयोग करें
आपको API रूट की ज़रूरत नहीं है। फ़ॉर्म सीधे Formhook को POST करता है, और आपके फ़्रेमवर्क को सबमिशन छूना ही नहीं पड़ता।
<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>
<!-- honeypot: bots fill this; humans don't see it -->
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
<!-- optional: send users to a thank-you page after a native POST -->
<input type="hidden" name="_redirect" value="https://example.com/thanks" />
<button type="submit">Send</button>
</form>या Next.js में fetch से सबमिट करें
इस संस्करण का उपयोग करें यदि आप पूर्ण पेज रीलोड के बिना क्लाइंट-साइड सफलता/त्रुटि अवस्थाएँ चाहते हैं।
"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState<"idle" | "sending" | "ok" | "error">("idle");
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setStatus("sending");
const form = e.currentTarget;
const data = Object.fromEntries(new FormData(form));
const res = await fetch("https://formhook.app/f/YOUR_API_KEY", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
setStatus(res.ok ? "ok" : "error");
if (res.ok) form.reset();
}
if (status === "ok") return <p>Thanks - we'll be in touch.</p>;
return (
<form onSubmit={onSubmit}>
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required />
<input type="text" name="_gotcha" tabIndex={-1} hidden />
<button type="submit" disabled={status === "sending"}>
{status === "sending" ? "Sending…" : "Send"}
</button>
{status === "error" && <p>Something went wrong. Please try again.</p>}
</form>
);
}यह कैसे काम करता है
सादा फ़ॉर्म action किसी भी Next.js पेज या लेआउट में काम करता है, Server Components सहित। कोई app/api/contact/route.ts नहीं, कोई Server Action नहीं, कोई middleware नहीं। यदि आप सफलता और त्रुटि अवस्थाओं के साथ क्लाइंट-साइड UX चाहते हैं, तो दूसरा स्निपेट विहित पैटर्न दिखाता है: "use client", useState, onSubmit, formhook.app/f/YOUR_API_KEY को fetch। हनीपॉट (_gotcha) और वैकल्पिक _redirect HTML गाइड के समान विशेष फ़ील्ड हैं।
सादा फ़ॉर्म या fetch: कौन-सा इस्तेमाल करें?
अगर आप बिना JavaScript के काम चलाना चाहते हैं तो सादा action फ़ॉर्म इस्तेमाल करें: यह Server Component में चलता है और hydration विफल होने पर भी काम करता रहता है। इसकी क़ीमत यह है कि सबमिट पर ब्राउज़र आपका पेज छोड़ देता है, इसलिए अपने किसी अनुमत origin का पूरा URL देकर एक छिपा हुआ _redirect इनपुट जोड़ें, जैसे https://example.com/thanks। उसके बिना विज़िटर को सीधा JSON जवाब दिखता है।
जब सफलता या त्रुटि का संदेश उसी जगह दिखाना हो और भेजते समय बटन अक्षम रहे, तब fetch वाला संस्करण इस्तेमाल करें। सादे फ़ॉर्म के पोस्ट रीडायरेक्ट कर सकते हैं; JSON fetch पोस्ट को JSON जवाब मिलता है, इसलिए वहाँ _redirect अनदेखा हो जाता है। विस्तार से AJAX फ़ॉर्म सबमिशन में पढ़ें।
लोकल डेवलपमेंट में 403 origin_not_allowed ठीक करें
Formhook ब्राउज़र सबमिशन सिर्फ़ उन origin से स्वीकार करता है जो आपके फ़ॉर्म के अनुमत origin में दर्ज हैं, और मिलान सटीक होता है: स्कीम, होस्ट और पोर्ट। http://localhost:3000, https://example.com और https://www.example.com तीन अलग origin हैं। अपना डेवलपमेंट URL, प्रोडक्शन डोमेन और जिस प्रीव्यू डोमेन पर आप टेस्ट करते हैं, उसे जोड़ें - बिना पाथ और बिना अंत के स्लैश के। ख़ाली सूची हर ब्राउज़र अनुरोध को अस्वीकार कर देती है।
अगर सबमिशन फिर भी विफल हो, तो रिस्पॉन्स बॉडी कारण बताती है: origin_not_allowed (403) का मतलब है कि origin सूची में नहीं है, form_not_found (404) का मतलब है API कुंजी ग़लत है, और rate_limited (429) का मतलब है Retry-After में बताए सेकंड रुकना। ज़्यादा जानकारी कॉन्टैक्ट फ़ॉर्म काम नहीं कर रहा? में है।
API कुंजी कहाँ रखें
कुंजी किसी भी तरह आपके HTML या JavaScript बंडल में पहुँच जाती है, इसलिए इसे गोपनीय रहस्य नहीं, सार्वजनिक पहचानकर्ता मानें। फिर भी NEXT_PUBLIC_FORMHOOK_KEY पर्यावरण चर सुविधाजनक है ताकि डेवलपमेंट में एक फ़ॉर्म और प्रोडक्शन में दूसरा इस्तेमाल हो सके।
फ़ॉर्म की सुरक्षा Formhook की ओर होती है: अनुमत origin की सूची, _gotcha हनीपॉट, प्रति-IP और प्रति-फ़ॉर्म रेट लिमिट, और वैकल्पिक Cloudflare Turnstile। origin सूची दूसरी वेबसाइटों को ब्राउज़र से पोस्ट करने से रोकती है, पर वह प्रमाणीकरण नहीं है, क्योंकि कोई स्क्रिप्ट कोई भी Origin हेडर भेज सकती है। बॉट्स के लिए स्पैम परतों पर भरोसा करें; कॉन्टैक्ट फ़ॉर्म के लिए स्पैम सुरक्षा उनकी तुलना करता है।
इसकी जगह Server Action से भेजना
अगर आप सर्वर-साइड डेटा जोड़ना या भेजने से पहले जाँच करना चाहते हैं, तो Formhook को Server Action या route handler से कॉल करें। सर्वर अनुरोध Origin हेडर नहीं भेजते, इसलिए उनके साथ X-Auth-Token हेडर होना चाहिए, जिसे आप अपने फ़ॉर्म की सेटिंग्स में बनाते हैं। इस टोकन को सिर्फ़ सर्वर वाले पर्यावरण चर में रखें, Client Component में कभी नहीं। ज़्यादातर कॉन्टैक्ट फ़ॉर्म को इसकी ज़रूरत नहीं पड़ती, इसीलिए ऊपर के स्निपेट इसे छोड़ देते हैं। पूरा अनुरोध प्रारूप डॉक्स में है।
लाइव होने से पहले
- प्रोडक्शन origin को
https://के साथ अनुमत origin में जोड़ें। _gotchaहनीपॉट फ़ील्ड रखें और तय करें कि Turnstile चालू करना है या नहीं।- एक टेस्ट सबमिशन भेजें और पक्का करें कि वह डैशबोर्ड में और पुश नोटिफ़िकेशन के रूप में दिखता है।
- फ़ॉर्म के नीचे एक छोटा गोपनीयता नोटिस जोड़ें। GDPR-अनुपालक कॉन्टैक्ट फ़ॉर्म गाइड में अपनाने लायक शब्दावली है।
आगे क्या होता है
- सबमिशन एक सेकंड के भीतर आपके Formhook डैशबोर्ड में दिखाई देता है।
- हर सक्षम डिवाइस पर पुश सूचना बजती है।
- डैशबोर्ड से सीधे उत्तर दें (Pro और इससे ऊपर) - क्लाइंट वर्क के लिए उपयोगी जहाँ हर प्रोजेक्ट का अपना कॉन्टैक्ट रूट होता है।
आज ही अपना Next.js कॉन्टैक्ट फ़ॉर्म लॉन्च करें।
मुफ़्त साइन अप करें, फ़ॉर्म बनाएँ, API कुंजी पेस्ट करें। पाँच मिनट।
मुफ़्त में शुरू करेंमुफ़्त स्तर: 5 फ़ॉर्म · 250 सबमिशन/माह · क्रेडिट कार्ड नहीं चाहिए।
Next.js कॉन्टैक्ट फ़ॉर्म - FAQ
क्या मुझे API रूट या Server Action जोड़ने की आवश्यकता है?
क्या मैं इसे Server Component में उपयोग कर सकता हूँ?
रेट-लिमिट मिडलवेयर लिखे बिना स्पैम कैसे संभालूँ?
अन्य फ़्रेमवर्क के लिए गाइड
Migrating from Formspree? See how Formhook compares.