CMS: इनपुट एलिमेंट्स के साथ एक कस्टम फॉर्म बनाना जो आपके कलेक्शन में सबमिट हो
एक कस्टम CMS फॉर्म बनाएँ जो विज़िटर्स को
इनपुट एलिमेंट्स का उपयोग करके अपनी जानकारी सीधे आपके कलेक्शन में सबमिट करने की अनुमति देता है। इनपुट एलिमेंट्स में टेक्स्ट बॉक्स, ड्रॉपडाउन सिलेक्टर्स, डेट और टाइम पिकर्स और बहुत कुछ शामिल हैं। यह आर्टिकल आपको सबमिशन स्टोर करने के लिए कलेक्शन बनाने, इनपुट एलिमेंट्स और सबमिट बटन जोड़ने, और इन सबको कनेक्ट करने के लिए डेटासेट्स का उपयोग करने का तरीका बताएगा।
क्या आपको एक आसान, पहले से बना हुआ (prebuilt) कस्टम फॉर्म चाहिए?
कम सेटअप वाले टेम्पलेट फॉर्म जैसे कि कॉन्टैक्ट फॉर्म, ऑर्डर फॉर्म, रजिस्ट्रेशन फॉर्म और बहुत कुछ देखने के लिए
Wix Forms चेक करें।
शुरू करने से पहले:
- अगर आपने अभी तक अपनी साइट पर CMS ऐड नहीं किया है, तो उसे जरूर करें।
- इस प्रोसेस की पूरी जानकारी के लिए, हमारा Ultimate CMS Guide वीडियो देखें।
स्टेप 1 | कलेक्शन बनाएँ और परमिशन सेट करें
एक कलेक्शन बनाएं जहाँ आप कस्टम फॉर्म सबमिशन स्टोर करेंगे और
कलेक्शन परमिशन सेट करें। आप
Collect content परमिशन सेटिंग्स चुन सकते हैं, फिर यह चुनें कि आपकी लाइव साइट से कंटेंट जोड़ने या देखने की अनुमति किसे होनी चाहिए। या, आप यह स्पेसिफाई करने के लिए
Advanced चुन सकते हैं कि प्रत्येक रोल (हर कोई, मेंबर्स, आइटम क्रिएटर और कोलैबोरेटर्स) के लिए कंटेंट कौन देख सकता है, जोड़ सकता है, अपडेट कर सकता है और हटा सकता है।
आप इस समय कलेक्शन में फील्ड जोड़ सकते हैं लेकिन हम उन्हें बाद में (
स्टेप 3) जोड़ने की सलाह देते हैं जब आप इनपुट एलिमेंट्स को कनेक्ट करते हैं। इस तरह आप सुनिश्चित कर सकते हैं कि आप केवल वही फील्ड टाइप जोड़ रहे हैं जो प्रत्येक प्रकार के इनपुट एलिमेंट से कनेक्ट हो सकते हैं।
फॉर्म सबमिशन स्टोर करने के लिए कलेक्शन बनाने का तरीका:
- अपनी साइट के डैशबोर्ड में Go to CMS पर जाएं।
- Create Collection पर क्लिक करें।
- Start from scratch पर क्लिक करें।
टिप: वैकल्पिक रूप से, AI (आर्टिफिशियल इंटेलिजेंस) से अपने लिए कलेक्शन बनवाने के लिए Create with AI पर क्लिक करें। - Next पर क्लिक करें।
- अपने कलेक्शन के लिए एक नाम दर्ज करें। मान लेते हैं कि इस कलेक्शन का नाम 'Submissions' है।
- (केवल कोडिंग के लिए) अपने कोड में उपयोग करने के लिए एक कलेक्शन ID दर्ज करें।
- Multiple item collection (Default) को सिलेक्ट रहने दें और Create पर क्लिक करें।
- More Actions पर क्लिक करें और Permissions & privacy चुनें।
- चुनें कि कलेक्शन के लिए किन परमिशन का इस्तेमाल करना है:
कंटेंट कलेक्ट करें
एडवांस्ड
स्टेप 2 | अपनी साइट पर इनपुट एलिमेंट्स जोड़ें
अपने एडिटर के उस पेज या सेक्शन पर जाएँ जहाँ आप कस्टम फॉर्म बनाना चाहते हैं। फिर वे सभी इनपुट एलिमेंट्स जोड़ें जिनका उपयोग विजिटर्स अपनी जानकारी सबमिट करने के लिए करेंगे। ध्यान रखें कि
प्रत्येक इनपुट एलिमेंट की अपनी सीमाएं होती हैं कि वह किस प्रकार का डेटा इकट्ठा कर सकता है और किन फील्ड टाइप्स से जुड़ सकता है।
कंटेंट इकट्ठा करने के लिए किन इनपुट एलिमेंट्स को सेट किया जा सकता है?
आप निम्नलिखित इनपुट एलिमेंट्स में से चुन सकते हैं जो आपको कंटेंट इकट्ठा करने की अनुमति देते हैं: टेक्स्ट इनपुट, टेक्स्ट बॉक्स, रिच टेक्स्ट, रेडियो बटन्स, मल्टी-चेकबॉक्स, सिंगल चेकबॉक्स, ड्रॉपडाउन, सिलेक्शन टैग्स, डेट पिकर, टाइम पिकर, स्लाइडर, अपलोड बटन, रेटिंग्स इनपुट, एड्रेस इनपुट, स्विच और सिग्नेचर इनपुट।
Wix एडिटर
स्टूडियो एडिटर
- अपने एडिटर पर जाएँ।
- उस पेज या सेक्शन पर जाएँ जहाँ आप कस्टम फॉर्म बनाना चाहते हैं।
- एडिटर के बाईं ओर Add Elements
पर क्लिक करें। - Input पर क्लिक करें।
- उस इनपुट एलिमेंट के टाइप पर क्लिक करें जिसे आप जोड़ना चाहते हैं।
- संबंधित इनपुट एलिमेंट को क्लिक करके पेज पर ड्रैग करें।
- अपने फॉर्म की ज़रूरत के अनुसार और इनपुट एलिमेंट्स जोड़ने के लिए ऊपर दिए गए स्टेप्स 3-6 दोहराएं।
स्टेप 3 | इनपुट एलिमेंट्स को अपने कलेक्शन से कनेक्ट करें
अपने प्रत्येक इनपुट एलिमेंट को एक डेटासेट से कनेक्ट करें जो आपके 'Submissions' कलेक्शन से जुड़ता हो। फिर इनपुट वैल्यूज को नए कलेक्शन फील्ड्स से कनेक्ट करें जो उस डेटा के टाइप से मेल खाते हों जिसे आप इकट्ठा करना चाहते हैं।
आप उन ऑप्शन्स को दूसरे CMS कलेक्शन के आइटम से कनेक्ट कर सकते हैं जिन्हें विजिटर्स ड्रॉपडाउन और सिलेक्शन टैग एलिमेंट्स में चुनते हैं। ऐसा करने के लिए, उनके लिस्ट ऑप्शन्स को एक अलग डेटासेट से कनेक्ट करें जो दूसरे कलेक्शन के फील्ड से जुड़ता हो। यह डेटासेट 'Read' या 'Read & Write' मोड में होना चाहिए।
Wix एडिटर
स्टूडियो एडिटर
- अपने एडिटर में, एक डेटासेट जोड़ें जो आपके 'Submissions' कलेक्शन से कनेक्ट होता हो:
- बाईं ओर CMS
पर क्लिक करें। - Add Content Elements पर क्लिक करें।
- Form dataset पर क्लिक करें।
- Choose a collection ड्रॉप-डाउन पर क्लिक करें और 'Submissions' कलेक्शन चुनें।
- डेटासेट को एक नाम दें (जैसे 'Submissions')।
- Create पर क्लिक करें।
- बाईं ओर CMS
- आपके द्वारा जोड़े गए किसी भी इनपुट एलिमेंट पर क्लिक करें।
- Connect to CMS आइकन
पर क्लिक करें। - Choose a dataset ड्रॉप-डाउन पर क्लिक करें और अपना 'Submissions' डेटासेट चुनें।
टिप: अगर आपको 'Filter content' और 'Collect content' के बीच चुनने के लिए कहा जाए, तो पहले Collect content पर क्लिक करें। - इनपुट एलिमेंट को एक नए कलेक्शन फील्ड से कनेक्ट करें:
- Value connects to ड्रॉप-डाउन पर क्लिक करें और + Add चुनें:
- नए कलेक्शन फील्ड के लिए Field Name दर्ज करें।
- (केवल कोडिंग के लिए) वह Field Key दर्ज करें जो आपकी साइट के कोड में इस फील्ड की पहचान करती है। इसे बाद में बदला नहीं जा सकता।
- ड्रॉप-डाउन से Field Type चुनें। फील्ड टाइप यह तय करता है कि आप फील्ड में किस तरह का डेटा स्टोर कर सकते हैं।
- Add पर क्लिक करें।
- (अगर कुछ इनपुट एलिमेंट्स में आइटम की लिस्ट को कनेक्ट कर रहे हैं) तो एलिमेंट के विकल्पों को कहाँ मैनेज करना है, यह चुनने के लिए Show options from a collection टॉगल पर क्लिक करें:
- इनेबल्ड (Enabled): विकल्पों के लिए किसी दूसरे CMS कलेक्शन के फील्ड का उपयोग करें। संबंधित डेटासेट को कनेक्ट करें और Labels and values connect to ड्रॉप-डाउन से उपयोग किए जाने वाले फील्ड चुनें।
- डिसेबल्ड (Disabled): CMS से अलग एलिमेंट के लिए स्टैटिक विकल्प बनाने के लिए Manage Choices पर क्लिक करें।
- अपने कस्टम CMS फॉर्म के हर इनपुट एलिमेंट के लिए ये स्टेप्स दोहराएं।
डेटासेट मोड के बारे में क्या?
- अगर आपने 'Form dataset' जोड़ा है, तो यह पहले से ही 'Write' मोड पर सही ढंग से सेट है। यह मोड डेटासेट को इनपुट एलिमेंट सबमिशन के आधार पर कलेक्शन में नए आइटम जोड़ने की अनुमति देता है।
- अगर आपने उन विकल्पों को कनेक्ट किया है जिन्हें विज़िटर ड्रॉपडाउन और सिलेक्शन टैग एलिमेंट्स में चुनते हैं, तो सुनिश्चित करें कि वह अलग डेटासेट 'Read' या 'Read & Write' मोड में हो।
- अगर आपको अपने CMS फॉर्म को मौजूदा कलेक्शन आइटम अपडेट करने की आवश्यकता है, तो 'Submissions' डेटासेट को 'Read & Write' मोड पर सेट करें। सुनिश्चित करें कि कलेक्शन परमिशन (permissions) भी संबंधित रोल वाले लोगों को कंटेंट अपडेट करने की अनुमति देते हों।
स्टेप 4 | सबमिट बटन बनाएं
आपको विज़िटर्स के लिए उनके द्वारा दर्ज किए गए या चुने गए इनपुट एलिमेंट रिस्पॉन्स को सबमिट करने का एक तरीका बनाना होगा। एक रेगुलर बटन या इमेज जोड़कर और उसे डेटासेट के
'Submit' क्लिक एक्शन से कनेक्ट करके 'Submit' बटन बनाएं। जब विज़िटर 'Submit' बटन पर क्लिक करते हैं, तो आपके 'Submissions' डेटासेट से कनेक्ट होने वाले सभी इनपुट एलिमेंट्स की वैल्यू आपके कलेक्शन में सेव हो जाती हैं।
डेटासेट मोड और आपके कलेक्शन परमिशन के आधार पर, वैल्यू या तो नए आइटम के रूप में जोड़ी जाती हैं या मौजूदा आइटम को अपडेट करने के लिए उपयोग की जाती हैं।
आप निम्नलिखित डेटासेट एक्शन के लिए अलग बटन भी बना सकते हैं:
- New: कलेक्शन आइटम जोड़ें या अपडेट करें (डेटासेट मोड के आधार पर) और नई वैल्यू स्वीकार करने के लिए इनपुट को रीसेट करें।
- Revert: उन इनपुट एलिमेंट्स की वैल्यू रीसेट करें जिन्हें अभी तक सबमिट नहीं किया गया है।
- Delete: अपने कलेक्शन से चुने गए आइटम हटाएँ (केवल 'Read & Write' मोड में)।
- Next page/ Previous page: अगर आप उन आइटम को गैलरी या रिपीटर में दिखा रहे हैं जिन्हें विज़िटर एडिट कर रहे हैं, तो आप विज़िटर्स को आइटम के "पेज" पर नेविगेट करने देने के लिए ये बटन जोड़ सकते हैं। अगर आपने अपना फॉर्म डायनेमिक आइटम पेज पर बनाया है, तो इसके बजाय Next dynamic page / Previous dynamic page क्लिक एक्शन का उपयोग करें।
Wix एडिटर
स्टूडियो एडिटर
- एडिटर के बाईं ओर Add Elements पर क्लिक करें।
- Button पर क्लिक करें।
- जिस बटन को आप सबमिट बटन के रूप में उपयोग करना चाहते हैं, उसे क्लिक करके पेज पर ड्रैग करें। आप इनमें से किसी भी बटन टाइप का उपयोग कर सकते हैं: Themed Buttons, Text & Icon Buttons, Icon Buttons, या Image Buttons।
टिप: विकल्प के तौर पर, आप एक इमेज जोड़ सकते हैं और उसे अपने सबमिट बटन के रूप में उपयोग कर सकते हैं।
- Change Text & Icon पर क्लिक करें और वह टेक्स्ट दर्ज करें जिसे आप बटन पर दिखाना चाहते हैं (जैसे "सबमिट")।
- Connect to CMS आइकन पर क्लिक करें।
- Choose a dataset ड्रॉप-डाउन पर क्लिक करें और अपने सबमिशन कलेक्शन से जुड़े डेटासेट को चुनें।
- Click action connects to ड्रॉप-डाउन पर क्लिक करें और Submit चुनें।
- (वैकल्पिक) सक्सेस और फेलियर मैसेज जोड़ें जो सबमिशन सफलतापूर्वक सबमिट होने या न होने पर दिखाई देते हैं:
- + Add success message पर क्लिक करें और फिर + Add failure message पर क्लिक करें।
- दोनों मैसेजेस को क्लिक करके उस जगह पर ड्रैग करें जहाँ आप उन्हें दिखाना चाहते हैं। वे एक-दूसरे के ऊपर हो सकते हैं क्योंकि मैसेज एक ही समय में दिखाई नहीं देते हैं।
- मैसेज को एडिट करने के लिए प्रत्येक मैसेज पर Edit Text पर क्लिक करें।
- बटन चुनें और Connect to CMS आइकन पर क्लिक करें। फिर When successful, navigate to ड्रॉप-डाउन पर क्लिक करें और एक विकल्प चुनें:
- Stay on this page: फॉर्म सबमिट करने के बाद विज़िटर उसी पेज पर रहता है।
- A link: फॉर्म सबमिट करने के बाद विज़िटर को दूसरे पेज पर रिडायरेक्ट कर दिया जाता है। Choose a link के नीचे Choose पर क्लिक करें और लिंक सेटअप करें।
- बटन पर क्लिक करें और अपने सबमिट बटन के लुक को कस्टमाइज़ करने के लिए डिजाइन आइकन
चुनें।
स्टेप 5 | इनपुट एलिमेंट्स को कस्टमाइज़ करें
आप अपनी साइट के लुक और फील से मेल खाने वाला एक शानदार फॉर्म बनाने के लिए अपने हर इनपुट एलिमेंट को कस्टमाइज़ कर सकते हैं।
Wix एडिटर
स्टूडियो एडिटर
- अपने एडिटर में, किसी भी input elements पर क्लिक करें जिसे आप कस्टमाइज़ करना चाहते हैं।
- फील्ड टाइटल डालने, फील्ड को 'required' सेट करने, या इनपुट टाइप के आधार पर विभिन्न सेटिंग्स को एडजस्ट करने के लिए Settings पर क्लिक करें।
- टेक्स्ट अलाइनमेंट और अन्य लेआउट ऑप्शन्स को एडजस्ट करने के लिए Layout आइकन
पर क्लिक करें। - प्रीसेट डिज़ाइन चुनने के लिए Design आइकन
पर क्लिक करें, फिर एलिमेंट के अपीयरेंस को और बेहतर बनाने के लिए Customize Design चुनें। - आप जिस भी इनपुट एलिमेंट को कस्टमाइज़ करना चाहते हैं, उसके लिए ये स्टेप्स दोहराएं।
क्या आप लाइव जाने के लिए तैयार हैं?
अपने नए कस्टम फॉर्म को टेस्ट करने के लिए एडिटर के टॉप राइट में
Preview पर क्लिक करें। जब सब कुछ सही लगे और ठीक से काम करे, तो बदलावों को लाइव करने के लिए
Publish पर क्लिक करें।
अगर आपने सैंडबॉक्स इनेबल किया है, तो डेटाबेस के बदलावों को लाइव करने के लिए
अपने Sandbox कलेक्शन को लाइव कलेक्शन के साथ सिंक करें।
अक्सर पूछे जाने वाले सवाल (FAQs)
इनपुट एलिमेंट्स का उपयोग करके कस्टम फॉर्म बनाने से जुड़े सामान्य सवालों के जवाब के लिए नीचे दिए गए किसी सवाल पर क्लिक करें।
मुझे एडिटर में अपने 'सबमिट' बटन के सक्सेस/फेलियर (success/failure) मैसेज कहाँ मिलेंगे?
क्या मैं फॉर्म सबमिशन मिलने पर होने वाले एक्शन को ऑटोमेट कर सकता हूँ?
क्या मैं अपने कलेक्शन में सेव हुए सबमिशन को एक्सपोर्ट कर सकता हूँ?
क्या साइट विज़िटर्स मेरी साइट पर दिखने वाले कंटेंट को फ़िल्टर करने के लिए इनपुट एलिमेंट्स का इस्तेमाल कर सकते हैं?
अगर मैं ड्रॉपडाउन या सिलेक्शन टैग लिस्ट को रेफरेंस फ़ील्ड्स से कनेक्ट करता हूँ, तो लिस्ट ऑप्शन्स कहाँ से आते हैं?
क्या मैं इनपुट एलिमेंट्स जोड़ने से पहले अपने कलेक्शन फ़ील्ड्स सेट कर सकता हूँ?
क्या मैं फॉर्म सबमिशन को टेबल, गैलरी या रिपीटर में दिखा सकता हूँ?
मैं मेंबर्स को उनके खुद के सबमिशन अपडेट करने की परमिशन कैसे दे सकता हूँ?
अगर मेरा अपलोड बटन काम नहीं कर रहा है, तो मैं उसे कैसे ठीक (troubleshoot) कर सकता हूँ?
मैं एक ही CMS कलेक्शन से कई फॉर्म्स को कैसे कनेक्ट करूँ?
क्या सक्सेस/फेलियर मैसेज एक्सेसिबिलिटी-फ्रेंडली (accessible-friendly) हैं?
क्या मैं मल्टी-स्टेप फॉर्म के हर स्टेप पर रिस्पॉन्स सेव कर सकता हूँ?