WordPress में Easy Steps में अपने फॉर्म को सिंगल लाइन में कैसे डिस्प्ले करें

हेलो दोस्तों आज मैं आपको बताऊंगा कि WordPress में Easy Steps में अपने फॉर्म को सिंगल लाइन में कैसे डिस्प्ले करें। तो चलिए शुरू करते हैं हमारे आज के वर्डप्रेस गाइड के साथ। अलग-अलग समस्याओं को प्राप्त करना पूरी तरह से एक बहुत ही अलग अनुभव देता है। आज मैं आपके साथ जो वर्डप्रेस गाइड साझा करने जा रहा हूं, वह है कि आसान चरणों में वर्डप्रेस में सिंगल लाइन में अपना फॉर्म कैसे प्रदर्शित करें।

WordPress में Easy Steps में अपने फॉर्म को सिंगल लाइन में कैसे डिस्प्ले करें

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

हम आपको दिखाएंगे कि इस लेख में वर्डप्रेस में एक ही लाइन में अपना फॉर्म आसानी से कैसे प्रदर्शित किया जाए।

शुरू करने से पहले मुझे पता है कि आप मुझे वर्डप्रेस से संबंधित अन्य गाइड भी पसंद कर सकते हैं

वर्डप्रेस में सिंगल लाइन फॉर्म क्यों प्रदर्शित करें?

अपने प्रपत्रों को रखने के स्थान का चयन करते समय एकल पंक्ति प्रपत्र आपको अधिक लचीलापन प्रदान करते हैं। चूंकि फॉर्म की यह शैली केवल एक पंक्ति है, वे ज्यादा जगह नहीं लेते हैं और आसानी से आपकी मौजूदा सामग्री के साथ एकीकृत हो सकते हैं।

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

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

कहा जा रहा है, आइए आपको दिखाते हैं कि अपनी वर्डप्रेस वेबसाइट पर सिंगल लाइन फॉर्म कैसे प्रदर्शित करें।

वर्डप्रेस में अपना सिंगल लाइन फॉर्म बनाना

इस ट्यूटोरियल के लिए, हम सिंगल लाइन फॉर्म बनाने के लिए WPForms प्लगइन का उपयोग करेंगे। यह 5 मिलियन से अधिक वेबसाइटों द्वारा उपयोग किए जाने वाले वर्डप्रेस के लिए सबसे अच्छा लीड जनरेशन प्लगइन है।

WPForms

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

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

पहली चीज जो आपको करने की ज़रूरत है वह है प्लगइन को स्थापित और सक्रिय करना। अधिक विवरण के लिए, वर्डप्रेस प्लगइन कैसे स्थापित करें, इस बारे में हमारे शुरुआती गाइड को देखें।

उसके बाद, अपने वर्डप्रेस एडमिन पैनल में WPForms »Add New पर जाएं और अपने फॉर्म को एक नाम दें। फिर, आपको अपना फॉर्म टेम्प्लेट चुनना होगा।

हम ‘ऑप्ट-इन फॉर्म’ टेम्पलेट का चयन करेंगे। बस टेम्प्लेट पर होवर करें और ‘टेम्पलेट का उपयोग करें’ बटन पर क्लिक करें।

.

Select form template

This brings up the drag and drop form builder.

You’ll see that the template we chose automatically includes the name and email fields and a submit button.

WPForms drag and drop form builder

Every field can be edited by clicking on them and making changes in the left hand column.

You can also drag and drop the fields to change their order.

WPForms form editor panel

Once you’re done customizing the fields, you can display your form in a single line.

To do this, go to Settings » General and then click on the ‘Advanced’ drop down tab.

Go to form advanced settings

Next, type ‘inline-fields’ in the ‘Form CSS Class’ box (without quotes).

This will apply that CSS class to the form. Since WPForms includes styling for the ‘inline-fields’ class, it will automatically make your entire form display nicely on a single line.

Add inline CSS class

After that, you can make your form even smaller by hiding the field labels.

Simply click on the ‘Fields’ navigation option, then select the ‘Advanced’ menu option, and click the ‘Hide Label’ toggle to turn it on.

Hide form labels toggle

Then, you need to do the same thing for all of the form field labels.

After that, in the same ‘Advanced’ section, you can enter text into the ‘Placeholder’ box. 

This tells your users what each form field is for. 

Add form placeholder text

एक बार जब आप अपना फ़ॉर्म कस्टमाइज़ कर लेते हैं, तो अपने परिवर्तनों को सहेजने के लिए ‘सहेजें’ बटन पर क्लिक करना सुनिश्चित करें।

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

अपनी वर्डप्रेस वेबसाइट पर अपना सिंगल लाइन फॉर्म जोड़ना

अब, अपने सिंगल लाइन फॉर्म को अपनी वेबसाइट पर जोड़ने का समय आ गया है। आप इसे किसी भी पेज, पोस्ट या विजेट क्षेत्र में जोड़ सकते हैं।

हम इसे एक मौजूदा पेज में जोड़ने जा रहे हैं, लेकिन प्रक्रिया समान होगी यदि आप इसे अपने वर्डप्रेस ब्लॉग के किसी अन्य क्षेत्र में जोड़ रहे हैं।

बस उस पेज को खोलें जहां आप सिंगल लाइन फॉर्म प्रदर्शित करना चाहते हैं, ‘प्लस’ ऐड ब्लॉक आइकन पर क्लिक करें, और ‘WPForms’ खोजें।

Add WPForms block

Then, click on the ‘WPForms’ block to add it to your site.

This brings up a drop down box to choose the single line form you created earlier.

Select single line form from drop down

Once you choose your form, the plugin will load a preview of your form inside the content editor. Then, click the ‘Update’ or ‘Publish’ button to make your new form live.

Now, you can visit your website to see your new form in action. 

Single line form example

We hope this article helped you learn how to display your form in a single line in WordPress.

Leave a Comment