फोटो पर कॉन्टैक्ट फॉर्म 7 कैसे बनाएं। प्रपत्र के सभी फ़ील्ड (टैग)। कैप्चा के लिए टेक्स्ट इनपुट फ़ील्ड इंटरनेट एक्सप्लोरर पर काम करता है, लेकिन फ़ायरफ़ॉक्स पर नहीं। कोड दर्ज करने में असमर्थ

(आखिरी अपडेट: 19.05.2019)

नमस्कार, प्रिय पाठक! आज मैं आपको दिखाऊंगा कि फॉर्म कैसे बनाते हैं प्रतिक्रियावर्डप्रेस में एक वेबसाइट/ब्लॉग के लेखक के साथ, लोकप्रिय संपर्क फ़ॉर्म 7 प्लगइन (5 मिलियन से अधिक इंस्टॉलेशन) का उपयोग करके। पोस्ट में शामिल है : सही सेटिंगसंपर्क प्रपत्र 7, एंटी-स्पैम सुरक्षा, कैसे बदलें और कॉन्फ़िगर करें उपस्थितिप्रपत्र. उन्होंने मुख्य कारण यह भी बताया कि क्यों संपर्क फ़ॉर्म काम नहीं करता है और ईमेल नहीं भेजता है। .

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

ओह, पत्र आ गया! संपर्क प्रपत्र 7 अच्छा किया गया

प्रिय पाठक, मैं आपको इस सब लेखन से बोर नहीं करूंगा - चलिए काम पर आते हैं। वर्डप्रेस के लिए मॉड्यूल की स्थापना और सही कॉन्फ़िगरेशन - संपर्क फ़ॉर्म 7।

वर्डप्रेस संपर्क फ़ॉर्म 7 प्लगइन

WP संपर्क प्रपत्र 7 के लिए प्लगइन

संपर्क फ़ॉर्म 7 कई संपर्क फ़ॉर्म प्रबंधित कर सकता है जहां आप काफी सरल लेआउट के साथ फ़ॉर्म और मेल सामग्री को लचीले ढंग से अनुकूलित कर सकते हैं। फॉर्म में Ajax सबमिशन, CAPTCHA, Akismet स्पैम फ़िल्टर और बहुत कुछ के लिए अंतर्निहित समर्थन है।

हम वर्डप्रेस एडमिन पैनल में सभी हेरफेर करते हैं। प्लगइन स्थापित करने के लिए, "प्लगइन्स" अनुभाग में, "नया जोड़ें" पर क्लिक करें। "खोज" विंडो में संपर्क फ़ॉर्म 7 दर्ज करें। स्वाभाविक रूप से, यह पहले प्रदर्शित किया जाएगा। "इंस्टॉल करें" बटन पर क्लिक करें:

प्लगइन कैसे इंस्टॉल करें

डिफ़ॉल्ट रूप से संपर्क फ़ॉर्म #1

तस्वीर से आप देख सकते हैं कि डिफ़ॉल्ट रूप से संपर्क फ़ॉर्म का एक मानक संस्करण और एक नए पेज, पोस्ट या साइडबार (टेक्स्ट विजेट के माध्यम से) में डालने के लिए एक तैयार शॉर्टकोड होता है। संपर्क फ़ॉर्म 7 डिफ़ॉल्ट उपस्थिति, साइट के एक अलग पृष्ठ पर स्थापित:

उपस्थिति: वर्डप्रेस साइट पर मानक संपर्क फ़ॉर्म

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

संपर्क फ़ॉर्म संपादित करें पृष्ठ खुलता है. प्लगइन रूसी में है और इसलिए आपके लिए यह पता लगाना बहुत आसान होगा कि क्या है। प्रपत्र टेम्पलेट टैब. आप अपनी आवश्यकताओं के अनुरूप फॉर्म टेम्पलेट बदल सकते हैं।

उदाहरण के लिए, किसी प्रपत्र टेम्पलेट में फ़ाइल अपलोड टैग जोड़ने के लिए, आपको यह करना होगा: टैग डालने के स्थान को माउस से चिह्नित करें (अधिमानतः संदेश के बाद) और उपयुक्त "फ़ाइल" टैब पर क्लिक करें। इस सुविधा के साथ, आप उपयोगकर्ताओं को अपने फॉर्म के माध्यम से अपनी फ़ाइलें अपलोड करने की अनुमति दे सकते हैं, और फिर आपको फ़ाइल अनुलग्नकों के साथ एक ईमेल भेजा जाएगा:

संपर्क फ़ॉर्म संपादित करें. फ़ाइल टैब

एक विंडो खुलेगी - फॉर्म टैग जेनरेटर: फ़ाइल:

डाउनलोड की गई फ़ाइल को मेल में संलग्न करने के लिए, आपको एक टैग डालना होगा ()

संपर्क फ़ॉर्म 7 डिफ़ॉल्ट फ़ाइल प्रकार और फ़ाइल आकार सीमा लागू करता है। जब आप अपने विकल्प सेट नहीं करते हैं, तो डिफ़ॉल्ट फ़ाइल एक्सटेंशन हैं: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, और डब्लूएमवी. ए अनुमेय आकारफ़ाइल 1 एमबी (1048576 बाइट्स) है। "इन्सर्ट टैग" बटन पर क्लिक करें:

फ़ाइल टैग को प्रपत्र टेम्पलेट में डाला गया है

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

बटन संपर्क प्रपत्र में फ़ाइल का चयन करें

यदि आप सब कुछ सही ढंग से करते हैं, तो आपको अतिरिक्त फ़ील्ड के साथ कोई समस्या नहीं होगी।

मेल, फॉर्म सबमिशन नोटिफिकेशन और उन्नत सेटिंग्स टैब भी जांचें। मेरी राय में वहां कुछ भी बदलने की जरूरत नहीं है. यदि केवल अतिरिक्त सेटिंग्स में आप पैरामीटर निर्दिष्ट कर सकते हैं - केवल ग्राहकों के लिए - subscriber_only: true । विस्तृत जानकारी के लिए उन्नत सेटिंग्स पृष्ठ का एक लिंक होगा।

और अब, दोस्तों, हमें तैयार संपर्क फ़ॉर्म को वेब संसाधन के एक अलग, नए पेज या साइडबार पर रखना होगा। ऐसा करना आसान है।

हम संपर्क फ़ॉर्म को वेबसाइट/ब्लॉग के एक अलग पृष्ठ पर रखते हैं

सभी सेटिंग्स और फॉर्म को सेव करने के बाद, कॉन्टैक्ट फॉर्म या एडिट कॉन्टैक्ट फॉर्म पेज पर शॉर्टकोड को कॉपी करें। इसके बाद एक नया पेज बनाएं - सेक्शन पेज - नया जोड़ें। पृष्ठ का नाम दर्ज करें, उदाहरण के लिए "संपर्क"। संदेश संपादक को "टेक्स्ट" मोड पर स्विच करें और शॉर्टकोड को संदेश फ़ील्ड में पेस्ट करें:

संपर्क फ़ॉर्म के साथ नया पेज

यदि आपके पास मेनू में स्वचालित रूप से एक नया पेज जोड़ा गया है, तो "ऑर्डर" को 1, 2 या 3 पर सेट करें (मेनू में जो भी हो, संपर्क पृष्ठ प्रदर्शित किया जाएगा)। "प्रकाशित करें" बटन पर क्लिक करें. सभी। तैयार। आप मेनू में मैन्युअल रूप से भी एक पेज जोड़ सकते हैं। अब आपके पास ब्लॉग/साइट के लेखक से संपर्क करने के लिए एक फॉर्म है।

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

क्या आप संपर्क प्रपत्र 7 के माध्यम से स्पैम प्राप्त कर रहे हैं?

सुरक्षा है. स्पैमर हर चीज़ को प्रभावित करते हैं, और आपके संपर्क फ़ॉर्म कोई अपवाद नहीं हैं। इससे पहले कि आप स्पैम हो जाएं, अपने संपर्क फ़ॉर्म को संपर्क फ़ॉर्म 7 की शक्तिशाली एंटी-स्पैम सुविधाओं से सुरक्षित रखें।

संपर्क फ़ॉर्म 7 Akismet के साथ स्पैम फ़िल्टरिंग का समर्थन करता है। इंटेलिजेंट reCAPTCHA कष्टप्रद स्पैम बॉट्स को ब्लॉक करता है। टिप्पणी ब्लॉकलिस्ट का उपयोग करके आप कुछ निश्चित संदेशों को भी ब्लॉक कर सकते हैं कीवर्डया विशिष्ट आईपी पते से भेजा गया।

