हाल ही में हमारे पास एक उपयोगकर्ता से एक ईमेल मिला है: मैं अपने वर्डप्रेस साइट के लिए पॉपअप में अपना संपर्क फ़ॉर्म कैसे डालूं? यह कई साइटों पर एक सामान्य प्रवृत्ति है जहां एक उपयोगकर्ता एक नया पृष्ठ पर जाने के बजाय संपर्क बटन या लिंक पर क्लिक करता है, तो संपर्क फ़ॉर्म एक पॉपअप में खुलता है। इस लेख में, हम आपको दिखाएंगे कि वर्डप्रेस में किसी संपर्क फ़ॉर्म पॉपअप को कैसे जोड़ना है जो कि किसी भी संपर्क फ़ॉर्म प्लगइन्स के लिए काम करेगा। हम आपको यह भी दिखाएंगे कि जब कोई उपयोगकर्ता लिंक या बटन पर क्लिक करता है तो सबसे अच्छा उपयोगकर्ता अनुभव सुनिश्चित करने के लिए केवल पॉपअप कैसे खोल सकता है।
हालांकि, अगर आप पाठ-निर्देशों का पालन करना चाहते हैं, तो आप वर्डप्रेस में किसी संपर्क फ़ॉर्म पॉपअप को कैसे जोड़ सकते हैं, इस पर ट्यूटोरियल के द्वारा हमारे कदम का अनुसरण कर सकते हैं।
चरण 0: आरंभ करना
इस ट्यूटोरियल के लिए आपको दो प्लग-इन स्थापित और सक्रिय करने की आवश्यकता होगी।
सबसे पहले, आपको ऑप्टिटनमोस्टर की प्रो प्लान की आवश्यकता होती है जो कि कैनवास फॉर्म प्रकार के साथ आता है। OptinMonster WordPress के लिए सबसे अच्छा पॉपअप प्लगइन है
इसके बाद, आपको संपर्क फ़ॉर्म प्लगइन की आवश्यकता होगी जैसे कि WPForms, ग्रेविटी फ़ॉर्म, संपर्क फ़ॉर्म 7, आदि।
इस आलेख के लिए, हम अपने पसंदीदा संपर्क फ़ॉर्म प्लगइन के मुफ्त संस्करण का उपयोग करेंगे: WPForms लाइट।
हम मानते हैं कि आपने दोनों प्लग इन स्थापित और सक्रिय किए हैं अगर तुम्हे सहायता की जरुरत है
साइट
यह कहने के बाद, हम वर्डप्रेस में एक संपर्क फ़ॉर्म बनाने के लिए आगे बढ़ें।
चरण 1: WPForms का उपयोग कर संपर्क प्रपत्र बनाना
सबसे पहले आपको WPForms के साथ एक नया संपर्क फ़ॉर्म बनाने की आवश्यकता है। यदि आपके पास पहले से ही WPForm के साथ बनाया गया कोई संपर्क फ़ॉर्म है, तो आप इस चरण को छोड़ सकते हैं।
अपने WordPress व्यवस्थापक साइडबार में WPForms मेनू पर क्लिक करें और फिर जोड़ें नया बटन पर क्लिक करें।
यह फॉर्म बिल्डर लॉन्च करेगा बस अपने फ़ॉर्म के लिए एक नाम दर्ज करें, उदाहरण के लिए ‘हमसे संपर्क करें’ और फिर जारी रखने के लिए ‘सरल संपर्क फ़ॉर्म’ पर क्लिक करें।
प्रपत्र बिल्डर आपको फ़ील्ड संपादक पर ले जाएगा। आप फ़ील्ड से फ़ील्ड जोड़ सकते हैं या निकाल सकते हैं या साधारण ड्रैग और ड्रॉप द्वारा उन्हें पुनर्व्यवस्थित कर सकते हैं।
एक बार जब आप कर लें, तो आपको अपने बदलावों को संग्रहीत करने के लिए सहेजें बटन पर क्लिक करना होगा। आपका संपर्क फ़ॉर्म अब तैयार है
आपको यात्रा की ज़रूरत है WPForms »सभी फॉर्म पृष्ठ। आपको वहां सूचीबद्ध संपर्क फ़ॉर्म मिलेगा उसके पास आपको एक शोर्ट मिलेगा आपको अगले चरण में इस शोर्टकोड की आवश्यकता होगी।
यदि आपको अधिक विस्तृत निर्देशों की आवश्यकता है, तो वर्डप्रेस में संपर्क प्रपत्र कैसे बनाया जाए, इसके बारे में चरण-दर-चरण गाइड देखें।
अब जब हमारे पास एक संपर्क फ़ॉर्म तैयार है, तो हम अगले चरण पर चलते हैं और वर्डप्रेस में एक लाइटबॉक्स पॉपअप बनाते हैं।
चरण 2: OptinMonster का उपयोग करके एक वर्डप्रेस पॉपअप बनाना
सबसे पहले हमें ऐसा करने की ज़रूरत है OptinMonster का उपयोग करते हुए एक मॉडल पॉपअप बनाएं
आपको वर्डप्रेस एडमिन मेनू में ऑप्टिमनमोस्टर पर क्लिक करके एक नया ऑप्टकिन बनाना होगा, और उसके बाद नया विकल्प बनाएं बटन पर क्लिक करें।
यह आपको OptinMonster वेबसाइट पर ले जाएगा, जहां आप अपना पॉपअप बनाएंगे। पहले आपको अपने अभियान के लिए शीर्षक प्रदान करना होगा। आप अपनी इच्छानुसार कुछ भी नाम दे सकते हैं, उदाहरण के लिए ‘संपर्क फ़ॉर्म पॉपअप’
इसके बाद आपको ड्रॉप डाउन मेनू से अपनी वेबसाइट का चयन करना होगा। कैनवास पर क्लिक करें ‘अपना डिजाइन चुनें’ विकल्प के तहत।
OptinMonster आपको उपलब्ध टेम्पलेट दिखाएगा वर्तमान में, कैनवास के लिए केवल व्हाइटबोर्ड टेम्प्लेट उपलब्ध है जारी रखने के लिए टेम्पलेट पर क्लिक करें।
यह आपको Optin Customizer स्क्रीन पर लाएगा। आप देखेंगे कि कैनवास डिजाइन द्वारा रिक्त है यह इस तरह से किया गया है, ताकि आप OptinMonster की शक्ति का उपयोग करते समय कुछ भी जोड़ सकते हैं आप एक साइनअप फॉर्म, बॉक्स जैसे बॉक्स, सर्वेक्षण, कूपन कोड जोड़ सकते हैं या जैसे हम इस उदाहरण में संपर्क फ़ॉर्म जोड़ रहे हैं।
डिज़ाइन टैब के अंतर्गत आप अपने कैनवास की ऊंचाई की चौड़ाई चुन सकते हैं। डिफ़ॉल्ट रूप से, यह 700 x 350 px पर सेट है। चलो ऊंचाई को कम से कम 520 तक सेट करें
‘कस्टम एचटीएमएल’ बॉक्स के तहत आप अपने संपर्क फ़ॉर्म शोर्ट को किसी अन्य कस्टम HTML के साथ जोड़ सकते हैं, जिसे आप जोड़ना चाहते हैं।
यहां एक नमूना एचटीएमएल है जिसका उपयोग हम इस ट्यूटोरियल के लिए मोडल पॉपअप बनाने के लिए करते थे।
क्या आपका कोई सवाल है?
हमारी सेवाओं के बारे में हमें अधिक पूछना चाहते हैं? बस इस फ़ॉर्म को भरें और हम जितनी जल्दी हो सके आपको वापस मिलेंगे।
[wpforms id = "119"]
ध्यान दें कि हमने वहां भी WPForms शोर्ट एम्बेड किया है यदि आप किसी अन्य संपर्क फ़ॉर्म का उपयोग कर रहे हैं, तो बस अपने संपर्क फ़ॉर्म शोर्ट के साथ शोर्ट को बदलें।
कस्टम एचटीएमएल के बाद, अगला विकल्प अपने कस्टम सीएसएस को दर्ज करना है। कस्टम सीएसएस बॉक्स के नीचे, आपको यादृच्छिक पाठ की एक स्ट्रिंग दिखाई देगी जो इस तरह दिखती है html div # om-mw7pzo63ch6wpfzi । यह वह सीएसएस उपसर्ग है जो आप अपने कस्टम सीएसएस में उपयोग करेंगे।
यह सीएसएस है जिसका उपयोग हम इस ट्यूटोरियल के लिए मोडल पॉपअप बनाने में करते थे।
html div # om-mw7pzo63ch6wpfzi div # om-canvas-whiteboard-optin {
पृष्ठभूमि का रंग: # f8f8f8;
}
html div # om-mw7pzo63ch6wpfzi h3 {
text-align: केंद्र;
}
html div # om-mw7pzo63ch6wpfzi .tagline {
फ़ॉन्ट-शैली: इटैलिक;
}
html div # om-mw7pzo63ch6wpfzi .wpforms- कंटेनर-पूर्ण। wpforms-form .wpforms-field {
पैडिंग: 10 पीएक्स 0;
दोनों को साफ करो;
}
html div # om-mw7pzo63ch6wpfzi .wpforms- कंटेनर-पूर्ण। wpforms-form .wpforms-field-label {
प्रदर्शन क्षेत्र;
फ़ॉन्ट वजन: 700;
फ़ॉन्ट-आकार: 16px;
फ्लोट: कोई नहीं;
रेखा-ऊंचाई: 1.3;
मार्जिन: 0 0 4 पीएक्स 0;
पैडिंग: 0;
}
html div # om-mw7pzo63ch6wpfzi .wpforms- कंटेनर-पूर्ण। wpforms-form .wpforms-field-hp {
प्रदर्शन: कोई नहीं! महत्वपूर्ण;
स्थिति: निरपेक्ष! महत्वपूर्ण;
बाएं: -9000px! महत्वपूर्ण;
}
यदि आप अब पूर्वावलोकन नहीं देख पाए तो चिंता न करें, आप बाद में अपने सीएसएस को समायोजित कर सकते हैं। आप अपने ब्राउज़र के निरीक्षण तत्व टूल का उपयोग करने में सक्षम होंगे, यह पता लगाने के लिए कि आप किस सीएसएस वर्ग और चयनकर्ताओं को लक्षित करना चाहते हैं और फिर अपने ऑप्टिन को संपादित करके कस्टम सीएसएस जोड़ना चाहते हैं।
अब जब कि हम डिजाइन भाग के साथ किया जाता है चलो customizer में विन्यास टैब पर स्विच करें।
‘Optin Cookie Period’ और ‘Optin सफलता कुकी अवधि’ दोनों को 0 में बदलें। यह OptinMonster को अवधि की कुकी सेट करने से रोक देगा।
आपको ‘ऑप्टिनी सफलता संदेश’ को बदलने की ज़रूरत है डिफ़ॉल्ट रूप से यह साइन अप करने के लिए उपयोगकर्ताओं को धन्यवाद देता है, लेकिन हम इसे किसी संपर्क फ़ॉर्म पर उपयोग कर रहे हैं। आपसे संपर्क करने के लिए उपयोगकर्ताओं को धन्यवाद देने के लिए आपको सफलता संदेश बदलना चाहिए।
चूंकि हमारा पॉपअप केवल तभी दिखाई देगा, जब कोई उपयोगकर्ता किसी लिंक या बटन पर क्लिक करता है, इसका मतलब है कि हमें मैन्युअल ट्रिगर को सक्षम करने की आवश्यकता है। ‘मैनुअल ट्रिगर पर लोड’ विकल्प के तहत बॉक्स को चेक करें
अपनी ऑप्टिन सेटिंग्स को स्टोर करने के लिए सहेजें बटन पर क्लिक करें, फिर कस्टमाइज़र से बाहर निकलने के लिए क्लोज बटन पर क्लिक करें।
चरण 3: अपने वर्डप्रेस साइट में पॉपअप जोड़ना
अपने वर्डप्रेस एडमिन क्षेत्र पर वापस स्विच करें और ऑप्टिमनमोस्टर पर क्लिक करें। आप ऑप्टिक्स की अपनी सूची देखेंगे यदि आप अपने ऑप्टिन को नहीं देखते हैं, तो फिर रिफ्रेश ऑप्टिंस बटन पर क्लिक करें।
पर क्लिक करें ‘आउटपुट सेटिंग्स संपादित करें’ अपने ऑप्टिन के नीचे लिंक यह आपको पॉपअप के लिए आउटपुट सेटिंग्स में लाएगा।
सबसे पहले आपको बगल में स्थित बॉक्स को चेक करना होगा ‘साइट पर ऑप्टिन सक्षम करें’ तथा ‘दुनिया भर में लोड करें’ optin विकल्प। यदि आप इन की जांच नहीं करते हैं, तो पॉपअप आपकी साइट पर दिखाई नहीं देगा।
पृष्ठ पर नीचे स्क्रॉल करें, और आप विकल्प देखेंगे शॉर्टकोड के लिए ‘पार्स सामग्री’ । सुनिश्चित करें कि यह चेक किया गया है, अन्यथा OptinMonster आपके पॉपअप के अंदर शॉर्टकोड को पार्स नहीं करेगा।
अगला आपको अपने पॉपअप में शामिल किए गए शोर्ट कोड को दर्ज करने की आवश्यकता है। यह आपकी संपर्क फ़ॉर्म शोर्ट है
अपने बदलावों को संग्रहीत करने के लिए सेटिंग सहेजने पर क्लिक करें
ट्रिगर संपर्क फ़ॉर्म पॉपअप के लिए लिंक या बटन जोड़ना
सबसे पहले आपको अपने ऑप्टिमनमोस्टर ऑप्टिंस स्लैग की आवश्यकता होगी। अपने WordPress साइडबार में OptinMonster आइकन पर क्लिक करें आप अपने ऑप्टिटन शीर्षक के आगे ऑप्टिन स्लग देखेंगे।
वर्डप्रेस में एक नया पृष्ठ बनाएं या पोस्ट या पेज संपादित करें जहां आप संपर्क फ़ॉर्म पॉपअप लिंक या बटन जोड़ना चाहते हैं। पोस्ट एडिटर में टेक्स्ट एडिटर पर स्विच करें और इस तरह अपना पॉपअप लिंक जोड़ें:
हमसे संपर्क करें
अपने खुद के ऑप्टिन स्लग के साथ डेटा ऑप्टिन-स्लग को बदलने के लिए मत भूलना
अपने परिवर्तन सहेजें और अपने पोस्ट / पेज पर जाएं। कार्रवाई में अपना संपर्क फ़ॉर्म पॉपअप देखने के लिए लिंक पर क्लिक करें।
आप अपने WordPress साइट पर कहीं भी इस लिंक का उपयोग कर सकते हैं। आप अपने वर्डप्रेस टेम्पलेट्स में भी इसे पोस्ट या पेज पर पाठ विगेट्स में जोड़ सकते हैं।
बस इतना ही। हम आशा करते हैं कि इस आलेख ने वर्डप्रेस में एक संपर्क फ़ॉर्म पॉपअप का उपयोग करके आपकी रूपांतरण दरें बढ़ाने में आपकी मदद की है। आप यह भी जांच कर सकते हैं कि ऑप्टिमनमोस्टर ने हमारे ईमेल ग्राहकों को 600% तक बढ़ाने में मदद की।