कॉन्टैक्ट फ़ॉर्म की सर्वोत्तम प्रथाएँ जो वाक़ई कन्वर्ज़न बढ़ाती हैं

ज़्यादातर कॉन्टैक्ट फ़ॉर्म उलटे तरीक़े से डिज़ाइन किए जाते हैं: फ़ील्ड इसलिए जोड़े जाते हैं क्योंकि किसी मीटिंग में किसी को लगा कि यह "होना अच्छा रहेगा", न कि इसलिए कि संदेश पाने वाले व्यक्ति को कार्रवाई करने के लिए इसकी ज़रूरत है। जो फ़ॉर्म वाक़ई कन्वर्ज़न लाते हैं, वे उल्टे तरीक़े से बनाए जाते हैं - सिर्फ़ आवश्यक तक सीमित, फिर असली डिवाइसों पर और असली लोगों से, जो उन्हें तोड़ने की कोशिश करते हैं, परखे हुए।

आगे जो कुछ है वह कोई असाधारण बात नहीं है। ज़्यादातर वे चीज़ें हैं जिन्हें कोई चेकलिस्ट पकड़ लेती, अगर कोई उसे अपनाता।

जितना ज़रूरी लगे, उससे कम माँगें

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

अगर कोई फ़ील्ड वाक़ई अपनी जगह के लायक़ है - जैसे किसी सेल्स पूछताछ के लिए बजट की सीमा - तो सोचें कि क्या उसे अनिवार्य होना चाहिए। भ्रमित करने वाले लेबल या अस्पष्ट वैलिडेशन वाला अनिवार्य फ़ील्ड, वह अनिवार्य फ़ील्ड है जिस पर लोग फ़ॉर्म छोड़ देते हैं।

लेबल और वैलिडेशन जो सज़ा नहीं देते

प्लेसहोल्डर टेक्स्ट लेबल नहीं है। जैसे ही कोई फ़ील्ड में क्लिक करता है, यह ग़ायब हो जाता है, इसलिए जो भी बीच में बाधित होता है - जो ज़्यादातर लोगों के साथ ज़्यादातर समय होता है - वह यह जानने का एकमात्र सुराग़ खो देता है कि वह क्या भर रहा था। यह कई ब्राउज़रों में ऑटोफ़िल भी तोड़ता है, और स्क्रीन रीडर अक्सर इसे पूरी तरह छोड़ देते हैं। हर फ़ील्ड के लिए एक असली <label> एलिमेंट इस्तेमाल करें, जो इनपुट के ऊपर या बग़ल में हमेशा दिखे। प्लेसहोल्डर टेक्स्ट, अगर आप इसका इस्तेमाल करें भी, तो एक उदाहरण फ़ॉर्मैट के लिए हो ("jane@company.com"), निर्देश के लिए नहीं।

blur पर वैलिडेट करें - यानी जब कोई फ़ील्ड छोड़ता है - हर कीस्ट्रोक पर नहीं। जब कोई अभी तीन अक्षर ही टाइप कर पाया हो, तभी ईमेल को अमान्य बताना बस लोगों को आपकी एरर स्थितियों को नज़रअंदाज़ करना सिखाता है। एरर स्पष्ट और उसी फ़ील्ड से जुड़े होने चाहिए जिसका वे वर्णन करते हैं, न कि एक अकेला "कृपया फ़ॉर्म जाँचें" बैनर जो विज़िटर को ख़ुद ढूँढ़ने पर छोड़ दे।

मोबाइल को सही करें - यही आपके अधिकांश ट्रैफ़िक का स्रोत है

फ़ोन पर कॉन्टैक्ट फ़ॉर्म को बिना दोबारा बताए सही कीबोर्ड दिखाना चाहिए। यही काम type और inputmode का है: type="email" @ की-वाला कीबोर्ड लाता है, और inputmode="tel" फ़ोन नंबर के लिए न्यूमेरिक पैड दिखाता है। हर फ़ील्ड को मेल खाते autocomplete मान (autocomplete="email", autocomplete="name") से जोड़ें, ताकि ब्राउज़र पहले से मौजूद डेटा से उसे भरने का सुझाव दे सके - ख़ासकर मोबाइल पर, ऑटोफ़िल अक्सर भरे गए फ़ॉर्म और छोड़े गए फ़ॉर्म के बीच का फ़र्क़ होता है।

टैप टारगेट भी कीबोर्ड जितने ही मायने रखते हैं। जो इनपुट माउस कर्सर से क्लिक करना आरामदायक हो, वह अंगूठे से छूना वाक़ई मुश्किल हो सकता है - इसलिए इंटरैक्टिव एलिमेंट को पर्याप्त बड़ा और अच्छी दूरी पर रखें।