"एकीकरण" पर क्लिक करें। Google की reCAPTCHA सेवा आपको स्पैम और अन्य प्रकार के स्वचालित दुरुपयोग से बचाती है। संपर्क फ़ॉर्म 7 रीकैप्चा एकीकरण मॉड्यूल के साथ, आप फ़ॉर्म को स्पैमबॉट्स द्वारा सबमिट होने से रोक सकते हैं।

Google reCAPTCHA v3 एकीकरण: एंटी-स्पैम सुरक्षा

अन्य रीकैप्चा सेवाओं के साथ प्लगइन एकीकरण

सेटअप एकीकरण पर क्लिक करें, और फिर ReCaptcha API कुंजियाँ प्राप्त करने के लिए लिंक का अनुसरण करें:

reCAPTCHA है गूगल सेवा

reCAPTCHA का उपयोग शुरू करने के लिए, आपको सबसे पहले अपनी वर्डप्रेस साइट को पंजीकृत करना होगा। reCAPTCHA एक Google सेवा है, इसलिए इसका उपयोग करने के लिए आपको इसकी आवश्यकता है गूगल खाता. का उपयोग करके Google में साइन इन करें खाता, और लिंक का अनुसरण करें https://www.google.com/recaptcha/admin. आपको एक सरल पंजीकरण फॉर्म दिखाई देगा जैसे:

एक वर्डप्रेस साइट पंजीकृत करें. गुडल रीकैप्चा

कृपया एक नाम प्रदान करें. reCAPTCHA v3 का चयन करें (reCAPTCHA v3 के लिए CAPTCHA विजेट की आवश्यकता नहीं है (reCAPTCHA v2 में "मैं एक रोबोट नहीं हूं" चेकबॉक्स का उपयोग किया जाता है)) और डोमेन फ़ील्ड में साइट डोमेन दर्ज करें। साइट पंजीकृत करने के बाद, आपको एक साइट कुंजी और एक गुप्त कुंजी प्राप्त होगी। उन्हें दर्ज करें (ऊपर स्क्रीनशॉट) और सेटिंग्स सहेजें। बस इतना ही। आपका संपर्क फ़ॉर्म अब यह जांचने के लिए एक रीकैप्चा खाते का उपयोग करता है कि संदेश किसी मानव या स्पैमबॉट से भेजा गया था।

यदि आप संपर्क फ़ॉर्म 7 स्थापित करने का निर्णय लेते हैं, तो मैं इसके अतिरिक्त संपर्क फ़ॉर्म 7 स्टाइल ऐडऑन स्थापित करने की अनुशंसा करता हूँ। यह आपको अपने फॉर्म का स्वरूप संपादित करने की अनुमति देगा। आप न केवल किसी एक को चुन सकते हैं तैयार टेम्पलेट, बल्कि अपना स्वयं का अनूठा डिज़ाइन भी बनाएं। क्या आप अपना लुक बदलना चाहते हैं? फिर यह सिलसिला विशेष रूप से आपके लिए है, सौंदर्य प्रेमियों के लिए।

संपर्क प्रपत्र की उपस्थिति - संपर्क प्रपत्र 7 शैली

फीडबैक फॉर्म 7 के लिए शैलियाँ

कॉन्टैक्ट फॉर्म 7 स्टाइल प्लगइन कॉन्टैक्ट फॉर्म 7 के लिए एक ऐडऑन है जिसे आपके वर्डप्रेस साइट पर इंस्टॉल करना होगा। कस्टम शैलियों का समर्थन करता है जिन्हें व्यवस्थापक पैनल के माध्यम से आसानी से प्रबंधित किया जा सकता है। ऐसे पूर्वनिर्धारित टेम्पलेट भी हैं जिन्हें संपर्क फ़ॉर्म 7 सेटिंग्स में सक्रिय किया जा सकता है। मुख्य प्लगइन सेटिंग्स में एक नया टैब दिखाई देगा - संपर्क फ़ॉर्म 7 स्टाइल टेम्पलेट। उपस्थिति अनुकूलन:

तैयार प्रपत्र टेम्पलेट

उदाहरण के लिए, मैंने मानक बाहरी को इस अच्छे से बदल दिया:

संपर्क फ़ॉर्म की उपस्थिति

यह न भूलें कि आप अपने स्वयं के कस्टम शैली पैरामीटर सेट कर सकते हैं:

प्लगइन कस्टम शैलियों का समर्थन करता है जिन्हें व्यवस्थापक पैनल के माध्यम से प्रबंधित किया जा सकता है

निष्कर्ष के तौर पर:

संपर्क फ़ॉर्म 7 से ईमेल भेजना अधिकांश लोगों के लिए बिना किसी समस्या के काम करता है। लेकिन यह पता चला है कि यह हर किसी के लिए नहीं है। भले ही प्लगइन हर दिन सफलतापूर्वक लाखों ईमेल भेजता है, फिर भी कई समस्याएं हैं जो देरी या रोक सकती हैं ईमेल, एक सामान्य ईमेल के भेजने और प्राप्त करने दोनों पक्षों पर।

संपर्क फ़ॉर्म 7 काम क्यों नहीं करता (ईमेल भेजें)?

1. आपकी होस्टिंग में समस्याएँ. यह ध्यान रखना महत्वपूर्ण है कि ईमेल भेजना और प्राप्त करना काफी हद तक उस सर्वर पर निर्भर करता है जिस पर आपकी वर्डप्रेस साइट होस्ट की गई है;
2. सुनिश्चित करें कि सही रिटर्न ईमेल पते का उपयोग किया गया है;
3. आपका ईमेल स्पैम माना जा सकता है;
4. संपर्क फ़ॉर्म 7 के साथ प्लगइन्स या थीम का टकराव;
5. जावास्क्रिप्ट विरोध.

यदि आप इस प्लगइन से ईमेल नहीं भेज सकते हैं, तो संभावना है कि आप सामान्य रूप से वर्डप्रेस से ईमेल नहीं भेज पाएंगे। यदि कुछ होता है, सज्जनों, आप पृष्ठ पर प्लगइन के संचालन के बारे में अक्सर पूछे जाने वाले प्रश्नों के उत्तर प्राप्त कर सकते हैं https://contactform7.com/faq/.

या सहायता मंच परhttps://wordpress.org/support/plugin/contact-form-7/. अंग्रेजी भाषाइससे कोई फर्क नहीं पड़ता, आपके पसंदीदा ब्राउज़र के अनुवाद से सब कुछ स्पष्ट हो जाएगा।

मेरे पास यही है। ऐसा लगता है जैसे मैं कुछ भी नहीं भूला हूँ। शुभकामनाएं। शुभकामनाएँ मित्रो।

पी.एस. इससे पता चलता है कि पुरानी पोस्ट (पाठकों के लिए जानकारी हमेशा प्रासंगिक होनी चाहिए) को संपादित करने में लिखने जितना ही समय लगता है नये निर्देश. डरावनी!

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

वर्डप्रेस के बारे में थोड़ा

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

वेबसाइट बनाने और प्रचारित करने के लिए इस मंच की ताकत और कमजोरियां

इसके फायदे सॉफ्टवेयर प्लेटफार्मऐसा:

सरलता और खुला स्रोत कोड।

संदर्भ जानकारी की प्रभावशाली मात्रा.

कम से कम समय में इंटरनेट पर किसी भी विषयगत संसाधन को विकसित करने की क्षमता।

अतिरिक्त सॉफ़्टवेयर ऐड-ऑन (प्लगइन्स) के बिना उच्च प्रदर्शन।

लेकिन इस मामले में नुकसान निम्नलिखित हैं:

वर्डप्रेस पर बनी वेबसाइटें भारी भार को संभालने में सक्षम नहीं होंगी।

अतिरिक्त मिनी-प्रोग्राम स्थापित करते समय या, जैसा कि उन्हें प्लग-इन भी कहा जाता है, इंटरनेट संसाधन की गति में कमी आती है।

और वर्डप्रेस प्लेटफ़ॉर्म पर आधारित साइटों को उनकी आवश्यकता क्यों है?

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

विशेषज्ञता "संपर्क प्रपत्र 7"

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

प्लगइन स्थापना प्रक्रिया

वर्डप्रेस प्लेटफ़ॉर्म पर प्लगइन्स इंस्टॉल करने के तीन तरीके हैं:

वर्ल्ड वाइड वेब से एक ज़िप संग्रह डाउनलोड करके और उसे इंटरनेट संसाधन की उपयुक्त निर्देशिका में "अपलोड" करके।

विभिन्न प्रकार के एफ़टीपी क्लाइंट का उपयोग करना।

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

वर्डप्रेस एडमिन पैनल पर जाएं.

फिर आपको “प्लगइन्स” अनुभाग पर जाना होगा।

खुलने वाली विंडो में, "नया जोड़ें" चुनें।

