गाइड
Remix कॉन्टैक्ट फ़ॉर्म (कोई बैकएंड नहीं चाहिए)
Remix सर्वर रूट्स के आसपास बना है, लेकिन कॉन्टैक्ट फ़ॉर्म को एक होने की ज़रूरत नहीं है। आप ब्राउज़र से सीधे Formhook को पोस्ट कर सकते हैं सादे फ़ॉर्म action का उपयोग करके - या, यदि आप Remix की प्रगतिशील-संवर्धन कहानी चाहते हैं, सबमिशन स्थिति को प्रबंधित करने के लिए useFetcher का उपयोग करें।
सादा 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>या Remix में fetch से सबमिट करें
इस संस्करण का उपयोग करें यदि आप पूर्ण पेज रीलोड के बिना क्लाइंट-साइड सफलता/त्रुटि अवस्थाएँ चाहते हैं।
// app/routes/contact.tsx
import { useFetcher } from "@remix-run/react";
export default function Contact() {
const fetcher = useFetcher();
const status = fetcher.state === "submitting" ? "sending" : fetcher.data?.ok ? "ok" : "idle";
if (status === "ok") return <p>Thanks - we'll be in touch.</p>;
return (
<fetcher.Form
method="post"
action="https://formhook.app/f/YOUR_API_KEY"
encType="application/x-www-form-urlencoded"
>
<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>
</fetcher.Form>
);
}यह कैसे काम करता है
सादा फ़ॉर्म स्निपेट मानक HTML फ़ॉर्म के रूप में काम करता है - Remix का <Form> सबमिशन को Remix action पर रूट करेगा, लेकिन action को formhook.app/f/YOUR_API_KEY पर इंगित करना Remix को पूरी तरह बायपास करता है और डेटा सीधे Formhook को भेजता है। useFetcher संस्करण Remix की प्रगतिशील संवर्धन को बरकरार रखता है जबकि बाहरी रूप से POST करता है: ब्राउज़र XHR सबमिशन करता है, और आपको अपनी UI चलाने के लिए fetcher.state मिलता है।
आगे क्या होता है
- सबमिशन एक सेकंड के भीतर आपके Formhook डैशबोर्ड में आता है।
- हर सक्षम डिवाइस पर पुश सूचना बजती है।
- डैशबोर्ड से सीधे उत्तर दें (Pro और इससे ऊपर) - आपकी Remix ऐप में कोई Resend/SendGrid एकीकरण आवश्यक नहीं।
आज ही अपना Remix कॉन्टैक्ट फ़ॉर्म लॉन्च करें।
मुफ़्त साइन अप करें, फ़ॉर्म बनाएँ, API कुंजी पेस्ट करें। पाँच मिनट।
मुफ़्त में शुरू करेंमुफ़्त स्तर: 5 फ़ॉर्म · 250 सबमिशन/माह · क्रेडिट कार्ड नहीं चाहिए।
Remix कॉन्टैक्ट फ़ॉर्म - FAQ
- क्या मुझे Remix action function लिखना चाहिए?
- नहीं। फ़ॉर्म action को formhook.app पर इंगित करना Remix रूटिंग को पूरी तरह बायपास करता है। यदि आप लॉगिंग या payload शेपिंग के लिए Remix action के माध्यम से प्रॉक्सी पसंद करते हैं, आप कर सकते हैं - लेकिन यह आवश्यक नहीं है।
- क्या useFetcher तब भी काम करेगा जब action किसी अलग origin पर हो?
- हाँ। useFetcher हुड के तहत fetch का उपयोग करता है, इसलिए cross-origin अनुरोध तब तक काम करते हैं जब तक आपके Formhook फ़ॉर्म की अनुमत मूल सूची में आपकी Remix ऐप की origin शामिल हो।
- क्या यह Remix के `unstable_singleFetch` या React Router 7 के साथ काम करता है?
- हाँ - फ़ॉर्म सबमिशन सीधे Formhook को जाता है, इसलिए यह Remix के डेटा-लोडिंग या रूटिंग परिवर्तनों से अप्रभावित है।
अन्य फ़्रेमवर्क के लिए गाइड
Migrating from Formspree? See how Formhook compares.