Formhook दस्तावेज़

अपनी API कुंजी फ़ॉर्म action में पेस्ट करें, अपने डैशबोर्ड में सबमिशन प्राप्त करें, हर नई एंट्री के लिए सिस्टम पुश सूचना प्राप्त करें।

क्विकस्टार्ट

1. साइन अप करें और अपना ईमेल सत्यापित करें।
2. अपने डैशबोर्ड में फ़ॉर्म बनाएँ। API कुंजी कॉपी करें (दिखती है fh_… जैसी)।
3. इसे अपने HTML फ़ॉर्म के action के रूप में पेस्ट करें। बस इतना ही।

HTML फ़ॉर्म (बिना JavaScript)

सबसे सरल एकीकरण। नेटिव फ़ॉर्म सबमिशन, सफलता पर वैकल्पिक रीडायरेक्ट।

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

  <!-- honeypot: bots fill this, humans don't see it -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px">

  <!-- where to send the user after success -->
  <input type="hidden" name="_redirect" value="https://example.com/thanks">

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

JavaScript fetch

await fetch("https://formhook.app/f/YOUR_API_KEY", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    email: "user@example.com",
    message: "Hello",
  }),
});

React घटक

"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 data = Object.fromEntries(new FormData(e.currentTarget));
    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 (status === "ok") return <p>Thanks - we'll be in touch.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button disabled={status === "sending"}>Send</button>
      {status === "error" && <p>Something went wrong. Try again.</p>}
    </form>
  );
}

WordPress

Formhook एक फ़ॉर्म बैकएंड है, इसलिए कोई भी WordPress फ़ॉर्म इसे डेटा भेज सकता है। अपनी सेटअप के अनुसार चुनें:

नेटिव HTML फ़ॉर्म

किसी पेज या ब्लॉक में एक सामान्य फ़ॉर्म रखें और उसकी action को अपने endpoint की ओर इंगित करें। ब्राउज़र सबमिशन स्वीकार करने के लिए अपनी साइट के origin को फ़ॉर्म के Allowed origins में जोड़ें।

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <input type="hidden" name="_redirect" value="https://your-site.com/thanks">
  <button type="submit">Send</button>
</form>

Contact Form 7

अपने थीम की functions.php से हर Contact Form 7 सबमिशन को आगे भेजें। चूँकि अनुरोध आपके सर्वर से आता है (कोई ब्राउज़र Origin नहीं), इसे X-Auth-Token से प्रमाणित करें:

// functions.php - forward Contact Form 7 submissions to Formhook
add_action('wpcf7_before_send_mail', function ($contact_form) {
  $submission = WPCF7_Submission::get_instance();
  if (!$submission) return;
  $data = $submission->get_posted_data();

  wp_remote_post('https://formhook.app/f/YOUR_API_KEY', [
    'headers' => [
      'Content-Type' => 'application/json',
      'X-Auth-Token' => 'YOUR_AUTH_TOKEN',
    ],
    'body'    => wp_json_encode($data),
    'timeout' => 10,
  ]);
});

Gravity Forms

अपने endpoint पर POST करने के लिए आधिकारिक Webhooks ऐड-ऑन का उपयोग करें, या उसी सर्वर-साइड टोकन के साथ functions.php से आगे भेजें:

// functions.php - forward Gravity Forms submissions to Formhook
add_action('gform_after_submission', function ($entry, $form) {
  $payload = [];
  foreach ($form['fields'] as $field) {
    $payload[$field->label] = rgar($entry, (string) $field->id);
  }

  wp_remote_post('https://formhook.app/f/YOUR_API_KEY', [
    'headers' => [
      'Content-Type' => 'application/json',
      'X-Auth-Token' => 'YOUR_AUTH_TOKEN',
    ],
    'body'    => wp_json_encode($payload),
    'timeout' => 10,
  ]);
}, 10, 2);

टोकन अपने फ़ॉर्म की Settings → Server request authentication के अंतर्गत जनरेट करें। ब्राउज़र और सर्वर अनुरोधों के अंतर के लिए Origins और authentication देखें।

सर्वर-से-सर्वर अनुरोध (curl, बैकएंड कोड) कोई Origin हेडर नहीं भेजते, इसलिए उन्हें X-Auth-Token हेडर से प्रमाणित होना चाहिए। अपने फ़ॉर्म के सेटिंग्स → सर्वर अनुरोध प्रमाणीकरण में एक टोकन जनरेट करें और इसे हर अनुरोध में भेजें - इसके बिना सर्वर अनुरोध अस्वीकार कर दिए जाते हैं।