खोज बार में, प्लगइन का नाम दर्ज करें - संपर्क फ़ॉर्म 7 - और फिर माउस पॉइंटर को "खोज" बटन पर ले जाएं और एक बार क्लिक करें। इसके बाद तलाश अभियान चलाया गया सॉफ़्टवेयर.

पूरा होने पर, पाए गए प्लगइन्स की एक सूची प्रदर्शित की जाएगी। इस सूची में हमें वह मिलता है जिसकी हमें आवश्यकता है और "इंस्टॉल" लेबल वाले बटन पर क्लिक करते हैं, जो इसके विपरीत स्थित है।

इसके बाद कंटेंट मैनेजमेंट सिस्टम स्वचालित रूप से इस प्लगइन को डाउनलोड और इंस्टॉल कर देगा।

अगला कदम इंस्टॉल किए गए सॉफ़्टवेयर को सक्रिय करना है। ऐसा करने के लिए, "प्लगइन्स" टैब पर जाएं और सूची में संपर्क फ़ॉर्म7 ढूंढें। इसके आगे शिलालेख है: "सक्रिय करें", माउस से एक बार उस पर क्लिक करें।

हम सामग्री प्रबंधन प्रणाली के प्रशासनिक पैनल को अपडेट करते हैं और इसके आइटमों के बीच संपर्क फ़ॉर्म7 ढूंढते हैं। यह इस लोकप्रिय और कार्यात्मक प्लगइन की सफल स्थापना के लिए शर्त है।



"संपर्क फ़ॉर्म 7" के लिए कॉन्फ़िगरेशन एल्गोरिथ्म

संपर्क फ़ॉर्म 7 की स्थापना में निम्नलिखित आइटम शामिल हैं:

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

अगले चरण में फॉर्म की भाषा चुनें और उसका नाम सेट करें।

फिर यदि आवश्यक हो तो आपको इसके टेम्पलेट को पुन: कॉन्फ़िगर करना होगा।

किए गए परिवर्तन सहेजें.

हम पहले प्राप्त कोड के साथ एक नया पेज बनाते हैं।

अंतिम चरण में आपको वेबसाइट पर जाकर चेक करना होगा सही संचालनइंटरनेट संसाधन इंटरफ़ेस का निर्मित तत्व।

एक नया फॉर्म बनाएं

सक्रियण के तुरंत बाद, यह प्लगइन साइट या ब्लॉग आगंतुकों से प्रश्न पूछने के लिए एक डिफ़ॉल्ट फॉर्म बनाता है। बेशक, इसे आवश्यकतानुसार संपादित और अनुकूलित किया जा सकता है। लेकिन इसे हटाना और इसके साथ नया बनाना बहुत आसान होगा पूरा स्थिरसभी आवश्यक कार्यक्षमता. ऐसा करने के लिए आपको निम्नलिखित कार्य करने होंगे:

इस प्लगइन के मेनू पर जाएं और “फॉर्म” चुनें।

इसके बाद खुलने वाली विंडो में, आपको "संपर्क फॉर्म 1" आइटम के बगल में स्थित बॉक्स को चेक करना होगा।

फिर, इसके ऊपर, "कार्रवाइयां" ड्रॉप-डाउन सूची में, "हटाएं" चुनें।

जवाब में, किए जा रहे कार्यों की पुष्टि करने के लिए एक प्रश्न दिखाई देगा। आपको फॉर्म को हटाने की पुष्टि करनी होगी और "हां" बटन पर क्लिक करना होगा।

इसके बाद, मेनू आइटम का चयन करें: प्रशासनिक पैनल "वर्डप्रेस" "संपर्क फॉर्म 7" में "नया बनाएं"।

खुलने वाली विंडो में, ड्रॉप-डाउन सूची में, भविष्य के फॉर्म की इंटरफ़ेस भाषा चुनें - "रूसी"। फिर "बनाएँ" बटन पर क्लिक करें।

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

फॉर्म का नाम सेट करें

पिछले सभी चरणों को पूरा करने के बाद, संपर्क फ़ॉर्म 7 स्टाइल में नए फॉर्म का नाम दर्ज करने के लिए एक विंडो दिखाई देगी। इसे स्थापित करना एक तरफ इस सरल ऑपरेशन से शुरू होता है। लेकिन फॉर्म का नाम इसके आधार पर देना बेहतर है सर्च इंजन अनुकूलन. इसलिए, इस मामले में सबसे इष्टतम विकल्प होगा, उदाहरण के लिए, "फीडबैक फॉर्म" या "साइट व्यवस्थापक से एक प्रश्न पूछें।" एक बार जब हम इस इंटरफ़ेस तत्व का नाम तय कर लेते हैं, तो इसे अनुरोध विंडो के संबंधित फ़ील्ड में दर्ज करें।



"संपर्क प्रपत्र 7" टेम्पलेट का संपादन

बनाए गए फॉर्म के नाम के साथ एक ही विंडो में 4 टैब हैं। पहला है "टेम्पलेट"। डिफ़ॉल्ट रूप से, यहां केवल 5 तत्व बनते हैं:

इंटरनेट संसाधन पर विज़िटर का नाम टाइप करने का स्थान।

ईमेल पता डायलिंग फ़ील्ड मेलबॉक्सआगंतुक जिसने प्रश्न पूछा।

एक अन्य फ़ील्ड आपको प्रश्न का विषय दर्ज करने की अनुमति देता है।

डिफ़ॉल्ट रूप से फॉर्म का अंतिम तत्व "सबमिट" लेबल वाला एक बटन है।

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

फ़ील्ड की लंबाई और अधिक निर्धारित करना

उसी स्थान पर आप संपर्क फ़ॉर्म 7 में इनपुट बदल सकते हैं। किसी भी टेक्स्ट फ़ील्ड की चौड़ाई को समायोजित करना निम्नानुसार किया जाता है:

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

ऐसा करने के लिए, कोड के अंत में संख्या 60/55 जोड़ें। परिणाम कोड होगा. परिवर्तनों को सहेजने के बाद, इस फ़ील्ड की लंबाई 60 होगी, और इसमें दर्ज किए जा सकने वाले वर्णों की अधिकतम संख्या 55 होगी।

आप इसी प्रकार संदेश टेक्स्ट फ़ील्ड का आकार बदल सकते हैं. केवल इस मामले में इस तत्व के कोड को निम्नानुसार बदलना आवश्यक है। इस मामले में, 40 एक पंक्ति में अक्षरों की संख्या है, और 30 संपर्क फ़ॉर्म 7 में इस इंटरफ़ेस तत्व में शब्दों की कुल संख्या है। फ़ॉर्म की उपस्थिति को सेट करना प्रत्येक के पैरामीटर मानों का चयन करके सटीक रूप से किया जाता है व्यक्तिगत तत्व. इसलिए, प्रत्येक तत्व के कोड में इस अनुभाग में दिए गए प्रत्येक पैरामीटर के लिए विशिष्ट मान निर्दिष्ट करने की अनुशंसा की जाती है।



अन्य प्रपत्र टैब

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

वे फ़ील्ड जिन्हें इस प्लगइन का उपयोग करके इस फ़ॉर्म में जोड़ा जा सकता है

वर्डप्रेस के लिए संपर्क फ़ॉर्म 7 सेट करने से आप फीडबैक फ़ॉर्म में निम्नलिखित इंटरफ़ेस तत्व जोड़ सकते हैं:

• परीक्षण फ़ील्ड एक सार्वभौमिक इंटरफ़ेस तत्व है जिसमें आप वर्णों के किसी भी सेट को दर्ज कर सकते हैं।

  ई-मेल - इलेक्ट्रॉनिक मेलबॉक्स का नाम दर्ज करने का स्थान।

  यूआरएल - इंटरनेट पेज का पता दर्ज करने के लिए फ़ील्ड।

  फ़ोन नंबर—आपको अंतर्राष्ट्रीय प्रारूप में फ़ोन नंबर दर्ज करने की अनुमति देता है।

  "नंबर (स्पिनबॉक्स)" तत्व आपको किसी भी पूर्णांक मान (उदाहरण के लिए, विज़िटर की आयु) के लिए एक इनपुट फ़ील्ड बनाने की अनुमति देता है।

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

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

  बदले में, "टेक्स्ट फ़ील्ड" ड्रॉप-डाउन मेनू आइटम ईमेल के टेक्स्ट भाग को टाइप करने के लिए है।

  अगला आइटम - "ड्रॉप-डाउन मेनू" - आपको एक निश्चित सूची से आवश्यक पैरामीटर का चयन करने की अनुमति देता है।

  लेकिन "चेकबॉक्स" का उद्देश्य किसी दी गई सूची से एक या अधिक मानों का चयन करना है।

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

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

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

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

  अगला आइटम "फ़ाइल भेजना" है। आपको संसाधन प्रशासक के लिए पत्र के पाठ में विभिन्न प्रकार के स्पष्टीकरण और टिप्पणियों के साथ एक फ़ाइल जोड़ने की अनुमति देता है।

  अंतिम आइटम - "भेजें बटन" - आपको संबंधित इंटरफ़ेस तत्व जोड़ने की अनुमति देता है।

