यदि आप पहले से ही नहीं जानते हैं, तब तक ग्रेविटी फॉर्म सबसे शुरुआती दोस्ताना वर्डप्रेस संपर्क फॉर्म प्लगइन है। हम इसे हमारे वर्डप्रेस गैलरी साइट, वर्डप्रेस कूपन साइट पर उपयोग करते हैं, और साथ ही साथ सभी नए ग्राहकों का उपयोग करते हैं। हाल ही में एक ग्राहक की साइट पर काम करते समय हमें डिजाइन से मिलान करने के लिए फार्म के स्टाइल को ज़ूम करना पड़ता था, जिसमें हमें प्लेवेस्टर पाठ को ग्रेविटी फ़ॉर्म में रखने की आवश्यकता थी। दुर्भाग्य से और आश्चर्यजनक रूप से, यह सुविधा ग्रेविटी फ़ॉर्म (अभी तक) में निर्मित नहीं है। ड्रॉप-डाउन फ़ील्ड और पोस्ट फ़ील्ड: श्रेणी में प्लेसहोल्डर टेक्स्ट को जोड़ने का कोई विकल्प नहीं है, तो इनपुट फ़ील्ड और टेक्स्टरेया फ़ील्ड पर प्लेसहोल्डर जोड़ने का कोई विकल्प नहीं है। यह हमारे लिए एक बड़ी समस्या बन गई हमने गुरुत्वाकर्षण फार्म का समर्थन क्षेत्र खोज लिया जहां एकमात्र समाधान उपलब्ध है जो एक हैक था जो ठीक से काम नहीं कर रहा था। हालांकि हमें प्लेसहोल्डर टेक्स्ट लगाने की इजाजत थी, इसके प्रमुख मुद्दों थे यदि उपयोगकर्ता को वास्तव में फ़ील्ड को भरने के बिना सबमिट करें, तो फॉर्म त्रुटियों को लौटने के बजाय मान्य होगा। एक अच्छी खोज के बाद, हमने समाधान ढूंढना समाप्त कर दिया। इस आलेख में, हम आपको दिखाएंगे कि कैसे jQuery और ग्रेविटी फ़ॉर्म फिल्टर का उपयोग करते हुए गुरुत्वाकर्षण रूपों में प्लेसहोल्डर टेक्स्ट को जोड़ना है।
तो आप शायद सोच रहे हैं कि लेबल क्यों हैं जब हेक ने हमें प्लेसहोल्डर पाठ की ज़रूरत थी? अच्छी तरह से डिजाइन में हम काम कर रहे थे, हम स्टाइल के प्रयोजनों के लिए लेबल का उपयोग नहीं कर सके।
हम सभी को करना था ग्रेविटी फॉर्म फिल्टर का उपयोग करते हुए एक फ़ंक्शन जोड़ना और पाठ को आउटपुट करने के लिए jQuery का उपयोग करना।
अंतिम कोड
अंतिम कोड नीचे है आप केवल अपने functions.php फ़ाइल में कॉपी और पेस्ट कर सकते हैं और इसे काम कर रहे हैं। लेकिन अगर आप फ़ंक्शन के बारे में अधिक और यह कैसे काम करता है, तो इस लेख को पढ़ना जारी रखना चाहते हैं। ड्रॉपडाउन फ़ील्ड पर प्लेसहोल्डर टेक्स्ट को जोड़ने का तरीका देखने के लिए इसे जारी रखें।
इसलिए हमें जो पहला काम करना था, वह व्यवस्थापक पैनल में ग्रेविटी फ़ॉर्म फ़ील्ड के अंतर्गत प्लेसहोल्डर वैल्यू जोड़ रहा था। ऐसा करने के लिए, आपको अपने थीम के functions.php फ़ाइल को खोलने और निम्न कोड पेस्ट करने की आवश्यकता है:
फ़ंक्शन का यह छोटा आपके ग्रेविटी फ़ॉर्म बैकएंड में एक प्लेसहोल्डर टेक्स्ट फ़ील्ड जोड़ देगा। उदाहरण स्क्रीनशॉट नीचे है:
अब जब हमने व्यवस्थापक पैनल में फ़ील्ड जोड़ दिया है, तो आप आगे बढ़ सकते हैं और इच्छित पाठ के साथ उन्हें भर सकते हैं। अगले चरण वास्तव में पाठ को वास्तविक रूप पर प्रदर्शित करना है ऐसा करने के लिए, हम jQuery का उपयोग करेंगे। आपको क्या करने की ज़रूरत है पिछले कोड के ठीक बाद में अपनी थीम के functions.php फ़ाइल में निम्न कोड पेस्ट करें:
/ * हम प्लेसहोल्डर मूल्य को पढ़ने के लिए jQuery का उपयोग करते हैं और इसे अपने फ़ील्ड में इंजेक्ट करते हैं * /
add_action ('gform_enqueue_scripts', "my_gform_enqueue_scripts", 10, 2);
फ़ंक्शन my_gform_enqueue_scripts ($ फ़ॉर्म, $ is_ajax = false) {
?> यह इनपुट फ़ील्ड और टेक्स्टरेया फ़ील्ड पर प्लेसहोल्डर टेक्स्ट को आउटपुट देगा और इसे मान्य करेगा। अब जब हमने इसे कवर किया है, तब भी हमें अपने ड्रॉपडाउन फ़ील्ड पर प्लेसहोल्डर टेक्स्ट जोड़ने की आवश्यकता है, जो कि यह छोटा स्निपेट हमारे लिए नहीं करता है शुक्र है कि ग्रेविटी फ़ॉर्म में डिफ़ॉल्ट रूप से अंतर्निहित है
ग्रेविटी फॉर्म ड्रॉप डाउन फ़ील्ड में प्लेसहोल्डर टेक्स्ट जोड़ें
सभी को आपको वास्तव में क्या करना चाहिए, एक रिक्त मूल्य वाला लेबल बनाएं। हां, यह हमें भ्रामक लग रहा था जब हमने पहली बार यह सुना। लेकिन यह वास्तव में नहीं है। इसलिए ग्रेविटी फ़ॉर्म में फ़ील्ड में एक ड्रॉप डाउन जोड़ें चेकबॉक्स पर क्लिक करें जो मान सक्षम करें कहते हैं। फिर एक रिक्त मूल्य के साथ एक लेबल जोड़ें। नीचे दिए गए स्क्रीनशॉट को देखें:
ग्रेविटी फ़ॉर्म में प्लेसहोल्डर टेक्स्ट को जोड़ने के लिए आपको यही करना होगा आप शायद सोच रहे हैं कि यह शुरुआती दोस्ताना वर्डप्रेस संपर्क फ़ॉर्म प्लगइन है, तो इसमें कुछ आसान क्यों नहीं जोड़ा गया है? खैर, हमने सटीक एक ही चीज़ को लेकर सोचा इसलिए हमारे संस्थापक @ शेडेबखी को ग्रेविटी फॉर्म, कार्ल हेनकॉक में भागीदारों में से एक के संपर्क में मिला। नीचे उनकी बातचीत है:
@ कार्लाहॉकॉक किसी भी संभावना है कि ऐसा कुछ गुरुत्वाकर्षण प्रपत्रों के मूल में बनाया जाता है? - http://ow.ly/6sWcz
- सईद बालकी (@ साइडबल्ली) 13 सितंबर, 2011
@syedbalkhi हाँ हम उम्मीद कर रहे थे कि एचटीएमएल 5 प्लेसहोल्डर एट्रिब्यूट का समर्थन विस्तार होगा ताकि हम शुद्ध एचटीएमएल 5 का इस्तेमाल कर सकें। लेकिन यह नहीं है।
- कार्ल हेनकॉक (@ कार्लाहैंकॉक) 13 सितंबर, 2011
@syedbalkhi तो हम बंद रखने की कोशिश कर रहे थे इसलिए हमें जावास्क्रिप्ट पर फ़ॉलबैक करने की ज़रूरत नहीं थी। दुर्भाग्य से ब्राउज़रों ने सहयोग नहीं किया है।
- कार्ल हेनकॉक (@ कार्लाहैंकॉक) 13 सितंबर, 2011
इसलिए आप देख सकते हैं कि यह ऐसा कुछ है जिसे वे जानते हैं, और भविष्य की रिलीज में इसे जोड़ा जाएगा। सभी भयानक चीजों को देखने के लिए, ग्रेविटी फ़ॉर्म कर सकते हैं, बस ग्रेविटी फ़ॉर्म के बारे में हमारी पोस्ट देखें।
भव्य फ़ंक्शन और jQuery स्निपेट के लिए श्रेय जॉर्ज पेड्रेट (@ जॉर्गपेड्रेट) को जाता है।