honeypot फ़ील्ड, बिना असली विज़िटर को सज़ा दिए

honeypot एक ऐसा फ़ॉर्म फ़ील्ड है जो इंसानों के लिए अदृश्य और बॉट्स के लिए अनदेखा करना मुश्किल है: एक विश्वसनीय-सा नाम वाला फ़ील्ड ("website" या "company") जिसे कोई स्क्रिप्टेड सबमिशन भर देता है और जिसे असली विज़िटर कभी देखता ही नहीं। ख़राब तरीक़े से बनाया गया honeypot ठीक उन्हीं लोगों को सज़ा देता है जिन्हें उसे बचाना था - display: none और type="hidden" दोनों को वे "सभ्य" बॉट फ़िल्टर कर देते हैं जो कंप्यूटेड CSS पढ़ते हैं, जबकि कुछ स्क्रीन रीडर और ब्राउज़र एक्सटेंशन छुपे फ़ील्ड को वाक़ई सामने ला देते हैं - जिसका मतलब है कि असिस्टिव तकनीक इस्तेमाल करने वाला असली विज़िटर उसे भर सकता है और चुपचाप स्पैम मानकर अस्वीकार कर दिया जा सकता है।

इसके बजाय इसे सही तरीक़े से छुपाएँ: display:none की जगह CSS से इसे स्क्रीन के बाहर रखें, इसे tabindex="-1" से चिह्नित करें ताकि कीबोर्ड नेविगेशन इसे छोड़ दे, और aria-hidden="true" से ताकि स्क्रीन रीडर इसे कभी न बोलें। इस तरह बना फ़ील्ड किसी भी असली विज़िटर के लिए अदृश्य होता है - चाहे कीबोर्ड हो, माउस हो या स्क्रीन रीडर - और फिर भी उन ग़ैर-परिष्कृत बॉट्स को पकड़ लेता है जो अधिकांश स्पैम के लिए ज़िम्मेदार होते हैं। Formhook का अपना स्पैम प्रोटेक्शन - honeypot के साथ रेट लिमिटिंग, और ज़रूरत पड़ने पर Turnstile - हर फ़ॉर्म पर डिफ़ॉल्ट रूप से चालू रहता है, लेकिन यह मार्कअप पैटर्न किसी भी बैकएंड के साथ अपनाने लायक़ है।

सफलता के बाद फ़ॉर्म को ख़ामोश न छोड़ें

बटन क्लिक हुआ, रिक्वेस्ट भेज दी गई - और फिर विज़िटर को क्या दिखता है? एक ऐसा फ़ॉर्म जो कुछ नहीं दिखाता, या किसी को बिना किसी संदर्भ वाले ख़ाली "धन्यवाद" पेज पर छोड़ देता है, वह टूटा हुआ ही लगता है, भले ही उसने काम कर दिया हो - एक से ज़्यादा विज़िटर ने फ़ॉर्म तीन बार सबमिट किया है क्योंकि किसी ने उन्हें बताया ही नहीं कि पहला प्रयास सफल रहा था। फ़ॉर्म की जगह इनलाइन पुष्टि दिखाएँ, या लोगों को एक असली धन्यवाद-स्थिति पर भेजें जो बताए कि आगे क्या होगा ("हम एक कार्य-दिवस के भीतर जवाब देंगे")। यह पुष्टि बातचीत जारी रखने का आख़िरी मौक़ा भी है - आपके काम या बुकिंग पेज का लिंक कुछ ख़र्च नहीं करता, और कुछ विज़िटर उसे अपनाएँगे।

इसमें से किसी भी चीज़ के लिए किसी फ़्रेमवर्क या रीडिज़ाइन की ज़रूरत नहीं - ज़्यादातर यह मार्कअप और पंद्रह मिनट का ध्यान है। अगर आप बैकएंड वाला हिस्सा ख़ुद नहीं बनाना चाहते - डिलीवरी, स्पैम फ़िल्टरिंग, डैशबोर्ड, स्टोरेज - तो Formhook बिल्कुल इसीलिए है; फ़्री टियर में क्या मिलता है, यह जानने के लिए प्राइसिंग देखें। लॉन्च से पहले क्या जाँचना है, यह प्री-लॉन्च चेकलिस्ट में है, और अगर आप फ़ॉर्म और एक साधारण mailto: लिंक के बीच तय नहीं कर पा रहे, तो mailto बनाम कॉन्टैक्ट फ़ॉर्म दोनों पक्ष रखता है।