किए गए परिवर्तन सहेजें

एक बार आवश्यक मान सेट हो जाने और फॉर्म ठीक से कॉन्फ़िगर हो जाने पर, आपको यह सब सहेजना होगा। ऐसा करने के लिए, प्लगइन संपादन विंडो में, इसके शीर्ष भाग पर जाएँ। यहां एक "सहेजें" बटन होना चाहिए. उस पर पॉइंटर इंगित करें और उस पर एक बार क्लिक करें। जवाब में, फॉर्म कोड दिखाई देगा, जिसे हम उसी माउस पॉइंटर का उपयोग करके चुनते हैं और कॉपी करते हैं। इसके बाद, सामग्री प्रबंधन प्रणाली के प्रशासनिक पैनल में "पेज" आइटम पर जाएँ। फिर हम आवश्यक नाम के साथ एक नया पृष्ठ बनाते हैं (उदाहरण के लिए, "प्रतिक्रिया", "संपर्क" या "संसाधन व्यवस्थापक से एक प्रश्न पूछें")। फिर हम डायलिंग कर्सर को उसके कोड के लिए इनपुट फ़ील्ड में ले जाते हैं। इस स्थिति में, आपको पैरामीटर पैनल में कोड टाइपिंग मोड को "टेक्स्ट" पर स्विच करना होगा। उसके बाद, पहले प्राप्त फॉर्म कोड डालें। इसके बाद, इंटरफ़ेस के दाईं ओर, "प्रकाशित करें" बटन ढूंढें और उस पर अपना माउस घुमाएँ। अगले चरण में, सामग्री प्रबंधन प्रणाली इंटरफ़ेस के इस तत्व पर एक बार बाईं माउस बटन पर क्लिक करें।



परिणाम की जाँच हो रही है

पहले संकेतित जोड़तोड़ करने के बाद, इंटरनेट संसाधन के इंटरफ़ेस में एक नया पृष्ठ जोड़ा जाना चाहिए, जिस पर संपर्क फ़ॉर्म 7 में निर्दिष्ट तत्व प्रदर्शित होंगे। इंटरफ़ेस सेटअप, सिद्धांत रूप में, पूरा हो गया है। आपको बस यह जांचना होगा कि सॉफ़्टवेयर सही ढंग से कॉन्फ़िगर किया गया है। ऐसा करने के लिए आपको जाना होगा होम पेजवेबसाइट, ब्लॉग या पोर्टल. फिर पृष्ठों की सूची में हमें वह पृष्ठ मिलता है जिस पर फीडबैक फॉर्म रखा गया था। हम इसमें जाते हैं, एक ही बार में सभी क्षेत्रों में सही पैरामीटर दर्ज करते हैं और खुद को एक परीक्षण पत्र भेजते हैं। जवाब में, इस ऑपरेशन के सफल समापन का संकेत देने वाला एक सूचना संदेश दिखाई देना चाहिए। फिर हम खाली फ़ील्ड के साथ एक और पत्र भेजने का प्रयास करते हैं। इसके बाद, एक संदेश आना चाहिए जिसमें कहा गया हो कि आपको सभी चयनित फॉर्म पैरामीटर सेट करने की आवश्यकता है। यदि दोनों मामलों में पहले बताए गए परिणाम प्राप्त हुए थे, तो बनाया गया फीडबैक फॉर्म सही ढंग से काम करता है।

प्लगइन के फायदे और नुकसान. वैकल्पिक विकल्प

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



परिणाम

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

संपर्क फ़ॉर्म 7 प्लगइन आपकी वेबसाइट पर फीडबैक व्यवस्थित करने में मदद करेगा।

आप आधिकारिक वर्डप्रेस वेबसाइट पर संपर्क फ़ॉर्म 7 प्लगइन डाउनलोड कर सकते हैं

आप आधिकारिक वर्डप्रेस वेबसाइट पर रियली सिंपल कैप्चा प्लगइन डाउनलोड कर सकते हैं

हमने पाठ "" में देखा कि इस प्लगइन को कैसे इंस्टॉल और कनेक्ट किया जाए, अब हम इसका पता लगाएंगे अतिरिक्त प्रकार्यफॉर्म 7 प्लगइन से संपर्क करें। फॉर्म मॉनिटर, टैबलेट, फोन और लैपटॉप पर सही ढंग से काम करता है। वैसे, यदि आपका लैपटॉप टूट गया है, तो एक ऐसी सेवा है जो एचपी लैपटॉप की मरम्मत करती है।

प्लगइन डाउनलोड और सक्रिय करने के बाद, "संपर्क" नियंत्रण कक्ष के नए अनुभाग पर जाकर प्लगइन सेटिंग्स पर जाएं।

फ़ॉर्म के नाम पर अपना माउस घुमाएँ और "संपादित करें" चुनें

फॉर्म पैरामीटर बदलने के लिए एक विंडो खुलेगी।

चूंकि साइट एक नहीं, बल्कि कई फॉर्म (संदेश भेजने के लिए एक फॉर्म, कॉल ऑर्डर करने के लिए एक फॉर्म, व्यक्तिगत डेटा वाला एक फॉर्म) का उपयोग कर सकती है, ताकि इस बारे में कोई भ्रम न हो कि कौन सा फॉर्म किसके लिए जिम्मेदार है, आपको इसकी आवश्यकता है फॉर्म का नाम बदलें. ऐसा करने के लिए फॉर्म 1 के नाम पर क्लिक करें.

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

फॉर्म में नए फ़ील्ड जोड़ने के लिए, ड्रॉप-डाउन सूची नंबर 3 - "टैग जेनरेट करें" पर क्लिक करें और ड्रॉप-डाउन सूची से आवश्यक तत्व का चयन करें।

• पाठ्य से भरा
• ईमेल
• फ़ोन नंबर
• संख्या (स्पिनबॉक्स)
• संख्या (स्लाइडर)
• पाठ्य से भरा
• ड्रॉप डाउन मेनू
• चेक बॉक्स
• रेडियो के बटन
• स्वीकार
• सवाल
• कॅप्चा
• फ़ाइल भेज रहा हूँ
• जमा करने वाला बटन

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

. विवरण और तत्वों वाला संपूर्ण ब्लॉक एक पंक्ति में होना चाहिए और टैग के अंदर स्थित होना चाहिए

पाठ्य से भरा

ड्रॉप-डाउन सूची से, "टेक्स्ट फ़ील्ड" तत्व का चयन करें

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

आप इसे इनपुट फ़ील्ड में जोड़ सकते हैं अतिरिक्त जानकारीफॉर्म भरना आसान बनाने के लिए। बॉक्स 2 को चेक करें "प्लेसहोल्डर के रूप में उपयोग करें?" और उसके बगल वाले क्षेत्र में एक संकेत दर्ज करें। जब आप फ़ॉर्म पर इस फ़ील्ड को भरते हैं, तो टूलटिप टेक्स्ट गायब हो जाएगा। फिर प्लगइन के संकेतों का पालन करें। परिणाम तैयार रूप में इस प्रकार का फ़ील्ड होगा:

कोड को ईमेल टेम्प्लेट में चिपकाना सुनिश्चित करें, अन्यथा इस फ़ील्ड से डेटा ईमेल पर नहीं भेजा जाएगा! यह न केवल टेक्स्ट फ़ील्ड पर बल्कि किसी अन्य तत्व पर भी लागू होता है।

ईमेल

प्रेषक के मेलबॉक्स पते को फॉर्म में स्थानांतरित करने के लिए उपयोग किया जाता है

यूआरएल

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

फ़ोन नंबर

इस फ़ील्ड में केवल संख्याएँ ही दर्ज की जा सकती हैं

संख्या (स्पिनबॉक्स)

एक फ़ील्ड जिसमें आप किसी चीज़ की मात्रा निर्धारित कर सकते हैं, उदाहरण के लिए कोई उत्पाद। मात्रा ऊपर/नीचे तीरों का उपयोग करके निर्धारित की जाती है।

तारीख

दिनांक चुनने की क्षमता के साथ प्रपत्र में एक कैलेंडर सम्मिलित करता है। उदाहरण के लिए, होटल के कमरे आरक्षित करने के लिए उपयोग किया जाता है। आगमन तिथि, प्रस्थान तिथि.

पाठ्य से भरा

हां, आश्चर्यचकित न हों :) एक और टेक्स्ट फ़ील्ड। इस बार, यह फ़ील्ड बड़ी है और आपको इसमें बहुत सारे टेक्स्ट लिखने की सुविधा देती है। उदाहरण के लिए समीक्षाएँ, टिप्पणियाँ।

