वर्डप्रेस फॉर्म में कस्टम HTML सामग्री कैसे जोड़ें

फॉर्म सिर्फ इनपुट फ़ील्ड नहीं होते। कभी-कभी आपको कुछ समझाने, अनुभागों को विभाजित करने, कोई छवि दिखाने या प्रश्नों के बीच संदर्भ जोड़ने की आवश्यकता होती है। कस्टम HTML सामग्री स्थिर फॉर्म को निर्देशित अनुभवों में बदल देती है। यहां बताया गया है कि आप अपने वर्डप्रेस फॉर्म में रिच कंटेंट कैसे जोड़ सकते हैं।

एचटीएमएल ब्लॉक क्या है?

परिभाषा

एचटीएमएल ब्लॉक एक विशेष फॉर्म एलिमेंट है जो इनपुट लिए बिना कंटेंट प्रदर्शित करता है। यह आपके फॉर्म फ़ील्ड के बीच एचटीएमएल को रेंडर करता है, जिससे आप टेक्स्ट, इमेज, वीडियो, डिवाइडर आदि जोड़ सकते हैं।

एचटीएमएल ब्लॉक बनाम सामान्य फ़ील्ड

एचटीएमएल ब्लॉक का उपयोग क्यों करें?

1. निर्देश एवं मार्गदर्शन

उपयोगकर्ताओं को यह समझने में मदद करें कि क्या करना है:

• जटिल प्रश्नों की व्याख्या करें
• संदर्भ प्रदान करें
• आवश्यकताओं की सूची बनाएं
• अनुभागों के माध्यम से मार्गदर्शन करें

2. दृश्य संगठन

लंबे वाक्यों को तोड़ें:

• खंड शीर्षक
• क्षैतिज विभाजक
• दृश्य विभाजक
• समूहीकृत सामग्री

3. रिच मीडिया

दृश्य तत्व जोड़ें:

• चित्र और आइकन
• एम्बेडेड वीडियो
• आलेख जानकारी
• आरेख

4. कानूनी और अनुपालन

महत्वपूर्ण जानकारी प्रदर्शित करें:

• नियम और शर्तें पाठ
• गोपनीयता सूचनाएँ
• अस्वीकरण
• आवश्यक खुलासे

5। ब्रांडिंग

अपने ब्रांड को सुदृढ़ बनाएं:

• लोगो
• ब्रांड रंग
• कस्टम स्टाइलिंग
• सुसंगत रूप

एचटीएमएल ब्लॉक जोड़ना

चरण 1: फ़ील्ड जोड़ें

1. अपना फ़ॉर्म खोलें एएफबी
2. खोज HTML ब्लॉक फ़ील्ड सूची में
3. इसे अपने फॉर्म में इच्छित स्थान पर खींचें

चरण 2: अपनी सामग्री जोड़ें

1. इसे चुनने के लिए HTML ब्लॉक पर क्लिक करें
2. सेटिंग पैनल खोलें
3. अपना HTML कंटेंट दर्ज करें
4. दिखावट की पुष्टि करने के लिए पूर्वावलोकन करें

चरण 3: स्थिति और शैली

1. आवश्यकता पड़ने पर क्रम बदलने के लिए खींचें
2. इनलाइन स्टाइल या क्लास जोड़ें
3. फ्रंटएंड पर परीक्षण करें

HTML ब्लॉक के सामान्य उपयोग

1. अनुभाग शीर्षक

व्यक्तिगत जानकारी कृपया नीचे अपनी संपर्क जानकारी प्रदान करें।

रिजल्ट:

Personal Information
कृपया नीचे अपना संपर्क विवरण प्रदान करें।

2. क्षैतिज विभाजक

रिजल्ट: अनुभागों को अलग करने वाली एक स्पष्ट रेखा।

3. निर्देश बॉक्स

 महत्वपूर्ण: आगे बढ़ने से पहले कृपया अपना ऑर्डर नंबर तैयार रखें।

4. बुलेटेड निर्देश

सबमिट करने से पहले, कृपया सुनिश्चित करें: सभी आवश्यक फ़ील्ड भरे गए हैं आपका ईमेल पता सही है आपने नीचे दिए गए नियमों और शर्तों की समीक्षा कर ली है।

5. छवि

6. एम्बेडेड वीडियो

7. चेतावनी/अलर्ट बॉक्स

 ⚠️ चेतावनी: भेजने के बाद सबमिशन को संपादित नहीं किया जा सकता है।

8. सफलता/सूचना बॉक्स

 ✓ आपकी प्रगति स्वचालित रूप से सहेजी जाती है।