curl -X POST https://formhook.app/f/YOUR_API_KEY \
  -H "Content-Type: application/json" \
  -H "X-Auth-Token: YOUR_AUTH_TOKEN" \
  -d '{"email":"test@example.com","message":"hi"}'

आरक्षित फ़ील्ड

ये तीन फ़ील्ड नाम संग्रहीत payload से हटा दिए जाते हैं:

_gotcha - honeypot। यहाँ कुछ भी ग़ैर-ख़ाली 200 सफलता लौटाता है लेकिन सबमिशन को चुपचाप गिरा देता है और आपका कोटा नहीं खाता।
_redirect - सफलता पर रीडायरेक्ट करने वाला URL (केवल form-encoded पोस्ट के लिए)। आपके फ़ॉर्म की allowlist में मौजूद origin पर होना चाहिए; अन्यथा अनदेखा।
cf-turnstile-response - Turnstile टोकन, सर्वर-साइड सत्यापित।

CORS

ब्राउज़र सबमिशन के लिए, सेटिंग्स में अपने फ़ॉर्म के अनुमत मूल में मूल (स्कीम + होस्ट, पथ नहीं) जोड़ें। खाली सूची ब्राउज़र-मूल अनुरोधों को पूरी तरह अस्वीकार कर देती है। सर्वर-से-सर्वर अनुरोधों (बिना Origin हेडर के, जैसे curl या बैकएंड) को फ़ॉर्म सेटिंग्स में जनरेट किया गया वैध X-Auth-Token हेडर भेजना होगा; टोकन के बिना वे अस्वीकार कर दिए जाते हैं।

Cloudflare Turnstile (वैकल्पिक)

अपने फ़ॉर्म की सेटिंग्स में Turnstile सक्षम करें, फिर अपने HTML में विजेट एम्बेड करें:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js"
        async defer></script>

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input name="email" type="email" required>
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITEKEY"></div>
  <button type="submit">Send</button>
</form>

फ़ाइल अपलोड (Pro और Studio)

फ़ॉर्म फ़ाइल अनुलग्नक स्वीकार कर सकते हैं। enctype="multipart/form-data" के साथ सबमिट करें; प्रत्येक <input type="file"> फ़ील्ड ऑब्जेक्ट स्टोरेज में अपलोड हो जाता है और डैशबोर्ड में सबमिशन से जुड़ जाता है। फ़ाइलें डैशबोर्ड से छोटी TTL वाली साइन की गई URL से डाउनलोड होती हैं; कुछ भी सार्वजनिक रूप से सुलभ नहीं है।

<!-- enctype is the important bit -->
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST" enctype="multipart/form-data">
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>

  <!-- one or more file inputs; same field name = multiple files -->
  <input name="attachment" type="file">

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

प्रति-फ़ाइल सीमा: 10 MB। प्रति-खाता स्टोरेज: Pro पर 1 GB, Studio पर 10 GB। सॉफ्ट-फेल प्रतिक्रियाएँ: {ok: true, warnings: ["file_too_large"]} जब कोई एकल फ़ाइल प्रति-फ़ाइल सीमा से अधिक हो, ["storage_full"] जब खाता अपनी सीमा पर पहुँच जाए, ["files_not_configured"] यदि ऑपरेटर ने ऑब्जेक्ट स्टोरेज प्रावधान नहीं किया। हर स्थिति में टेक्स्ट सबमिशन फिर भी सहेजा जाता है।

Studio: क्लाइंट फ़ॉर्म प्रावधान और हस्तांतरण

Studio खाते क्लाइंट के लिए फ़ॉर्म बनाकर सौंप सकते हैं। स्टूडियो स्वामित्व रखते हुए कॉन्फ़िगर और परीक्षण करता है; हस्तांतरण के बाद क्लाइंट फ़ॉर्म और इसके सबमिशन का स्वामी होता है, और स्टूडियो केवल मेटाडेटा देखता है।