ड्रॉप डाउन मेनू

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

सूची को चयन फ़ील्ड में रखा जाना चाहिए, प्रत्येक आइटम को एक नई लाइन पर।

चेक बॉक्स

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

रेडियो के बटन

स्विच (शब्दजाल में: रेडियो बटन) का उपयोग तब किया जाता है जब कई प्रस्तावित विकल्पों में से एक विकल्प का चयन करना आवश्यक होता है। बॉक्स को चेक करके "पहले एक लेबल रखें और फिर एक चेकबॉक्स?" लेबल और चयन फ़ील्ड का स्थान डिफ़ॉल्ट रूप से बदलता है, पहले चयन, फिर लेबल।

स्वीकार

किसी बात की पुष्टि. आइए ऊपर वर्णित शर्तों को स्वीकार करने के लिए एक समझौता मान लें।

सवाल

यह स्पैम के विरुद्ध रक्षा की पहली पंक्ति है, सबसे बुनियादी। सेटिंग्स में, कुछ प्रश्न लिखें, शायद संख्याओं में, शायद अक्षरों में, या दोनों में, और सही उत्तर बताएं। यदि फॉर्म भरते समय उत्तर सही है, तो फॉर्म जमा कर दिया जाएगा। हरा इंगित करता है कि इस सूत्र का कौन सा भाग उत्तर इनपुट फ़ील्ड से पहले साइट पर प्रदर्शित किया जाएगा, लाल उत्तर इंगित करता है। सूत्र में सही उत्तर | चिह्न के बाद लिखा गया है (ऊर्ध्वाधर बार)

फ़ॉर्म में स्पैम-रोधी सुरक्षा जोड़ता है.

इस सुविधा को काम करने के लिए एक अन्य प्लगइन की आवश्यकता है। प्लगइन डाउनलोड करें, इंस्टॉल करें, सक्रिय करें।

आपको सेटिंग्स बदलने की ज़रूरत नहीं है, बस सेंड बटन से पहले 2 लाइनें कॉपी और पेस्ट करें।

फ़ाइल भेज रहा हूँ

आप संदेश सबमिशन फॉर्म में एक फ़ाइल संलग्न कर सकते हैं। सेटिंग्स में आप बाइट्स में अधिकतम आकार और डाउनलोड करने के लिए अनुमत प्रारूप निर्दिष्ट कर सकते हैं, उदाहरण के लिए.jpg .tiff .doc

जमा करने वाला बटन

फॉर्म जमा करना. सेटिंग्स में, "शॉर्टकट" अनुभाग में, आप बटन का नाम दे सकते हैं (सबमिट करें, उत्तर दें, भेजें :)

संपर्क प्रपत्र 7 की उपस्थिति को अनुकूलित करना

चूंकि प्लगइन्स में अपडेट करने की क्षमता होती है, इसलिए फॉर्म के स्वरूप में बदलाव वेबसाइट थीम स्टाइल फ़ाइल style.css में किया जाएगा।

कोड प्रपत्र, उसके फ़ील्ड और अन्य तत्वों को प्रदर्शित करने के लिए ज़िम्मेदार है:

