वर्डप्रेस में फ़ॉर्म के लिए नेविगेशन पॉपअप की पुष्टि कैसे करें

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

नेविगेशन पॉपअप की पुष्टि क्या है?

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

पुष्टि नेविगेशन पॉपअप उन्हें अपनी टिप्पणी समाप्त करने का मौका देता है।

आप वर्डप्रेस पोस्ट एडिटर स्क्रीन में इस फीचर को देख सकते हैं। यदि आपके पास बिना सहेजे गए परिवर्तन हैं, और आप पृष्ठ छोड़ने या ब्राउज़र को बंद करने का प्रयास करते हैं, तो आपको एक चेतावनी पॉपअप दिखाई देगा।

देखते हैं कि हम अपनी साइट पर वर्डप्रेस टिप्पणियों और अन्य रूपों में यह चेतावनी सुविधा कैसे जोड़ सकते हैं।

वर्डप्रेस में असम्ब्मिटेड फॉर्म के लिए नेविगेशन पॉपअप की पुष्टि करें

इस ट्यूटोरियल के लिए, हम एक कस्टम प्लगइन तैयार करेंगे, लेकिन चिंता न करें कि आप अपनी वेबसाइट पर स्थापित करने के लिए इस ट्यूटोरियल के अंत में प्लग-इन भी डाउनलोड कर सकते हैं।

हालांकि, कोड की बेहतर समझ के लिए, हम आपसे अपना प्लगइन बनाने का प्रयास करेंगे। आप ऐसा स्थानीय इंस्टॉल या एक मचान साइट पर पहले कर सकते हैं।

आएँ शुरू करें।

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

अब नोटपैड जैसे एक सादा पाठ संपादक खोलें और एक नई फ़ाइल बनाएं। अंदर, बस निम्नलिखित कोड पेस्ट करें:

यह php फ़ंक्शन केवल आपकी वेबसाइट के फ्रंट-एंड में JavaScript फ़ाइल जोड़ता है 
आगे बढ़ो और इस फाइल को इस रूप में सहेजें इस बात की पुष्टि-leaving.php मुख्य पुष्टि-छोड़ने वाले फ़ोल्डर के अंदर। 
अब हमें JavaScript फ़ाइल बनाने की आवश्यकता है जो कि यह प्लगइन लोड हो रहा है। 
एक नई फ़ाइल बनाएं और इस कोड को उसमें पेस्ट करें: 
jQuery (दस्तावेज़) .ready (फ़ंक्शन ($) {

 $ (दस्तावेज़) .ready (फ़ंक्शन () {
     needToConfirm = false;
     window.onbeforeunload = askConfirm;
 });

 फंक्शन पूछो (पुष्टि) () {
     अगर (needToConfirm) {
         // अपने कस्टम संदेश यहाँ रखो
         वापसी "आपका सहेजे नहीं गए डेटा खो जाएंगे।";
     }
 }
 
 $ ("# टिप्पणीफ़ॉर्म")। परिवर्तन (फ़ंक्शन () {
     needToConfirm = सच;
 });

  }) 
यह जावास्क्रिप्ट कोड पता लगाता है कि उपयोगकर्ता टिप्पणी फॉर्म में बिना सहेजे गए परिवर्तनों का है।  यदि कोई उपयोगकर्ता पृष्ठ से दूर नेविगेट करने या खिड़की को बंद करने की कोशिश करता है, तो यह एक चेतावनी पॉपअप दिखाएगा। 
आपको इस फाइल को सहेजने की आवश्यकता है इस बात की पुष्टि-leaving.js जेएस फ़ोल्डर के अंदर 
दोनों फाइलों को सहेजने के बाद, यह आपकी फ़ोल्डर संरचना की तरह दिखना चाहिए: 

अब आपको किसी एफ़टीपी क्लाइंट का इस्तेमाल करके अपने वर्डप्रेस साइट से कनेक्ट करना होगा। 
कनेक्ट होने के बाद, आपको अपलोड करने की आवश्यकता है इस बात की पुष्टि-छोड़ने फ़ोल्डर के लिए / WP-सामग्री / plugins / अपनी वेबसाइट पर फ़ोल्डर 

उसके बाद आपको वर्डप्रेस व्यवस्थापक क्षेत्र में लॉगिन करने और प्लगइन्स पृष्ठ पर जाएं।  इंस्टॉल किए गए प्लग इन की सूची में 'कन्फर्म लॉविविंग' प्लगइन को ढूंढें और नीचे 'सक्रिय' लिंक पर क्लिक करें 

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

WordPress में अन्य प्रपत्रों को चेतावनी जोड़ना 
आप अपने WordPress साइट पर किसी भी रूप को लक्षित करने के लिए उसी कोड बेस का उपयोग कर सकते हैं।  यहां हम आपको एक संपर्क फ़ॉर्म को लक्षित करने के लिए इसका उपयोग करने का एक उदाहरण दिखाएंगे। 
इस उदाहरण में, हम एक संपर्क फ़ॉर्म बनाने के लिए WPForms प्लगइन का उपयोग कर रहे हैं।  निर्देश उसी होंगे यदि आप अपनी वेबसाइट पर किसी भिन्न संपर्क फ़ॉर्म प्लगइन का उपयोग कर रहे हैं। 
उस पृष्ठ पर जाएं जहां आपने अपना संपर्क फ़ॉर्म जोड़ा है  माउस को अपने संपर्क फ़ॉर्म में पहले फ़ील्ड पर ले जाएं, राइट क्लिक करें, और फिर ब्राउज़र मेनू से निरीक्षण करें का चयन करें। 

लाइन के साथ शुरू होता है की स्थिति जानें 

टैग।  फॉर्म टैग में, आपको आईडी विशेषता मिल जाएगी। 
इस उदाहरण में, हमारे फॉर्म का आईडी है wpforms फार्म -170 ।  आपको आईडी विशेषता की प्रतिलिपि बनाने की आवश्यकता है। 
अब संपादित करें इस बात की पुष्टि-leaving.js फ़ाइल और आईडी विशेषता को बाद में जोड़ें #commentform । 
सुनिश्चित करें कि आप अलग हैं #commentform और आपके प्रपत्र का आईडी अल्पविराम के साथ।  आपको भी जोड़ना होगा # अपने फ़ॉर्म की आईडी विशेषता के लिए उपसर्ग के रूप में साइन इन करें 
आपका कोड अब इस तरह दिखाई देगा: 
jQuery (दस्तावेज़) .ready (फ़ंक्शन ($) {

 $ (दस्तावेज़) .ready (फ़ंक्शन () {
     needToConfirm = false;
     window.onbeforeunload = askConfirm;
 });

 फंक्शन पूछो (पुष्टि) () {
     अगर (needToConfirm) {
         // अपने कस्टम संदेश यहाँ रखो
         वापसी "आपका सहेजे नहीं गए डेटा खो जाएंगे।";
     }
 }

 $ ("# टिप्पणीफ़ॉर्म, # wpforms-form-170")। परिवर्तन (फ़ंक्शन () {
     needToConfirm = सच;
 });

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