9. गोपनीयता सूचना

आपकी जानकारी हमारी गोपनीयता नीति के अंतर्गत सुरक्षित है। हम आपका डेटा कभी भी किसी तीसरे पक्ष के साथ साझा नहीं करेंगे।

10. नियम एवं शर्तों का सारांश

 सेवा की शर्तें इस फॉर्म को जमा करके, आप इससे सहमत होते हैं...

फॉर्म लेआउट के उदाहरण

बहु-खंड प्रपत्र

[HTML ब्लॉक: अनुभाग 1 - व्यक्तिगत जानकारी शीर्षक] नाम फ़ील्ड ईमेल फ़ील्ड फ़ोन फ़ील्ड [HTML ब्लॉक: विभाजक] [HTML ब्लॉक: अनुभाग 2 - परियोजना विवरण शीर्षक] परियोजना प्रकार ड्रॉपडाउन विवरण टेक्स्ट एरिया बजट फ़ील्ड [HTML ब्लॉक: विभाजक] [HTML ब्लॉक: अनुभाग 3 - अंतिम चरण शीर्षक] फ़ाइल अपलोड शर्तें चेकबॉक्स सबमिट बटन

निर्देशात्मक प्रपत्र

[HTML ब्लॉक: स्वागत संदेश और निर्देश] [HTML ब्लॉक: चरण 1 संकेतक] प्रश्न 1 प्रश्न 2 [HTML ब्लॉक: चरण 2 संकेतक] प्रश्न 3 प्रश्न 4 [HTML ब्लॉक: समीक्षा अनुस्मारक] सबमिट बटन

आवेदन प्रपत्र

[HTML ब्लॉक: कंपनी का लोगो] [HTML ब्लॉक: पद का नाम और विवरण] नाम फ़ील्ड ईमेल फ़ील्ड [HTML ब्लॉक: "अपना रिज्यूमे अपलोड करें" निर्देश और प्रारूप संबंधी आवश्यकताएँ] फ़ाइल अपलोड फ़ील्ड [HTML ब्लॉक: समान अवसर संबंधी कथन] सबमिट बटन

एचटीएमएल ब्लॉकों को स्टाइल करना

इनलाइन शैलियाँ

एलिमेंट्स में सीधे स्टाइल जोड़ें:

यहां अपनी शैलीबद्ध सामग्री प्रस्तुत करें।

सामान्य शैली गुण

पृष्ठभूमि: background: #f5f5f5; पैडिंग: padding: 15px; मार्जिन: margin: 20px 0; बॉर्डर: border: 1px solid #ddd; बॉर्डर त्रिज्या: border-radius: 5px; फ़ॉन्ट आकार: font-size: 14px; रंग: color: #333; टेक्स्ट संरेखण: text-align: center;

स्टाइल वाले बॉक्स बनाना

सूचना बॉक्स (नीला):

 ℹ️ सूचना संदेश यहाँ

सफलता बॉक्स (हरा):

 ✓ सफलता का संदेश यहाँ

चेतावनी बॉक्स (पीला):

 ⚠️ चेतावनी संदेश

त्रुटि बॉक्स (लाल):

 ✕ यहां त्रुटि या महत्वपूर्ण चेतावनी है

रिस्पॉन्सिव डिज़ाइन के लिए सुझाव

छावियां

रिस्पॉन्सिव इमेज के लिए हमेशा max-width का उपयोग करें:

वीडियो

एम्बेडेड वीडियो के लिए रिस्पॉन्सिव रैपर का उपयोग करें:

पाठ पठनीयता

• सापेक्ष फ़ॉन्ट आकार (em, rem) का उपयोग करें
• पंक्तियों की लंबाई पठनीय रखें।
• मोबाइल पर पर्याप्त गद्दी

सर्वोत्तम प्रथाएं

1. इसे संक्षिप्त रखें

• संक्षिप्त, आसानी से पढ़ा जा सकने वाला पाठ
• पैराग्राफ के ऊपर बुलेट पॉइंट
• केवल आवश्यक जानकारी

2. दृश्य पदानुक्रम

• स्पष्ट शीर्षक
• सुसंगत शैली
• तार्किक प्रवाह

3। सरल उपयोग

• छवियों के लिए वैकल्पिक पाठ
• पर्याप्त रंग कंट्रास्ट
• सिमेंटिक एचटीएमएल (h2, h3, p, ul)
• अर्थ समझने के लिए केवल रंग पर ही निर्भर न रहें

4. इसे ज़्यादा मत करो

