Webflow का contact form देखने में बहुत अच्छा लगता है, लेकिन Webflow केवल आपको submission का डेटा ईमेल करता है - यह entries को किसी database में store नहीं करता, आपके CRM से connect नहीं होता, और कोई custom logic trigger नहीं करता। अगर आपको basic ईमेल notification से ज़्यादा कुछ चाहिए, तो आपको अपने Webflow form submissions को किसी external service के ज़रिए route करना होगा। अच्छी बात यह है कि यह काम बिना एक भी line का backend code लिखे किया जा सकता है।
विषय सूची
Webflow डिफ़ॉल्ट रूप से क्या देता है
Webflow का built-in form handler तीन काम करता है: साइट मालिक को ईमेल notification भेजता है, एक success message दिखाता है, और Webflow के डैशबोर्ड में submissions को log करता है (paid plans पर)। यह छोटी साइटों के basic contact forms के लिए ठीक है, लेकिन जैसे ही आपको नीचे दी गई किसी भी ज़रूरत पड़ती है, यह काम करना बंद कर देता है:
- फॉर्म भरने वाले व्यक्ति को auto-responder भेजना
- Submissions को किसी specific टीम के inbox या CRM में forward करना
- Conditional logic (जैसे, product interest के आधार पर leads को route करना)
- Webflow के basic honeypot से आगे spam filtering
- Timestamps और retries के साथ एक भरोसेमंद delivery record
ये सभी चीज़ें नेटिव रूप से उपलब्ध नहीं हैं। आपको एक external layer की ज़रूरत है, और इसे जोड़ने के तीन व्यावहारिक तरीके हैं।
नेटिव Integrations - Zapier और Make
Webflow का Zapier और Make (पहले Integromat) के साथ सीधा integration है। जब कोई नया form submission आता है, तो trigger fire होता है और आप कोई भी action chain कर सकते हैं: Google Sheets में row जोड़ें, HubSpot contact बनाएं, Slack message भेजें, इत्यादि।
यह वह no-code रास्ता है जिसे ज़्यादातर designers पहले अपनाते हैं। Setup इस प्रकार दिखता है:
- Webflow में, Project Settings > Integrations पर जाएं और अपना Zapier account connect करें।
- Zapier में, trigger के रूप में Webflow - New Form Submission के साथ एक नया Zap बनाएं।
- नाम से specific form चुनें।
- अपना action step जोड़ें (Gmail, Slack, Airtable, आदि)।
- एक live submission से test करें और Zap चालू करें।
Make जटिल workflows के लिए सस्ता है, लेकिन दोनों platforms एक dependency जोड़ते हैं: अगर Zapier या Make बंद हो जाए या आपका account किसी limit तक पहुंच जाए, तो submissions चुपचाप fail हो जाती हैं या queue में लग जाती हैं।
Webflow Webhook का उपयोग
Webflow webhook एक ज़्यादा सीधा रास्ता है। जब भी कोई form submit होता है, Webflow आपके द्वारा निर्दिष्ट URL पर एक HTTP POST भेजता है। आप receiving endpoint को नियंत्रित करते हैं, इसलिए आप payload के साथ कुछ भी कर सकते हैं।
इसे सेट करने के लिए:
- Webflow में Project Settings > Integrations > Webhooks पर जाएं।
- Add Webhook पर क्लिक करें, और Form Submission trigger चुनें।
- अपनी receiving service का endpoint URL paste करें।
- सेव करें और एक real submission से test करें।
Webflow जो payload भेजता है वह एक JSON object है जिसमें सभी field values, form का नाम, और साइट का metadata होता है। एक सामान्य payload इस तरह दिखता है:
{
"name": "Contact Form",
"site": "my-webflow-site",
"data": {
"Name": "Jane Smith",
"Email": "[email protected]",
"Message": "Hi, I'd like a quote."
},
"submittedAt": "2024-11-15T10:22:00Z"
}
इसमें एक समस्या है: आपको उस webhook को receive करने के लिए कुछ चाहिए। विकल्पों में एक छोटा Cloudflare Worker , एक Pipedream workflow, या एक dedicated form backend शामिल हैं। अपना खुद का receiver लिखना ठीक वही "custom backend" समस्या है जिससे यह लेख आपको बचाने की कोशिश कर रहा है। यहीं पर form-to-email services सबसे साफ समाधान बन जाती हैं।
Form Endpoint को Form Service से बदलें
Webflow के form handler का उपयोग करने के बजाय, आप अपने form के
action
attribute को किसी third-party form service पर point कर सकते हैं। वह service POST receive करती है, उसे validate करती है, spam filter करती है, और आपको results ईमेल करती है। आपकी तरफ से कोई backend ज़रूरी नहीं।
Webflow में workflow इस प्रकार है:
- Webflow Designer में, अपना form element चुनें।
-
Form Settings
पैनल में,
Action
field को अपने form service endpoint URL पर सेट करें (जैसे,
https://sendform.net/!your-form-id)। - Method को POST पर सेट करें।
-
सुनिश्चित करें कि प्रत्येक input में
nameattribute हो - Webflow इन्हें डिफ़ॉल्ट रूप से सेट करता है। - साइट publish करें और एक submission test करें।
यह तरीका Webflow के form handler को पूरी तरह bypass करता है। Submission सीधे visitor के browser से form service तक जाती है। आपको ईमेल मिलती है, service retries और spam संभालती है, और Webflow केवल UI layer बना रहता है।
यही pattern किसी भी static या no-code साइट के लिए काम करता है। अगर आप GitHub Pages या Cloudflare Pages पर भी hosting कर रहे हैं, तो working contact forms के साथ static website को मुफ़्त में host करने वाला लेख बिल्कुल यही तरीका cover करता है।
Sendform बनाम अन्य विकल्प
कई form services Webflow के साथ काम करती हैं। यहां बताया गया है कि contact form setup के लिए वास्तव में मायने रखने वाली चीज़ों पर मुख्य विकल्प कैसे तुलना करते हैं:
| सेवा | निःशुल्क स्तर | Setup की जटिलता | Custom Redirect | Spam Filtering | GDPR-अनुकूल |
|---|---|---|---|---|---|
| Sendform | हां | एक URL paste करें | हां | हां | हां |
| Formspree | 50 submissions/माह | Register करें + URL paste करें | केवल paid में | Basic (reCAPTCHA के लिए paid) | आंशिक |
| Netlify Forms | 100 submissions/माह | Netlify hosting आवश्यक | हां | हां | आंशिक |
| Zapier (webhook के ज़रिए) | 100 tasks/माह | Multi-step workflow | Manual | कोई built-in नहीं | Zap पर निर्भर |
| Basin | 100 submissions/माह | Register करें + URL paste करें | हां | हां | आंशिक |
Sendform कुछ ठोस कारणों से अलग खड़ा होता है जो table में फिट नहीं होते:
- बिल्कुल आसान setup: आपको पहले account बनाए बिना एक form endpoint URL मिल जाता है। इसे Webflow के Action field में paste करें और काम हो गया।
- डिफ़ॉल्ट रूप से कोई submission storage नहीं: Sendform डेटा ईमेल करता है और इसे अपने servers पर retain नहीं करता, जो GDPR compliance के लिए सही default है। Formspree जैसे competitors सभी submissions को अपने डैशबोर्ड में store करते हैं, जिसका मतलब है कि आपके users का डेटा किसी third-party server पर अनिश्चित काल तक रहता है।
- Developer-friendly लेकिन no-code में भी उपयोगी: Zapier के विपरीत, कोई workflow maintain नहीं करनी पड़ती। Netlify Forms के विपरीत, यह किसी specific hosting provider से बंधा नहीं है - यह Webflow, GitHub Pages, या किसी भी अन्य host के साथ काम करता है।
- ईमानदार निःशुल्क स्तर: कोई छुपी हुई "redirects unlock करने के लिए upgrade करें" वाली दीवार नहीं है जो अन्य services आपको paid plans की तरफ धकेलने के लिए इस्तेमाल करती हैं।
कौन सा तरीका चुनें?
सही उत्तर इस बात पर निर्भर करता है कि form submit होने के बाद आपको वास्तव में क्या चाहिए:
- केवल ईमेल notifications: Sendform उपयोग करें। endpoint URL को Webflow के Action field में paste करें, दो मिनट में काम हो गया।
- ईमेल + CRM या spreadsheet sync: ईमेल delivery के लिए Sendform उपयोग करें और वैकल्पिक रूप से incoming ईमेल से triggered एक Zapier step जोड़ें, या अपने plan पर उपलब्ध होने पर Sendform का webhook output उपयोग करें।
- जटिल multi-step automation: यहां Make या Zapier में Webflow webhook समझ में आता है, लेकिन paid tier के लिए बजट रखें।
- आप पहले से Netlify पर हैं: Netlify Forms simple cases के लिए ठीक है, लेकिन किसी भी active साइट पर आप जल्दी 100/माह की सीमा तक पहुंच जाएंगे।
Webflow contact forms की विशाल बहुमत के लिए - एक नाम, ईमेल, और message field जिसे भरोसेमंद तरीके से आपके inbox में पहुंचना हो - Sendform सबसे तेज़ और सबसे साफ रास्ता है। कोई backend नहीं, कोई monthly task limits नहीं जिन पर नज़र रखनी पड़े, और कोई submission data किसी third-party डैशबोर्ड में नहीं जो आप delete करना भूल गए।
बिना backend लिखे अपना Webflow contact form संभालें
Sendform आपको एक ready-made form endpoint देता है जिसे आप सीधे Webflow के Action field में paste कर सकते हैं - आपके Webflow form submissions तुरंत आपके inbox में पहुंचते हैं, spam filtering और GDPR-अनुकूल defaults के साथ।
Sendform मुफ़्त में आज़माएं →
जब आप Webflow के form Action को किसी external endpoint पर point करते हैं, तो Webflow की built-in success state अपने आप trigger नहीं होगी। ज़्यादातर form services इसे आपके द्वारा निर्दिष्ट thank-you page पर redirect करके handle करती हैं। Sendform में, आप अपनी form settings में एक redirect URL सेट करते हैं, ताकि submit करने के बाद visitors आपके custom confirmation page पर पहुंचें। वैकल्पिक रूप से, आप form submit event को intercept करने के लिए JavaScript उपयोग कर सकते हैं, fetch() के ज़रिए POST करें, और Webflow success state को manually दिखाएं।
हां। Project Settings > Integrations > Webhooks के अंतर्गत, आप एक webhook जोड़ सकते हैं जो हर नए form submission पर fire होता है। Webflow आपके निर्दिष्ट URL पर एक JSON POST भेजता है जिसमें सभी field values, form का नाम, और एक timestamp होता है। इसके लिए एक receiving endpoint की ज़रूरत होती है - एक serverless function, एक Pipedream workflow, या एक form service जो webhooks accept करती हो। Webhook feature Webflow के CMS और Business plans पर उपलब्ध है।
Zapier Webflow और आपके destination (ईमेल, CRM, आदि) के बीच बैठता है और एक workflow layer जोड़ता है। यह multi-step automation के लिए powerful है लेकिन 100 tasks प्रति माह से अधिक के लिए पैसे लगते हैं और एक failure point जोड़ता है। Sendform एक direct form endpoint है - submissions सीधे browser से Sendform तक जाती हैं, जो आपको तुरंत ईमेल करता है। कोई workflow maintain नहीं करनी, कोई task counter नहीं, और कोई Zap चुपचाप टूटने का खतरा नहीं। सीधे contact forms के लिए, Sendform setup में तेज़ और रोज़ाना ज़्यादा भरोसेमंद है।
यह service पर निर्भर करता है। जो services submissions को अपने database में store करती हैं (Formspree, Basin, Netlify Forms) वे data processor की तरह काम करती हैं, जिसका मतलब है कि आपको एक Data Processing Agreement की ज़रूरत है और आपको अपनी privacy policy में उनका उल्लेख करना होगा। Sendform को डिफ़ॉल्ट रूप से submission data को forward करने और retain न करने के लिए डिज़ाइन किया गया है, जो compliance का बोझ काफी कम करता है। चाहे आप कोई भी service उपयोग करें, आपको अपनी privacy policy अपडेट करनी चाहिए ताकि यह बताया जा सके कि contact form का डेटा कैसे handle और transmit किया जाता है।
हां, और आपके पास कुछ विकल्प हैं। Sendform सहित ज़्यादातर form services अपनी तरफ से built-in spam filtering शामिल करती हैं। आप एक honeypot field भी जोड़ सकते हैं - एक hidden input जिसे bots भरते हैं लेकिन real users नहीं - और receiving service उन submissions को ignore करती है जहां उस field में कोई value हो। अधिक traffic वाले forms के लिए, reCAPTCHA v3 या hCaptcha support करने वाली services एक extra layer देती हैं। Webflow का अपना spam filter केवल तब apply होता है जब आप Webflow के नेटिव form handler का उपयोग करते हैं, इसलिए external endpoint पर switch करने का मतलब है service के spam tools पर निर्भर रहना।
नहीं। form के Action attribute को किसी external URL पर point करना किसी भी Webflow plan पर काम करता है, जिसमें free Starter plan भी शामिल है, क्योंकि आप बस एक published page पर एक HTML attribute बदल रहे हैं। free plans पर restriction यह है कि Webflow का अपना form handling (डैशबोर्ड storage, Webflow के ज़रिए ईमेल notifications) के लिए एक site plan की ज़रूरत होती है। Sendform जैसी external service उपयोग करने से वह restriction पूरी तरह bypass हो जाती है - form बस आपके Webflow plan level की परवाह किए बिना Sendform के servers पर POST करता है।