1 मिलियन से अधिक सक्रिय उपयोगकर्ताओं के साथ, फ़ॉर्म 7 से संपर्क करें WordPress के लिए सबसे लोकप्रिय संपर्क फ़ॉर्म प्लगइन्स में से एक है। उनका सबसे बड़ा नकारात्मक पक्ष यह है कि आप जो बॉक्स फ़ॉर्म जोड़ते हैं वह बहुत ही सरल दिख रहे हैं। शुक्र है, संपर्क प्रपत्र 7 आसानी से अपने WordPress विषय में सीएसएस का उपयोग कर स्टाइल किया जा सकता है। इस अनुच्छेद में, हम आपको दिखाएंगे कि वर्डप्रेस में स्टाइल के संपर्क फॉर्म 7 फॉर्म कैसे होंगे।
ध्यान दें: हम अब संपर्क फ़ॉर्म 7 प्लगइन की अनुशंसा नहीं करते हैं। इसके बजाय, हम WPForms की सलाह देते हैं, जो सबसे शुरुआती दोस्ताना संपर्क फ़ॉर्म प्लगइन है। आप मुफ्त में WPForms लाइट को भी डाउनलोड कर सकते हैं।
वर्डप्रेस में संपर्क फ़ॉर्म बनाने के लिए हमारे पास एक कदम गाइड है।
शुरू करना
हम मान रहे हैं कि आपने पहले ही संपर्क फ़ॉर्म 7 प्लगइन स्थापित कर लिया है और आपने अपना पहला संपर्क फ़ॉर्म बनाया है अगले चरण के लिए अपने संपर्क फ़ॉर्म के लिए शोर्ट को कॉपी करना है और उसे एक वर्डप्रेस पोस्ट या एक पेज में पेस्ट करना है, जहां आप अपना फॉर्म प्रदर्शित करना चाहते हैं।
इस लेख के लिए हमने डिफ़ॉल्ट संपर्क फ़ॉर्म का इस्तेमाल किया है और इसे वर्डप्रेस पृष्ठ में जोड़ा है। इस तरह हमारे परीक्षण स्थल पर संपर्क फ़ॉर्म देखा गया।
जैसा कि आप देख सकते हैं कि संपर्क फ़ॉर्म आपके वर्डप्रेस थीम से कुछ फ़ॉर्म स्टाइल्स को प्राप्त करता है इसके अलावा यह बहुत बुनियादी है
हम सीएसएस के उपयोग से संपर्क फ़ॉर्म 7 फॉर्म स्टाइल करेंगे। सभी सीएसएस आपकी थीम या बाल विषय की स्टाइलशीट में जाता है
वर्डप्रेस में स्टाइलिंग संपर्क फ़ॉर्म 7 फ़ॉर्म
फ़ॉर्म 7 से संपर्क फ़ॉर्म के लिए एक बहुत ही उपयोगी और मानक संगत कोड उत्पन्न करता है। प्रपत्र में प्रत्येक तत्व के साथ एक उचित आईडी और सीएसएस वर्ग संबद्ध है।
प्रत्येक संपर्क फ़ॉर्म सीएसएस वर्ग का उपयोग करता है .wpcf7 जो आप अपने फॉर्म को स्टाइल करने के लिए उपयोग कर सकते हैं
इस उदाहरण में हम अपने इनपुट फ़ील्ड में Google फ़ॉन्ट लोरा का उपयोग कर रहे हैं। वर्डप्रेस में Google फोंट जोड़ने के तरीके देखें।
div.wpcf7 {
पृष्ठभूमि रंग: #fbefde;
सीमा: 1 पीएक्स ठोस # एफ 28 एफ 27;
गद्दी: 20px;
}
। wpcf7 इनपुट [प्रकार = "टेक्स्ट"],
। wpcf7 इनपुट [प्रकार = "ईमेल"],
। wpcf7 टेक्सटेरा {
पृष्ठभूमि: # 725f4c;
रंग: #fff;
फ़ॉन्ट-परिवार: लोरा, बिना-सेरिफ़;
फ़ॉन्ट-शैली: इटैलिक;
}
.wpcf7 इनपुट [प्रकार = "सबमिट करें"],
। wpcf7 इनपुट [प्रकार = "बटन"] {
पृष्ठभूमि का रंग: # 725f4c;
चौड़ाई: 100%;
text-align: केंद्र;
पाठ बदलने: अपरकेस;
}
यह कैसे हमारे संपर्क फ़ॉर्म को इस सीएसएस लागू करने के बाद देखा गया है।
स्टाइलिंग मल्टीपल संपर्क फॉर्म 7 फॉर्म
हमने जो सीएसएस प्रयोग किया है उसके साथ समस्या यह है कि यह आपकी वेबसाइट पर सभी संपर्क प्रपत्र 7 फ़ॉर्म पर लागू हो जाएगा। यदि आप एकाधिक संपर्क फ़ॉर्म का उपयोग कर रहे हैं और उन्हें अलग तरीके से शैली बनाना चाहते हैं, तो आपको प्रत्येक प्रपत्र के लिए संपर्क फ़ॉर्म 7 से उत्पन्न आईडी का उपयोग करना होगा।
बस जिस पृष्ठ को आप संशोधित करना चाहते हैं वह पृष्ठ खोलें। अपने माउस को प्रपत्र में पहले फ़ील्ड पर ले जाएं, ठीक क्लिक करें और तत्व का निरीक्षण करें चुनें। ब्राउज़र स्क्रीन विभाजित होगी, और आपको पृष्ठ का स्रोत कोड दिखाई देगा। स्रोत कोड में, आपको फ़ॉर्म कोड की प्रारंभिक रेखा का पता लगाना होगा।
जैसा कि आप ऊपर दिए गए स्क्रीनशॉट में देख सकते हैं, हमारा संपर्क फ़ॉर्म कोड लाइन से शुरू होता है:
आईडी विशेषता इस विशेष रूप के लिए संपर्क फ़ॉर्म 7 द्वारा उत्पन्न एक अद्वितीय पहचानकर्ता है। यह प्रपत्र आईडी और पोस्ट आईडी का एक संयोजन है जहां यह फ़ॉर्म जोड़ा गया है।
हम अपने संपर्क फ़ॉर्म को स्टाइल करने के लिए हमारे सीएसएस में इस आईडी का उपयोग करेंगे। हम अपनी पहली सीएसएस स्निपेट में। Wpcf7 को बदल देंगे # Wpcf7-f201-p203-O1 ।
div # wpcf7-f201-p203-O1 {
पृष्ठभूमि रंग: #fbefde;
सीमा: 1 पीएक्स ठोस # एफ 28 एफ 27;
गद्दी: 20px;
}
# wpcf7-f201-p203-o1 इनपुट [प्रकार = "टेक्स्ट"],
# wpcf7-f201-p203-o1 इनपुट [प्रकार = "ईमेल"],
# wpcf7-f201-p203-o1 textarea {
पृष्ठभूमि: # 725f4c;
रंग: #fff;
फ़ॉन्ट-परिवार: लोरा, "ओपन सन्स", बिना-सेरिफ़;
फ़ॉन्ट-शैली: इटैलिक;
}
# wpcf7-f201-p203-o1 इनपुट [प्रकार = "सबमिट करें"],
# wpcf7-f201-p203-o1 इनपुट [प्रकार = "बटन"] {
पृष्ठभूमि का रंग: # 725f4c;
चौड़ाई: 100%;
text-align: केंद्र;
पाठ बदलने: अपरकेस;
}
स्टाइलिंग संपर्क फ़ॉर्म 7 सीएसएस हीरो के साथ फ़ॉर्म
कई वर्डप्रेस शुरुआती के पास सीएसएस लिखने का कोई अनुभव नहीं है, और वे इसे सीखने में समय बिताना नहीं चाहते हैं। सौभाग्य से, शुरुआती लोगों के लिए एक अद्भुत समाधान है जो आपको न सिर्फ अपने संपर्क फ़ॉर्म को स्टाइल करने देगा, बल्कि आपके वर्डप्रेस साइट के लगभग हर पहलू को भी देगा।
बस सीएसएस हीरो प्लगइन को स्थापित और सक्रिय करें और अपने फ़ॉर्म वाले पृष्ठ पर जाएं। सीएसएस हीरो टूलबार पर क्लिक करें और फिर उस तत्व पर क्लिक करें, जिसे आप शैली चाहते हैं सीएसएस हीरो आपको कोई भी कोड लिखने के बिना सीएसएस को संपादित करने के लिए एक आसान यूजर इंटरफेस प्रदान करेगा।
हम सभी को उम्मीद है कि इस आलेख ने आपको वर्डप्रेस में फ़ॉर्म फॉर्म 7 फार्म के बारे में सीखने में मदद की है