• बहुत अधिक सामग्री से मन अभिभूत हो जाता है
• इनपुट फ़ील्ड के साथ सामग्री को संतुलित करें
• प्रत्येक एचटीएमएल ब्लॉक का उद्देश्य

5. पूरी तरह से परीक्षण करें

• डेस्कटॉप और मोबाइल पर पूर्वावलोकन करें
• सभी लिंक काम कर रहे हैं या नहीं, इसकी जांच कर लें।
• छवियों के लोड होने की पुष्टि करें
• अलग-अलग ब्राउज़रों में परीक्षण करें

उन्नत HTML ब्लॉक विचार

प्रगति संकेतक

1  2  3 चरण 2/3: परियोजना विवरण

दो-स्तंभ लेआउट

विकल्प ए विकल्प A का विवरण... विकल्प बी विकल्प बी का विवरण...

ढहने योग्य अनुभाग (विवरण/सारांश)

पूरी शर्तें पढ़ने के लिए क्लिक करें नियम और शर्तों का पूरा पाठ यहां पढ़ें...

आइकन सूची

✓ $50 से अधिक के ऑर्डर पर मुफ़्त शिपिंग ✓ 30 दिन की मनी-बैक गारंटी ✓ चौबीसों घंटे ग्राहक सहायता

उलटी गिनती/तत्काल आवश्यकता

 🔥 सीमित समय का ऑफर - पात्रता हासिल करने के लिए शुक्रवार तक आवेदन करें!

सुरक्षा संबंधी बातें

क्या सुरक्षित है?

• मानक HTML टैग (p, div, h1-h6, ul, li, आदि)
• इनलाइन शैलियाँ
• विश्वसनीय स्रोतों से ली गई तस्वीरें
• प्रमुख प्लेटफार्मों से एम्बेडेड वीडियो

से बचने के लिए क्या

• एचटीएमएल ब्लॉक में जावास्क्रिप्ट (हटाया जा सकता है)
• बाह्य स्क्रिप्ट
• अविश्वसनीय iframe स्रोत
• HTML ब्लॉक के अंदर फॉर्म तत्व

स्क्रिप्ट संबंधी प्रतिबंधों पर ध्यान दें

अधिकांश फॉर्म बिल्डर XSS हमलों से बचाव के लिए HTML को सैनिटाइज करते हैं। सुरक्षा कारणों से जावास्क्रिप्ट और कुछ टैग स्वचालित रूप से हटाए जा सकते हैं।

समस्या निवारण

HTML प्रदर्शित नहीं हो रहा है

• वाक्य संरचना संबंधी त्रुटियों की जाँच करें
• सुनिश्चित करें कि टैग ठीक से बंद हैं
• कुछ टैग प्रतिबंधित हो सकते हैं

स्टाइलिंग लागू नहीं है

• इनलाइन शैली सिंटैक्स की जाँच करें
• थीम सीएसएस इसे ओवरराइड कर सकता है
• अधिक विशिष्ट शैलियों का उपयोग करें या !important का उपयोग करें

चित्र प्रदर्शित नहीं हो रहे हैं

• छवि यूआरएल सही है या नहीं, इसकी पुष्टि करें।
• छवि की अनुमतियाँ जांचें
• पूरा यूआरएल इस्तेमाल करें (https://…)

मोबाइल पर लेआउट में गड़बड़ी

• छवियों में अधिकतम चौड़ाई 100% जोड़ें
• फ्लेक्सिबल लेआउट (फ्लेक्सबॉक्स) का उपयोग करें
• वास्तविक मोबाइल डिवाइस पर परीक्षण करें

सारांश

फॉर्म में कस्टम HTML सामग्री जोड़ना:

1. एचटीएमएल ब्लॉक जोड़ें – इसे अपने फॉर्म में ड्रैग करें
2. सामग्री दर्ज करें – सेटिंग पैनल में HTML
3. उचित स्थिति में रखें – संबंधित क्षेत्रों के बीच
4. आवश्यकतानुसार स्टाइल करें – इनलाइन शैलियाँ या क्लास
5. सुलभ रखें – ऑल्ट टेक्स्ट, कंट्रास्ट, सिमेंटिक एचटीएमएल
6. जिम्मेदारी से परीक्षण करें – डेस्कटॉप और मोबाइल

निष्कर्ष

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

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

क्या आप अपने फॉर्म को बेहतर बनाने के लिए तैयार हैं? ऑटो फॉर्म बिल्डर डाउनलोड करें और आज ही अपनी पसंद की सामग्री जोड़ना शुरू करें।