नया फ़ॉर्म पर वैकल्पिक क्लाइंट ईमेल फ़ील्ड भरें। फ़ॉर्म क्लाइंट फ़ॉर्म के रूप में चिह्नित होता है (प्रायोजन रिकॉर्ड), लेकिन अभी भी आप ही स्वामी हैं।
फ़ॉर्म को सामान्य रूप से कॉन्फ़िगर और परीक्षण करें - परीक्षण के दौरान सबमिशन आपके डैशबोर्ड में आते हैं।
तैयार होने पर, फ़ॉर्म सेटिंग्स → क्लाइंट हस्तांतरण अनुभाग खोलें और आमंत्रण भेजें। प्रतीक्षा के दौरान फ़ॉर्म सक्रिय रहता है और सबमिशन स्वीकार करता रहता है।
आपके क्लाइंट को ईमेल लिंक मिलता है, साइन अप करते हैं (टोकन के स्वामित्व से ईमेल ऑटो-वेरिफाई होता है) और दावा करें पर क्लिक करते हैं। उस क्षण से सबमिशन उनके डैशबोर्ड में जाने लगते हैं।

दावे के बाद, आप फ़ॉर्म को अपने क्लाइंट कंसोल में स्थिति + मासिक संख्या के साथ देखते हैं। अब आप सबमिशन सामग्री या अनुलग्नक नहीं देखते - यह GDPR सीमा है जो आपको अपने क्लाइंट्स की डेटा चेन से बाहर रखती है। सबमिशन फिर भी आपके Studio कैप पर गिने जाते हैं (बिलिंग ऊपर रोल होती है); क्लाइंट स्वयं बिना कुछ तोड़े मुफ़्त पर रह सकते हैं।

सबमिशन आयात करें

किसी फ़ॉर्म में JSON फ़ाइल से सबमिशन थोक में आयात करें - फ़ॉर्म को अपने डैशबोर्ड में खोलें, आयात करें पर क्लिक करें और इस संरचना वाली फ़ाइल अपलोड करें:

{
  "schemaVersion": 1,
  "submissions": [
    {
      "payload": { "email": "ada@example.com", "message": "Hello" },
      "createdAt": "2025-01-02T15:04:05Z"
    }
  ]
}

शीर्ष स्तर प्रविष्टियों का एक array हो सकता है या submissions array वाला एक object। प्रत्येक प्रविष्टि में एक payload object होना चाहिए; createdAt (ISO-8601) वैकल्पिक है और मौजूद होने पर संरक्षित रहता है। आयातित सबमिशन पढ़े हुए के रूप में चिह्नित होते हैं, कभी कोई सूचना या webhook ट्रिगर नहीं करते, और प्रति फ़ाइल 5,000 तक सीमित हैं (अधिकतम 5 MB)।

रेट लिमिट और कोटा

सभी फ़ॉर्म पर प्रति-IP: 10 अनुरोध/मिनट → 429 के साथ Retry-After।
प्रति-फ़ॉर्म: 60 अनुरोध/मिनट → 429।
बॉडी आकार सीमा: 64 KB → 413।
मुफ़्त स्तर मासिक कोटा: रोलिंग 30-दिन विंडो में 250 सबमिशन। कोटा से अधिक होने पर भी 200 लौटाता है, बॉडी में warnings: ["over_quota"] के साथ - सबमिशन कभी चुपचाप नहीं छोड़े जाते।

त्रुटि प्रतिक्रियाएँ

HTTP	कोड	अर्थ
200	ok	सफलता
302	-	`_redirect` URL पर रीडायरेक्ट
400	invalid_body	ख़राब JSON / असमर्थित content-type
403	origin_not_allowed	CORS allowlist बेमेल
403	turnstile_failed	Turnstile टोकन गुम/अमान्य
403	account_suspended	फ़ॉर्म स्वामी निलंबित
404	form_not_found	अज्ञात api_key
413	body_too_large	बॉडी > 64 KB
429	rate_limited	Retry-After हेडर शामिल
500	internal_error	पुनः प्रयास करें या रिपोर्ट करें

पुश सूचनाएँ (आपके लिए, फ़ॉर्म स्वामी)

अपना डैशबोर्ड खोलें और सूचनाएँ सक्षम करें पर क्लिक करें - आपका ब्राउज़र अनुमति माँगेगा, फिर हर नया सबमिशन सिस्टम सूचना ट्रिगर करता है, टैब बंद होने पर भी। iOS पर पहले Formhook को अपने होम स्क्रीन पर इंस्टॉल करें (Safari 16.4+)।