WordPress में CSS का उपयोग करके Contact Form 7 में फॉर्म्स को कैसे स्टाइल करें
क्या आप चाहते हैं कि आपके WordPress फॉर्म आपकी साइट के बाकी हिस्सों की तरह ही आकर्षक दिखें? Contact Form 7 के साथ, आप CSS का उपयोग करके अपने फॉर्म की उपस्थिति पर पूरा नियंत्रण रखते हैं। यह गाइड आपको Contact Form 7 फॉर्म को स्टाइल करने की चरण-दर-चरण प्रक्रिया से परिचित कराता है, जिससे आप अपने विज़िटर्स के लिए एक सहज, ब्रांडेड अनुभव बना सकते हैं।
Contact Form 7 फॉर्म को स्टाइल क्यों करें?
Contact Form 7 WordPress के सबसे लोकप्रिय प्लगइन्स में से एक है फॉर्म बनाने के लिए—लेकिन इसका डिफ़ॉल्ट लुक बेसिक है। क्लासिक WordPress थीम्स में कस्टम स्टाइलिंग आपको यह करने देती है:
अपनी साइट की ब्रांडिंग से मेल करें
उपयोगिता और एक्सेसिबिलिटी सुधारें
फॉर्म को अधिक आकर्षक और पेशेवर बनाएं
चरण 1: अपने फॉर्म के CSS सेलेक्टर्स की पहचान करें
स्टाइलिंग शुरू करने से पहले, आपको यह जानना होगा कि कौन से CSS सेलेक्टर्स आपके फॉर्म एलिमेंट्स को टार्गेट करते हैं।
हर Contact Form 7 फॉर्म एक यूनिक क्लास में रैप्ड होता है: .wpcf7
इनपुट फील्ड्स, टेक्स्टएरिया और सबमिट बटन जैसे व्यक्तिगत एलिमेंट्स स्टैंडर्ड HTML टैग्स का उपयोग करते हैं
चरण 2: अपनी WordPress साइट में कस्टम CSS जोड़ें
आप दो मुख्य तरीकों से CSS जोड़ सकते हैं:
Customizer के माध्यम से:
जाएं Appearance > Customize > Additional CSS और अपनी स्टाइल्स पेस्ट करें।
नोट: अधिक एडवांस्ड कस्टमाइज़ेशन के लिए अपनी चाइल्ड थीम की style.css फाइल में अपना CSS जोड़ें।
चरण 3: अपना कस्टम CSS लिखें
शुरुआत के लिए यहां कुछ सामान्य उदाहरण दिए गए हैं, जिनमें "text" और "submit" फॉर्म कंपोनेंट्स का उपयोग किया गया है:
सभी Contact Form 7 फॉर्म को स्टाइल करें
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
CSS में pseudo-classes, जैसे :hover, आपको एलिमेंट्स को उनकी स्थिति या यूज़र इंटरैक्शन के आधार पर स्टाइल करने देती हैं। उदाहरण के लिए, :hover pseudo-class तब स्टाइल लागू करती है जब कोई यूज़र माउस पॉइंटर को बटन या फील्ड पर ले जाता है। यह आमतौर पर बटन को हाइलाइट करने या होवर पर उनका रंग बदलने के लिए उपयोग किया जाता है, जिससे आपके फॉर्म अधिक इंटरैक्टिव और आकर्षक बनते हैं। अन्य उपयोगी pseudo-classes में :focus (जब कोई इनपुट चुना गया हो) और :active (जब कोई एलिमेंट क्लिक किया जा रहा हो) शामिल हैं। pseudo-classes का उपयोग करने से यूज़र अनुभव बेहतर होता है क्योंकि विज़िटर्स के फॉर्म के साथ इंटरैक्ट करने पर तुरंत फीडबैक मिलता है।
किसी विशेष फॉर्म को टार्गेट करें
हर फॉर्म का एक यूनिक ID होता है, जैसे #wpcf7-f123-o1। केवल उसी फॉर्म को स्टाइल करने के लिए इसका उपयोग करें:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
f123-o1 को अपने असली फॉर्म के ID से बदलें। आप अपने फॉर्म का यूनिक ID उस पेज को देखकर पा सकते हैं जिसमें आपका Contact Form 7 फॉर्म एम्बेड किया गया है, फॉर्म पर राइट-क्लिक करें और अपने ब्राउज़र में “Inspect” (या “Inspect Element”) चुनें। .wpcf7 क्लास वाले <div> को देखें—ID HTML कोड में id="wpcf7-f123-o1" जैसा दिखेगा। केवल उसी फॉर्म को टार्गेट करने के लिए इस ID का उपयोग अपने CSS सेलेक्टर में करें।
चरण 4: Contact Form 7 की बिल्ट-इन क्लासेस का उपयोग करें
Contact Form 7 अपने आप एलिमेंट्स में क्लासेस जोड़ता है, जिससे टार्गेटिंग और भी आसान हो जाती है। उदाहरण के लिए:
.wpcf7-form-control – सभी फॉर्म कंट्रोल्स
.wpcf7-submit – सबमिट बटन
आप फॉर्म एडिटर में अपनी खुद की क्लासेस भी जोड़ सकते हैं और भी अधिक नियंत्रण के लिए।
उदाहरण
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
चरण 5: प्रीव्यू करें और एडजस्ट करें
अपना CSS सेव करने के बाद, अपनी साइट को रिफ्रेश करें और बदलाव देखें। अपने ब्राउज़र के इंस्पेक्टर टूल का उपयोग करके रियल टाइम में स्टाइल्स को ट्वीक करें, फिर उन्हें अपनी साइट में कॉपी करें। बदलाव करने के बाद अपनी वेबसाइट का कैश जरूर क्लियर करें ताकि अपडेट्स विज़िटर्स को दिखें।
यहां एक डेमो वेबसाइट पर फॉर्म के पहले और बाद के उदाहरण दिए गए हैं, जहां हमने Step 3 के CSS कोड का उपयोग करके हर फॉर्म फील्ड के चारों ओर बॉक्स को नीला बना दिया।
बेहतर फॉर्म स्टाइलिंग के लिए त्वरित सुझाव
इसे एक्सेसिबल रखें: अच्छे रंग कंट्रास्ट और पढ़ने योग्य फॉन्ट साइज सुनिश्चित करें
स्पेसिंग का उपयोग करें: साफ-सुथरे, बिना भीड़ वाले लुक के लिए पैडिंग और मार्जिन जोड़ें
त्रुटियों को हाइलाइट करें: यूज़र्स को गलतियाँ सुधारने में मदद के लिए एरर मैसेज को स्पष्ट रंग (जैसे लाल) से स्टाइल करें
मोबाइल पर टेस्ट करें: सुनिश्चित करें कि आपके फॉर्म सभी डिवाइस पर शानदार दिखें
समस्या निवारण
अगर आपकी स्टाइल्स नहीं दिख रही हैं, तो ये कदम आज़माएं:
अपने ब्राउज़र और साइट का कैश क्लियर करें – कभी-कभी कैश्ड फाइल्स नई CSS को दिखने से रोकती हैं। अगर आप कोई कैशिंग प्लगइन या मैनेज्ड होस्टिंग का उपयोग करते हैं, तो उनका कैश भी क्लियर करें।
CSS विशिष्टता की समस्याओं की जांच करें – अगर आपकी स्टाइल्स लागू नहीं हो रही हैं, तो अपने सेलेक्टर्स को और अधिक विशिष्ट बनाकर मौजूदा स्टाइल्स को ओवरराइड करने की कोशिश करें।
सुनिश्चित करें कि आप सही CSS फाइल या सेक्शन एडिट कर रहे हैं – दोबारा जांचें कि आप अपना कोड सही जगह जोड़ रहे हैं, जैसे Additional CSS पैनल, अपनी चाइल्ड थीम की style.css, या कोई कस्टम CSS प्लगइन।
CSS क्लासेस में टाइपो या त्रुटियों की समीक्षा करें – गलत स्पेलिंग वाली क्लास नेम्स, अनावश्यक स्पेसेज़, या गलत क्लास के उपयोग की जांच करें। साथ ही, यह भी सुनिश्चित करें कि जिस क्लास को आप टार्गेट कर रहे हैं, वह वास्तव में आपके फॉर्म के HTML में मौजूद है।
डुप्लिकेट या विरोधी क्लासेस की जांच करें – सुनिश्चित करें कि जिस क्लास का आप उपयोग कर रहे हैं, वह कहीं और अलग स्टाइल्स के साथ पहले से लागू नहीं है, जिससे आपके बदलाव ओवरराइड हो सकते हैं।
सामान्य सर्वोत्तम प्रथाओं का पालन करें – अपनी क्लासेस के लिए स्पष्ट और सुसंगत नामकरण का उपयोग करें, हर CSS नियम के अंत में सेमीकोलन लगाएं, और हमेशा कोड ब्लॉक्स को कर्ली ब्रैस (}) से सही तरीके से बंद करें।
इन सामान्य समस्याओं के लिए अपने कोड की सावधानीपूर्वक समीक्षा करने से यह सुनिश्चित करने में मदद मिलेगी कि आपकी कस्टम स्टाइल्स आपकी साइट पर सही तरीके से दिखाई दें।
उदाहरण: Contact Form 7 फॉर्म के लिए पूरी तरह से कस्टम CSS
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
ऊपर दिए गए CSS कोड से स्टाइल किए गए फॉर्म का एक उदाहरण यहां है। यह CSS कोड आपके Contact Form 7 फॉर्म के कई प्रमुख एलिमेंट्स की उपस्थिति को कस्टमाइज़ करता है। यह सभी टेक्स्ट फील्ड्स, ईमेल फील्ड्स और टेक्स्टएरिया को टार्गेट करता है, उन्हें हल्की ग्रे बॉर्डर, गोल कोने, आरामदायक पैडिंग और एकसमान चौड़ाई देता है ताकि एक साफ, आधुनिक लुक मिले।
यह कोड सबमिट बटन को भी हरे रंग की पृष्ठभूमि, सफेद टेक्स्ट, गोल किनारे और बोल्ड, पढ़ने में आसान फॉन्ट के साथ स्टाइल करता है। जब यूज़र सबमिट बटन पर होवर करता है, तो पृष्ठभूमि का रंग गहरा हरा हो जाता है, जिससे इंटरैक्टिव फीडबैक मिलता है।
CSS जोड़ना: क्लासिक थीम्स बनाम ब्लॉक थीम्स
इस गाइड में दिए गए Contact Form 7 फॉर्म को CSS के साथ स्टाइल करने के स्टेप्स WordPress के क्लासिक थीम्स के लिए डिज़ाइन किए गए हैं। क्लासिक थीम्स, जैसे लोकप्रिय Astra, Customizer का उपयोग करते हैं, जहां आप आसानी से “Additional CSS” सेक्शन के तहत कस्टम CSS जोड़ सकते हैं। इससे अपने फॉर्म को स्टाइल करना और बदलावों को लाइव देखना आसान हो जाता है।
हालांकि, अगर आपकी साइट ब्लॉक थीम (जिसे कभी-कभी Full Site Editing या FSE थीम भी कहा जाता है) का उपयोग करती है, तो प्रक्रिया अलग है। ब्लॉक थीम्स में हमेशा डिफ़ॉल्ट रूप से Customizer या “Additional CSS” फील्ड शामिल नहीं होती। इसके बजाय, आप डिज़ाइन बदलाव करने के लिए Site Editor का उपयोग करते हैं। जबकि आप रंग, टाइपोग्राफी और लेआउट के लिए ग्लोबल स्टाइल्स एडजस्ट कर सकते हैं, UI में मनमाना कस्टम CSS जोड़ना हमेशा उपलब्ध नहीं होता।
अगर आप ब्लॉक थीम का उपयोग कर रहे हैं तो क्या करें
अपना WordPress डैशबोर्ड खोलें और Appearance > Editor (Site Editor) पर जाएं।
Site Editor में, Styles पैनल (आधा-छायांकित सर्कल आइकन) देखें।
कुछ ब्लॉक थीम्स अब Styles पैनल में “Additional CSS” विकल्प देती हैं, लेकिन यह आपके थीम और WordPress वर्शन पर निर्भर करता है।
अगर आपको कस्टम CSS जोड़ने का विकल्प नहीं दिखता, तो आप WPCode जैसे प्लगइन का उपयोग करके साइट-वाइड कस्टम CSS जोड़ सकते हैं। WPCode शुरुआती लोगों के लिए अनुकूल है और किसी भी थीम के साथ काम करता है, जिससे आप अपने फॉर्म को स्टाइल कर सकते हैं, भले ही आपकी थीम UI में डायरेक्ट CSS एडिटिंग को सपोर्ट न करती हो। बस ध्यान रखें कि इस प्लगइन को इंस्टॉल करने से आपकी वेबसाइट के अन्य मौजूदा फॉर्म्स की स्टाइल पर भी असर पड़ सकता है।
अतिरिक्त संसाधन
अपने Contact Form 7 फॉर्म्स को स्टाइल करना एक सरल लेकिन शक्तिशाली तरीका है जिससे आप अपनी साइट के यूज़र अनुभव को बेहतर बना सकते हैं। केवल कुछ लाइनों के CSS के साथ, आप अपने फॉर्म्स को अपनी ब्रांड का स्वाभाविक हिस्सा बना सकते हैं।