Wpcf7 (बैकग्राउंड-रंग:#ddd; ) /*फॉर्म बैकग्राउंड कलर */ .wpcf7 इनपुट, .wpcf7 टेक्स्टएरिया (पैडिंग:5px; कलर:#1D1D1D; फॉन्ट-फैमिली:एरियल, हेल्वेटिका, सेन्स-सेरिफ़; फॉन्ट-साइज: 16px; पंक्ति-ऊंचाई: 20px; सीमा: 1px ठोस #C7C7C7; बॉक्स-छाया: इनसेट 2px 2px 8px #F9F9F9; -वेबकिट-संक्रमण: सभी 0.2s आसानी; -moz-संक्रमण: सभी 0.2s आसानी; -o-संक्रमण : सभी 0.2 सेकंड में आसानी; संक्रमण: सभी 0.2 सेकंड में आसानी; ) .wpcf7 .wpcf7-सूची-आइटम (पैडिंग-बाएं: 0; मार्जिन-बाएं: 0; मार्जिन-दाएं: 25px; ) .wpcf7 .wpcf7-सूची-आइटम इनपुट (सीमा: कोई नहीं; पैडिंग-बाएं: 0; मार्जिन-बाएं: 0; ) .wpcf7 चयन करें (रूपरेखा: कोई नहीं; फ़ॉन्ट-आकार: 16px; फ़ॉन्ट-परिवार: एरियल, हेल्वेटिका, सैन्स-सेरिफ़; ) .wpcf7 इनपुट: होवर, .wpcf7 इनपुट: फोकस, .wpcf7 इनपुट: सक्रिय, .wpcf7 टेक्स्ट क्षेत्र: होवर, .wpcf7 टेक्स्ट क्षेत्र: फोकस, .wpcf7 टेक्स्ट क्षेत्र: सक्रिय (पृष्ठभूमि: #FDFDFD; रूपरेखा: कोई नहीं;)

क्या, क्या है?

.wpcf7 इनपुट, .wpcf7 textarea - इनपुट फ़ील्ड की शैली (पाठ फ़ील्ड)

1. गद्दी- सामग्री से तत्व की सीमा तक इंडेंट सेट करता है। यहां फ़ील्ड में दर्ज किए गए टेक्स्ट से फ़ील्ड बॉर्डर तक इंडेंट दिया गया है। मान को पिक्सेल Xpx में सेट करता है, जहाँ X पिक्सेल की संख्या है। उदाहरण: पैडिंग: 5px 3px 6px 8px;
2. रंग- पाठ का रंग।
3. फुहारा परिवार- इनपुट फ़ील्ड का फ़ॉन्ट.
4. फ़ॉन्ट आकार- फ़ॉन्ट आकार
5. ऊंची लाईन- ऊंची लाईन
6. सीमा- इनपुट फ़ील्ड के चारों ओर फ़्रेम करें
7. डब्बे की छाया- ब्लॉक छाया. इनसेटइंगित करता है कि छाया आंतरिक है। यदि आप बाहरी छाया चाहते हैं, तो इस मान को छोड़ दें। 2px 2px का दूसरा और तीसरा मान क्रमशः क्षैतिज और लंबवत रूप से छाया के विस्थापन को दर्शाता है। चौथा मान, 8px, छाया का धुंधला दायरा निर्धारित करता है। पांचवां - #F9F9F9 - छाया रंग।

संपर्क फ़ॉर्म 7 बटन को अनुकूलित करना

.बटन_फॉर्म (पैडिंग: 0px; ऊंचाई: 30px; चौड़ाई: 150px !महत्वपूर्ण; बॉर्डर: कोई नहीं !महत्वपूर्ण; कर्सर: पॉइंटर; रंग: #fff; -वेबकिट-बॉर्डर-त्रिज्या: .5em; -moz-बॉर्डर-त्रिज्या:। 5em; सीमा-त्रिज्या: .5em; रंग: #faddde; सीमा: ठोस 1px #980c10; पृष्ठभूमि: #d81b21; पृष्ठभूमि: -वेबकिट-ग्रेडिएंट (रैखिक, बाएँ ऊपर, बाएँ नीचे, से (#ed1c24), से (# aa1317)); पृष्ठभूमि: -moz-रेखीय-ग्रेडिएंट(शीर्ष, #ed1c24, #aa1317); फ़िल्टर: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', EndColorstr='#aa1317'); )

संपर्क प्रपत्र 7 अधिसूचना शैली

यह त्रुटि या सफल सबमिशन संदेशों के लिए ज़िम्मेदार है

Wpcf7 .wpcf7-मान्यता-त्रुटियाँ (सीमा: कोई नहीं; पृष्ठभूमि-रंग: # 246416; रंग: #fff; मार्जिन: 0; पैडिंग: 20px; -वेबकिट-बॉर्डर-त्रिज्या: 10px; -moz-बॉर्डर-त्रिज्या: 10px; बॉर्डर-त्रिज्या: 10px; ) .wpcf7 .wpcf7-मेल-भेजा-ओके( बॉर्डर:कोई नहीं; पृष्ठभूमि-रंग:#7ad33f; मार्जिन:0; पैडिंग:20px; -वेबकिट-बॉर्डर-त्रिज्या: 10px; -मोज़-बॉर्डर -त्रिज्या: 10px; सीमा-त्रिज्या: 10px; ) .wpcf7 .wpcf7-मेल-भेजे गए-ng( सीमा:कोई नहीं; पृष्ठभूमि-रंग:#349622; मार्जिन:0; पैडिंग:20px; -वेबकिट-बॉर्डर-त्रिज्या: 10px ; -मोज़-बॉर्डर-त्रिज्या: 10px; बॉर्डर-त्रिज्या: 10px; रंग: सफ़ेद; ) .wpcf7 स्पैन.wpcf7-not-valid-tip( बॉर्डर:कोई नहीं; पृष्ठभूमि-रंग:#349622; पैडिंग:5px; पैडिंग- बाएँ: 5px; पैडिंग-दाएँ: 5px; सीमा-त्रिज्या: 10px; चौड़ाई: 290px; रंग: सफ़ेद; /* ड्रॉप शैडो */ -वेबकिट-बॉक्स-छाया: 3px 3px 3px rgba(0,0,0,0.3) ; -मोज़-बॉक्स-शैडो: 3px 3px 3px rgba(0,0,0,0.3); बॉक्स-शैडो: 3px 3px 3px rgba(0,0,0,0.3); )

और अब, सुविधा के लिए, टिप्पणियों के साथ संपूर्ण कोड:

Wpcf7 (background-color:#ddd; ) /*फॉर्म बैकग्राउंड कलर */ .wpcf7 इनपुट, .wpcf7 textarea( /* कोड का यह भाग इनपुट फ़ील्ड, टेक्स्ट क्षेत्रों की शैली के लिए जिम्मेदार है */ पैडिंग:5px; / * फ़ील्ड तत्व से उसकी सामग्री से पहले पैडिंग सेट करता है, आप कोई भी मान डाल सकते हैं, उदाहरण के लिए 10px */ रंग:#1D1D1D; /* इनपुट फ़ील्ड में टेक्स्ट का रंग */ फ़ॉन्ट-फ़ैमिली:एरियल, हेल्वेटिका, सैन्स-सेरिफ़; / * इनपुट फ़ील्ड में टेक्स्ट फ़ॉन्ट */ फ़ॉन्ट -आकार:16px; /* इनपुट फ़ील्ड में टेक्स्ट का आकार */ पंक्ति-ऊंचाई: 20px; /* इनपुट फ़ील्ड की ऊंचाई */ बॉर्डर: 1px ठोस #C7C7C7; /* फ़ील्ड के चारों ओर फ़्रेम . पहला मान पिक्सेल में चौड़ाई है, दूसरा - फ़्रेम की शैली, तीसरा - उसका रंग */ बॉक्स-छाया: इनसेट 2px 2px 8px #F9F9F9; /* इनपुट फ़ील्ड से छाया। 2px - साथ में ऑफसेट x-अक्ष, 2px - y-अक्ष के साथ ऑफसेट, 8px - छाया धुंधला त्रिज्या, #F9F9F9 - छाया रंग */ -वेबकिट-संक्रमण: सभी 0.2s आसानी; -moz-संक्रमण: सभी 0.2s आसानी; -ओ-संक्रमण : सभी 0.2 सेकंड में आसानी; संक्रमण: सभी 0.2 सेकंड में आसानी; ) .wpcf7 .wpcf7-सूची-आइटम (पैडिंग-बाएं: 0; मार्जिन-बाएं: 0; मार्जिन-दाएं: 25px; ) .wpcf7 .wpcf7-सूची-आइटम इनपुट (सीमा: कोई नहीं; पैडिंग-बाएं: 0; मार्जिन-बाएँ: 0; ) .wpcf7 चयन करें (रूपरेखा: कोई नहीं; फ़ॉन्ट-आकार:16px; फ़ॉन्ट-परिवार:एरियल, हेल्वेटिका, सैन्स-सेरिफ़; ) .wpcf7 इनपुट:होवर, .wpcf7 इनपुट:फ़ोकस, .wpcf7 इनपुट:सक्रिय, .wpcf7 textarea: होवर, .wpcf7 textarea: फोकस, .wpcf7 textarea: सक्रिय (/* यह हिस्सा इनपुट फ़ील्ड की शैली के लिए ज़िम्मेदार है जब माउस पॉइंटर उन पर घूमता है * / पृष्ठभूमि: #FDFDFD; / * इनपुट फ़ील्ड की पृष्ठभूमि जब माउस पॉइंटर इसके ऊपर घूमता है */ रूपरेखा: कोई नहीं; /* टेक्स्ट इनपुट फ़ील्ड की बाहरी सीमा */ ) .wpcf7 इनपुट.wpcf7-submit(/* कोड का यह हिस्सा फॉर्म में सबमिट बटन को स्टाइल करने के लिए ज़िम्मेदार है * / -वेबकिट-ट्रांज़िशन: 0; -मोज़-ट्रांज़िशन: 0; - ओ-ट्रांज़िशन: 0; ट्रांज़िशन: 0; बॉर्डर: कोई नहीं; /* बटन के चारों ओर फ़्रेम */ स्थिति: सापेक्ष; रंग: #fff; /* टेक्स्ट रंग */ पाठ-परिवर्तन: अपरकेस; /* पाठ परिवर्तन (अपरकेस का अर्थ है कि बटन पर पाठ बड़े अक्षरों में प्रदर्शित किया जाएगा) */ /* बटन के कोनों को गोल करना निम्नलिखित तीन गुणों का मान होना चाहिए वही, चूँकि वे एक ही चीज़ हैं, केवल के लिए विभिन्न ब्राउज़र */ -वेबकिट-बॉर्डर-त्रिज्या: 6px; /* क्रोम के लिए गोल कोने */ -मोज़-बॉर्डर-त्रिज्या: 6px; /* मोज़िला फ़ायरफ़ॉक्स के लिए गोल कोने */ बॉर्डर-त्रिज्या: 6px; /* मोबाइल सहित अन्य सभी ब्राउज़रों के लिए गोल कोने */ फ़ॉन्ट-आकार: 14px; /* बटन टेक्स्ट का आकार */ फ़ॉन्ट-वजन: बोल्ड; /* टेक्स्ट शैली (बोल्ड का अर्थ है बोल्ड) */ पैडिंग-टॉप: 11px; /* तत्व के किनारे से उसकी सामग्री तक शीर्ष पैडिंग */ पैडिंग-बॉटम: 10px; /* तत्व के किनारे से उसकी सामग्री तक नीचे की पैडिंग */ पैडिंग-बाएं: 35px; /* तत्व के किनारे से उसकी सामग्री तक बाईं पैडिंग */ पैडिंग-दाएं: 35px; /* तत्व के किनारे से उसकी सामग्री तक दाईं ओर इंडेंटेशन */ /* ग्रेडिएंट बैकग्राउंड - बटन का ग्रेडिएंट बैकग्राउंड */ बैकग्राउंड-रंग: #000000; /* बटन पृष्ठभूमि रंग यदि ग्रेडिएंट ब्राउज़र द्वारा समर्थित नहीं है */ /* निम्नलिखित गुणों में, रंगों को समान निर्दिष्ट किया जाना चाहिए, क्योंकि वे एक ही चीज़ हैं, बस अलग-अलग ब्राउज़रों के लिए। आइए पहली संपत्ति को देखें. from(#676767), से(#3B3B3B) भाग का अर्थ है कि आपको एक ग्रेडिएंट प्रदर्शित करने की आवश्यकता है, जहां रंग #676767) से रंग #3B3B3B */ पृष्ठभूमि में संक्रमण होता है: -वेबकिट-ग्रेडिएंट(रैखिक, बायां शीर्ष, बाएँ नीचे, से(#676767), से(#3बी3बी3बी)); पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट(शीर्ष, #349622, #246416); फ़िल्टर: progid:DXImageTransform.Microsoft.gradient(startColorstr='#349622', EndColorstr='#246416'); -ms-फ़िल्टर: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, EndColorstr=#246416)"; /* ड्रॉप शैडो - बटन शैडो। छाया का रंग RGBA */ -वेबकिट-बॉक्स-शैडो में निर्दिष्ट है: 0 2px 5px rgba(0,0,0,0.3); -मोज़-बॉक्स-छाया: 0 2पीएक्स 5पीएक्स आरजीबीए(0,0,0,0.3); बॉक्स-छाया: 0 2px 5px rgba(0,0,0,0.3); ) /* होवर पर - माउस पॉइंटर को होवर करते समय बटन को स्टाइल करें। सब कुछ लगभग पिछले ब्लॉक जैसा ही है */ .wpcf7 इनपुट.wpcf7-submit:hover( कर्सर: पॉइंटर; टेक्स्ट-डेकोरेशन: कोई नहीं; बैकग्राउंड-कलर: #000000; बैकग्राउंड: -वेबकिट-ग्रेडिएंट(लीनियर, लेफ्ट टॉप) , बाएँ नीचे, से (#246416), से (#349622)); पृष्ठभूमि: -moz-रेखीय-ग्रेडिएंट (शीर्ष, #246416, #349622); फ़िल्टर: progid:DXImageTransform.Microsoft.gradient(startColorstr='# 246416 ", EndColorstr=#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* क्लिक पर - जब आप क्लिक करते हैं तो बटन की शैली यह लगभग पिछले ब्लॉक जैसा ही है */ .wpcf7 इनपुट.wpcf7-submit:active( शीर्ष: 1px; रंग: #d8c6e2; /* क्लिक करने पर बटन टेक्स्ट का रंग */ बैकग्राउंड-रंग: #000000; बैकग्राउंड: -वेबकिट -ग्रेडिएंट(रैखिक, बाएँ ऊपर, बाएँ नीचे, से(#FF0000), से(#246416)); पृष्ठभूमि: -moz-रैखिक-ग्रेडिएंट(शीर्ष, #FF0000, #246416); फ़िल्टर: progid:DXImageTransform। Microsoft.gradient(startColorstr='#FF0000', EndColorstr='#246416'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, EndColorstr=#246416)"; -वेबकिट-बॉक्स-छाया: कोई नहीं; -मोज़-बॉक्स-छाया: कोई नहीं; बॉक्स-छाया: कोई नहीं; ) /* CF7 संदेश - सफल प्रेषण, त्रुटियों आदि के बारे में संदेशों की शैली। */ .wpcf7 .wpcf7-मान्यता-त्रुटियाँ( /* सत्यापन त्रुटियों के लिए संदेश शैली */ सीमा:कोई नहीं; /* संदेश ब्लॉक फ्रेम */ पृष्ठभूमि-रंग:#246416; /* पृष्ठभूमि */ रंग:#fff; /* पाठ का रंग */ मार्जिन:0; /* बाहरी मार्जिन */ पैडिंग:20px; /* खरोज*/ /* विभिन्न ब्राउज़रों के लिए गोल कोने - निम्नलिखित 3 गुण */ -वेबकिट-बॉर्डर-त्रिज्या: 10px; -मोज़-बॉर्डर-त्रिज्या: 10px; बॉर्डर-त्रिज्या: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* सफल भेजने के बारे में संदेशों की शैली */ सीमा: कोई नहीं; / * संदेश ब्लॉक फ़्रेम */ पृष्ठभूमि-रंग: # 7ad33f; / * पृष्ठभूमि * / मार्जिन: 0; / * बाहरी पैडिंग */ पैडिंग:20px; /* आंतरिक पैडिंग */ /* विभिन्न ब्राउज़रों के लिए कोनों को गोल करना - निम्नलिखित 3 गुण */ -वेबकिट-बॉर्डर-त्रिज्या: 10px; -moz-बॉर्डर-त्रिज्या: 10px; बॉर्डर-त्रिज्या : 10px ; ) .wpcf7 .wpcf7-mail-sent-ng( बॉर्डर:none; बैकग्राउंड-कलर:#349622; मार्जिन:0; पैडिंग:20px; -वेबकिट-बॉर्डर-रेडियस: 10px; -moz-बॉर्डर-रेडियस: 10px; सीमा-त्रिज्या: 10px; रंग: सफेद; ) .wpcf7 स्पैन.wpcf7-नहीं-मान्य-टिप (सीमा: कोई नहीं; पृष्ठभूमि-रंग: # 349622; पैडिंग: 5px; पैडिंग-बाएं: 5px; पैडिंग-दाएं: 5px; सीमा-त्रिज्या: 10px; चौड़ाई: 290px; रंग: सफेद; /* ड्रॉप छाया */ -वेबकिट-बॉक्स-छाया: 3px 3px 3px rgba(0,0,0,0.3); -moz-बॉक्स-छाया: 3px 3px 3px rgba(0,0,0,0.3); बॉक्स-शैडो: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( फ्लोट: लेफ्ट; ) .wpcf7-form . mright20(मार्जिन-दाएं: 20px; ) .wpcf7-फॉर्म .mright40(मार्जिन-दाएं: 40px; ) .wpcf7-फॉर्म .स्पष्ट(स्पष्ट: दोनों; )

संपर्क फ़ॉर्म अधिकांश वेबसाइटों का एक अभिन्न गुण है। यही कारण है कि वर्डप्रेस कैटलॉग में बहुत सारे संपर्क फ़ॉर्म प्लगइन हैं। सबसे लोकप्रिय में से एक संपर्क फ़ॉर्म 7 है। प्लगइन आपको किसी भी प्रकार के फ़ॉर्म बनाने की अनुमति देता है; बहुत लचीला और कॉन्फ़िगर करने में आसान; कई वर्षों से विकास हो रहा है और इसमें कई विकास शामिल हैं।

संपर्क फ़ॉर्म बनाना और प्रदर्शित करना

एडमिन पैनल में फॉर्म बनाना

प्लगइन इंस्टॉल करने के बाद, "संपर्क फ़ॉर्म 7" मेनू आइटम दिखाई देगा, जिसके माध्यम से आप फ़ॉर्म बना और हटा सकते हैं।

प्लगइन सक्रिय होने पर चित्र में फॉर्म स्वचालित रूप से बनाया गया था।

हम डिफ़ॉल्ट फॉर्म का उपयोग करेंगे, ऐसा करने के लिए हम एक "मुझसे संपर्क करें" पेज बनाएंगे और वहां फॉर्म का शॉर्टकोड डालेंगे।

साइट का अगला भाग

आइए अब लेख को सहेजें और देखें कि हमारा फॉर्म कैसा दिखता है (ट्वेंटी सिक्सटीन थीम का उपयोग करके):

चित्र पत्र भेजे जाने के बाद का फॉर्म दिखाता है (यह फॉर्म के नीचे नोटिस द्वारा दर्शाया गया है)।

प्रपत्र अनुकूलन (जटिल प्रपत्र बनाना)

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

शीर्ष फ़ील्ड में - फॉर्म का नाम (यह केवल व्यवस्थापक पैनल में दिखाई देता है), एक ऐसा नाम इंगित करें जो आपके लिए स्पष्ट हो, उदाहरण के लिए: "साइट के बारे में फीडबैक", "नौकरी आवेदन पत्र", "फीडबैक फॉर्म" , वगैरह।

शीर्षक के नीचे एक संक्षिप्त कोड है. इसका उपयोग हम अभिलेखों में प्रपत्र प्रदर्शित करने के लिए करते हैं।

और नीचे चार टैब हैं:

1. प्रपत्र टेम्पलेट
2. पत्र
3. अतिरिक्त सेटिंग्स

आइए प्रत्येक टैब को अलग से देखें।

प्रपत्र टेम्पलेट

इस टैब में आप फ़ील्ड और फॉर्म के स्वरूप को कस्टमाइज़ कर सकते हैं। कार्यक्षेत्र WP HTML संपादक है। केवल सामान्य बटनों के बजाय हम अलग-अलग फॉर्म फ़ील्ड डालने के लिए बटन देखते हैं।

फॉर्म लेआउट

लेआउट के लिए, आप html टैग और प्लगइन शॉर्टकोड का उपयोग कर सकते हैं। शॉर्टकोड फॉर्म फ़ील्ड जोड़ते हैं, और HTML टैग आपको कस्टम बनाने की अनुमति देते हैं HTML संरचना. उदाहरण के लिए, हमारा डिफ़ॉल्ट फॉर्म इस तरह दिखता है:

आपका नाम (की आवश्यकता) आपकी ईमेल (आवश्यक है) विषय संदेश

और जब किसी पोस्ट में प्रदर्शित किया जाएगा, तो यह इस HTML में बदल जाएगा:

आपका नाम (की आवश्यकता)

आपकी ईमेल (आवश्यक है)

विषय

संदेश

शॉर्टकोड सिंटैक्स

आइए "टेक्स्ट" बटन पर क्लिक करें। एक विंडो खुलती है जहां हम टेक्स्ट फ़ील्ड के लिए विशेषताएँ निर्दिष्ट कर सकते हैं। निर्दिष्ट करें और "टैग सम्मिलित करें" पर क्लिक करें।

टैग को बाद में HTML कोड के साथ एक टेक्स्ट फ़ील्ड में बदल दिया जाएगा:

शॉर्टकोड बिल्डर का उपयोग करके शॉर्टकोड आसानी से बनाए जा सकते हैं।

लेकिन कंस्ट्रक्टर आपको शॉर्टकोड बदलने की अनुमति नहीं देता है (आप वहां केवल शॉर्टकोड बना सकते हैं)। शॉर्टकोड बदलने के दो तरीके हैं:

1. कंस्ट्रक्टर का उपयोग करके हटाएं और नया बनाएं।
2. सिंटैक्स सीखें और फ़ील्ड शोर्टकोड को मैन्युअल रूप से ठीक करें।

आप डिज़ाइनर के साथ स्वयं इसका पता लगा सकते हैं।

और यहां हम शॉर्टकोड के सिंटैक्स को देखेंगे।

उदाहरण के लिए, अतिरिक्त विकल्पों वाले टेक्स्ट फ़ील्ड टैग पर विचार करें:

मूलपाठ (आवश्यक)फ़ील्ड प्रकार: टेक्स्ट, चयन, पासवर्ड, संख्या, आदि। (इस मामले में फ़ील्ड टेक्स्ट है)। यह निर्धारित करता है कि हमारा टैग किस रूप तत्व में परिवर्तित होगा, और इसलिए यह किस प्रकार का डेटा स्वीकार करेगा। * तारांकन फ़ील्ड को अनिवार्य बनाता है (फ़ॉर्म सबमिट नहीं किया जाएगा और एक अधिसूचना प्रदर्शित की जाएगी कि फ़ील्ड को भरना होगा)। ग्राहक नाम (आवश्यक)फ़ील्ड का नाम इनपुट में नाम विशेषता के रूप में उपयोग किया जाता है, और भेजे गए पत्र के लिए टेम्पलेट बनाते समय भी इसका उपयोग किया जाता है। id:my-id मान my-id के साथ इनपुट में id विशेषता है। सजावट के लिए उपयोग किया जाता है। कक्षा: मेरी कक्षा वर्ग विशेषतामान my-class के साथ इनपुट में। सजावट के लिए उपयोग किया जाता है। प्लेसहोल्डर " एक नाम दर्ज करें" Использовать текст "Введите имя" как placeholder. !}

टैग विशेषताओं के क्रम का पालन करें: पहले फ़ील्ड प्रकार आता है, फिर उसका नाम, और उसके बाद ही अतिरिक्त विकल्प।

फ़ील्ड प्रकार

• टेक्स्ट फ़ील्ड: टेक्स्ट, ईमेल, टेल, यूआरएल, टेक्स्टएरिया
• संख्यात्मक फ़ील्ड: संख्या, श्रेणी
• दिनांक फ़ील्ड: दिनांक
• चेकबॉक्स, रेडियो, सूचियाँ: चेकबॉक्स, रेडियो, चयन करें
• फ़ाइल अपलोड फ़ील्ड: फ़ाइल
• कैप्चा: कैप्चैक और कैप्चार्च
• जनमत सर्वेक्षण: प्रश्नोत्तरी
• "स्वीकार करें" फ़ील्ड: स्वीकृति
• सबमिट बटन: सबमिट करें
• कस्टम फ़ील्ड प्रकार

पत्र टेम्पलेट

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

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

पत्र शीर्षलेख:

किसके लिए - ईमेल, जहां पत्र भेजा जाएगा. आप अल्पविराम से अलग करके जितने चाहें उतने बॉक्स निर्दिष्ट कर सकते हैं।

किससे - नाम और ईमेल, किससे पत्र आया। आमतौर पर सर्वर मेल यहां दर्शाया गया है (उदाहरण के लिए [ईमेल सुरक्षित]).

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

विषय - पत्र का शीर्षक. इससे यह स्पष्ट हो जाएगा कि डेटा किस फॉर्म से भेजा गया था। उदाहरण के लिए, पत्र का विषय "साइट पर त्रुटि", "कॉल बैक का आदेश दें" इत्यादि है। ऐसा हेडर चुनें जो प्राप्त ईमेल के साथ काम करना आसान बना दे।

• अतिरिक्त शीर्षलेख - डिफ़ॉल्ट रूप से, यहां Reply-To: लिखा हुआ है। रिप्लाई-टू हेडर हमें बताता है कि इस ईमेल का उत्तर "रिप्लाई" बटन पर क्लिक करके दिया जा सकता है मेल प्रोग्राम, और फॉर्म टैग टेम्पलेट से फ़ील्ड का नाम है। इस टैग के स्थान पर उपयोगकर्ता द्वारा निर्दिष्ट ईमेल डाला जाएगा। आपको रिप्लाई-टू जैसा कुछ मिलेगा: [ईमेल सुरक्षित].

पत्र का मुख्य भाग

यह इस टैब का अगला महत्वपूर्ण भाग है. पत्र का पाठ ही यहाँ दर्शाया गया है। पाठ में हम समान फॉर्म टैग (फॉर्म टेम्पलेट से फ़ील्ड नाम) का उपयोग करते हैं।

आइए डिफ़ॉल्ट अक्षर देखें:

से:<>विषय: संदेश: - संपर्क फ़ॉर्म 7 प्लगइन का अध्ययन करने वाली साइट से भेजा गया (http://test-wp.ru)

हमारे पास 4 फ़ील्ड थे जिन्हें उपयोगकर्ता ने भरा। पत्र भेजने के बाद, टैग मान में बदल जाएंगे और हमें निम्नलिखित पत्र प्राप्त होगा:

प्रेषक: दिमित्री विषय: संपर्क प्रपत्र 7 के बारे में प्रश्न संदेश: नमस्ते! मेरे पास संपर्क फ़ॉर्म 7 प्लगइन के बारे में एक प्रश्न है। मैं इसे कैसे कॉन्फ़िगर करूँ? - संपर्क फ़ॉर्म 7 प्लगइन का अध्ययन करने वाली साइट से भेजा गया (http://test-wp.ru)

नहीं आवश्यक फील्ड्सपत्र के मुख्य भाग में

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

विकल्प "HTML ईमेल प्रारूप का उपयोग करें"। आपको पत्र के मुख्य भाग में HTML टैग का उपयोग करने की अनुमति देता है। ऐसे में आप लिमिटेड का इस्तेमाल कर सकते हैं HTML सूचीटैग, क्योंकि सभी नहीं ईमेल क्लाइंटया सेवाएँ जटिल HTML मार्कअप को सही ढंग से संसाधित कर सकती हैं। उपयोग किया जा सकता है: टेबल, बुलेटेड सूचियाँ, बोल्डनेस, पैराग्राफ वगैरह। अधिक विवरण के लिए वेब पर खोजें.

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

फ़ॉर्म सबमिट करते समय सूचनाएं

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

ईमेल टेम्प्लेट टैग इन फ़ील्ड में काम नहीं करते.

अतिरिक्त सेटिंग्स

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

मैं इस कार्यक्षमता के उपयोग के बारे में एक अलग लेख में बात करूंगा।

एक पूर्ण व्यावसायिक साइट की कल्पना करना कठिन है जिसमें फीडबैक फॉर्म नहीं है, और कुछ साइटें फीडबैक फॉर्म को ऑर्डर फॉर्म के रूप में भी उपयोग करती हैं। सच है, ऐसे डायनासोर भी हैं जो कीव में नई इमारतों की मांग के बारे में लिखते हैं, लेकिन उनसे संपर्क केवल ईमेल के माध्यम से ही संभव है:

वे। उन्हें लिखने के लिए, आपको ईमेल कॉपी करना होगा, सॉफ़्टवेयर/वेबसाइट खोलना होगा, एक पत्र बनाना होगा, ईमेल पेस्ट करना होगा, टेक्स्ट लिखना होगा और भेजना होगा। लेकिन हमारे लोगों के लिए यह बहुत कठिन और आलसी है। साइट पर नाम फ़ील्ड भरना, अपना ईमेल इंगित करना, एक पत्र लिखना और एक बटन दबाकर पत्र भेजना आसान है।

कुछ सीएमएस में पहले से ही अंतर्निहित फॉर्म हैं, लेकिन वर्डप्रेस में यह नहीं है (

उदास न हों, क्योंकि एक उत्कृष्ट संपर्क फ़ॉर्म प्लगइन है। लगभग 10 मिनट में आपकी साइट पर पूरी तरह से कॉन्फ़िगर किया गया प्लगइन होगा, तो आइए समय बर्बाद न करें, बल्कि तुरंत काम पर लग जाएं।

CF7 प्लगइन स्थापित करना

सबसे पहले प्लगइन डाउनलोड करें और उसे फोल्डर ▬ में डालें /wp-सामग्री/प्लगइन्स/

फिर एडमिन पैनल से लेकर टैब तक जाएं प्लग-इनऔर इसे सक्रिय करें!

संपर्क प्रपत्र का उचित सेटअप 7

स्थापना के बाद, एक आइटम बाईं ओर दिखाई देना चाहिए "संपर्क प्रपत्र 7":

उस पर क्लिक करें और पहला फॉर्म बनाना या मौजूदा फॉर्म को संपादित करना शुरू करें।

1. यदि आपको नया फॉर्म बनाना है तो क्लिक करें "नया जोड़ो"

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

3. आप इस पर क्लिक करके फॉर्म को एडिट कर सकते हैं।

पर नया पृष्ठइच्छा अतिरिक्त सेटिंग्सफ़ील्ड, पत्र भेजते समय त्रुटि संदेश, पत्र टेम्पलेट इत्यादि। एक साधारण क्लिक से आप अपने फॉर्म टेम्पलेट में कोई भी फ़ील्ड जोड़ सकते हैं।