फॉर्म किसी भी वेबसाइट के लिए आवश्यक हैं—सरल संपर्क फॉर्म से लेकर जटिल मल्टी-स्टेप पंजीकरण प्रवाह तक। Elementor Pro में एक अंतर्निहित फॉर्म विजेट शामिल है जो कई मामलों में एक अलग फॉर्म प्लगइन की आवश्यकता को समाप्त करता है। इस गाइड में, हम Elementor Pro का उपयोग करके संपर्क फॉर्म, पंजीकरण फॉर्म और मल्टी-स्टेप फॉर्म बनाने के तरीके को कवर करते हैं, साथ ही ईमेल मार्केटिंग और CRM सेवाओं के लिए एकीकरण विकल्पों के साथ।
इस ट्यूटोरियल के लिए Elementor Pro की आवश्यकता है। Elementor का मुफ्त संस्करण फॉर्म विजेट शामिल नहीं करता है।
Elementor फॉर्म विजेट का अवलोकन
Elementor फॉर्म विजेट इन फ़ील्ड प्रकारों का समर्थन करता है:
| फील्ड प्रकार | उपयोग मामला | नोट्स |
|---|---|---|
| टेक्स्ट | नाम, कंपनी, विषय रेखा | एकल-लाइन टेक्स्ट इनपुट |
| ईमेल | ईमेल पता संग्रहण | ईमेल प्रारूप मान्यता शामिल है |
| टेक्स्टएरिया | संदेश शरीर, टिप्पणियाँ, विवरण | कॉन्फ़िगर करने योग्य पंक्तियों के साथ मल्टी-लाइन टेक्स्ट |
| टेल | फोन नंबर | मोबाइल पर संख्यात्मक कीबोर्ड सक्रिय करता है |
| संख्या | मात्राएँ, बजट, रेटिंग | न्यूनतम/अधिकतम/चरण मान्यता |
| यूआरएल | वेबसाइट पते | यूआरएल प्रारूप मान्यता |
| चुनें | ड्रॉपडाउन चयन (देश, श्रेणी) | एकल या कई चयन |
| रेडियो | विकल्पों में से एकल विकल्प (सेवा प्रकार) | ड्रॉपडाउन के बिना दृश्य विकल्प |
| चेकबॉक्स | कई चयन (रुचियाँ, सेवाएँ) | कई चयन की अनुमति है |
| तारीख | नियुक्ति की तारीखें, कार्यक्रम की तारीखें | स्वदेशी तारीख पिकर |
| समय | नियुक्ति अनुसूची | समय चयन नियंत्रण |
| फाइल अपलोड | रिज़्यूमे, दस्तावेज़, छवि सबमिशन | कॉन्फ़िगर करने योग्य फ़ाइल प्रकार और आकार सीमाएँ |
| स्वीकृति | शर्तें और नियम, GDPR सहमति | लिंक के साथ आवश्यक चेकबॉक्स |
| छिपा हुआ | ट्रैकिंग डेटा (पृष्ठ यूआरएल, रेफरर) | उपयोगकर्ता को दिखाई नहीं देता |
| reCAPTCHA | स्पैम सुरक्षा | v2 चेकबॉक्स या v3 अदृश्य |
| हनीपॉट | एंटी-स्पैम (मनुष्यों के लिए अदृश्य) | छिपा हुआ फ़ील्ड जो बॉट्स को पकड़ता है |
संपर्क फॉर्म बनाना
चरण 1: फॉर्म विजेट जोड़ें
- Elementor संपादक में कोई भी पृष्ठ खोलें
- विजेट पैनल में "फॉर्म" के लिए खोजें
- अपने लेआउट में फॉर्म विजेट खींचें
- डिफ़ॉल्ट फॉर्म में नाम, ईमेल और संदेश फ़ील्ड शामिल हैं
चरण 2: फॉर्म फ़ील्ड कॉन्फ़िगर करें
एक मानक संपर्क फॉर्म के लिए, यह फ़ील्ड कॉन्फ़िगरेशन अच्छी तरह से काम करता है:
- नाम (टेक्स्ट फ़ील्ड, आवश्यक) – प्लेसहोल्डर: "आपका नाम"
- ईमेल (ईमेल फ़ील्ड, आवश्यक) – प्लेसहोल्डर: "[email protected]"
- विषय (टेक्स्ट फ़ील्ड, वैकल्पिक) – प्लेसहोल्डर: "हम आपकी मदद कैसे कर सकते हैं?"
- संदेश (टेक्स्टएरिया फ़ील्ड, आवश्यक) – प्लेसहोल्डर: "हमें अपने प्रोजेक्ट के बारे में बताएं...", पंक्तियाँ: 5
- reCAPTCHA या हनीपॉट स्पैम सुरक्षा के लिए
चरण 3: सबमिट के बाद क्रियाएँ कॉन्फ़िगर करें
"सबमिट के बाद क्रियाएँ" अनुभाग के अंतर्गत, कॉन्फ़िगर करें कि जब कोई उपयोगकर्ता फॉर्म सबमिट करता है तो क्या होता है: For related information, see our guide on Elementor complete guide.
- ईमेल: अपने ईमेल पते (या कई पते) पर फॉर्म डेटा भेजें
- रीडायरेक्ट: सबमिशन के बाद उपयोगकर्ता को धन्यवाद पृष्ठ पर भेजें
- पॉपअप: एक पुष्टि पॉपअप प्रदर्शित करें
- वेबहुक: फॉर्म डेटा को एक बाहरी यूआरएल (Zapier, Make, कस्टम API) पर भेजें
- Mailchimp / ConvertKit / Drip: ईमेल मार्केटिंग सूचियों में ग्राहकों को जोड़ें
- Slack: एक Slack चैनल पर सूचनाएँ भेजें
- Discord: एक Discord वेबहुक पर सूचनाएँ भेजें
चरण 4: फॉर्म को स्टाइल करें
स्टाइल टैब में, दृश्य उपस्थिति को अनुकूलित करें: For related information, see our guide on Elementor templates and kits.
- फॉर्म लेआउट
- क्षेत्रों का ढांचा: फुल चौड़ाई (stacked) या इनलाइन (साइड बाय साइड)
- क्षेत्र की शैली: बॉर्डर, बैकग्राउंड रंग, पैडिंग, बॉर्डर-रेडियस, फोकस स्थिति रंग
- लेबल की शैली: फ़ॉन्ट परिवार, आकार, रंग, स्पेसिंग
- बटन की शैली: बैकग्राउंड रंग, टेक्स्ट रंग, बॉर्डर, होवर प्रभाव, फुल-वाइड विकल्प
- संदेश: सफलता और त्रुटि संदेश रंग और टाइपोग्राफी
एक मल्टी-स्टेप फॉर्म बनाना
मल्टी-स्टेप फॉर्म लंबे फॉर्म (पंजीकरण, आवेदन, सर्वेक्षण) के लिए उपयोगी होते हैं जहाँ एक साथ सभी क्षेत्रों को दिखाना उपयोगकर्ताओं को overwhelm कर सकता है। Elementor Pro स्वदेशी रूप से मल्टी-स्टेप फॉर्म का समर्थन करता है। For related information, see our guide on creating landing pages with Elementor.
चरण कैसे सेट करें
- अपने पृष्ठ पर एक फॉर्म विजेट जोड़ें
- फॉर्म क्षेत्रों की सूची में, क्षेत्रों के समूहों के बीच एक "चरण" क्षेत्र प्रकार जोड़ें
- प्रत्येक चरण क्षेत्र एक नए चरण के साथ "अगला" और "पिछला" बटन बनाता है
- उदाहरण संरचना:
- चरण 1: नाम, ईमेल, फोन (व्यक्तिगत जानकारी)
- चरण 2: कंपनी, बजट, समयसीमा (परियोजना विवरण)
- चरण 3: संदेश, फ़ाइल अपलोड (अतिरिक्त जानकारी)
मल्टी-स्टेप फॉर्म एक प्रगति संकेतक दिखाते हैं जो दर्शाता है कि उपयोगकर्ता किस चरण पर है। यह अनुभव की गई जटिलता को कम करता है और एक साथ सभी क्षेत्रों को दिखाने की तुलना में पूर्णता दरों में सुधार करता है।
एक उपयोगकर्ता पंजीकरण फॉर्म बनाना
Elementor Pro बिना किसी अलग प्लगइन के WordPress उपयोगकर्ता पंजीकरण फॉर्म बना सकता है:
- एक फॉर्म विजेट जोड़ें और क्षेत्रों को कॉन्फ़िगर करें (उपयोगकर्ता नाम, ईमेल, पासवर्ड)
- "सबमिट के बाद क्रियाएँ" के तहत, "पंजीकरण" क्रिया जोड़ें
- प्रत्येक फॉर्म क्षेत्र को संबंधित WordPress उपयोगकर्ता क्षेत्र से मानचित्रित करें
- नए पंजीकरण के लिए डिफ़ॉल्ट उपयोगकर्ता भूमिका सेट करें
- वैकल्पिक रूप से पंजीकरण के बाद उपयोगकर्ताओं को उनके खाते के पृष्ठ पर पुनर्निर्देशित करें
नोट: WordPress डिफ़ॉल्ट रूप से नए उपयोगकर्ताओं को अनुमोदित करने के लिए एक व्यवस्थापक की आवश्यकता होती है। यदि आप चाहते हैं कि उपयोगकर्ता स्वतंत्र रूप से पंजीकरण करें, तो आप इसे सेटिंग्स → सामान्य → सदस्यता के तहत बदल सकते हैं।
ईमेल मार्केटिंग सेवाओं के साथ एकीकरण
Elementor Pro सीधे लोकप्रिय ईमेल मार्केटिंग प्लेटफार्मों के साथ एकीकृत होता है:
सेवा एकीकरण प्रकार सेटअप चरण Mailchimp स्वदेशी (बिल्ट-इन) API कुंजी जोड़ें → सूची चुनें → क्षेत्रों को मानचित्रित करें ConvertKit स्वदेशी (बिल्ट-इन) API कुंजी जोड़ें → फॉर्म चुनें → क्षेत्रों को मानचित्रित करें ActiveCampaign स्वदेशी (बिल्ट-इन) API क्रेडेंशियल्स जोड़ें → सूची चुनें → क्षेत्रों को मानचित्रित करें Drip स्वदेशी (बिल्ट-इन) API टोकन जोड़ें → खाता चुनें → क्षेत्रों को मानचित्रित करें GetResponse स्वदेशी (बिल्ट-इन) API कुंजी जोड़ें → अभियान चुनें → क्षेत्रों को मानचित्रित करें MailerLite स्वदेशी (बिल्ट-इन) API कुंजी जोड़ें → समूह चुनें → क्षेत्रों को मानचित्रित करें HubSpot वेबहुक के माध्यम से Zapier/Make कनेक्शन के साथ वेबहुक क्रिया बनाएं प्रत्येक एकीकरण के लिए, प्रक्रिया है: Elementor के एकीकरण सेटिंग्स में अपनी सेवा की API कुंजी दर्ज करें, फिर अपने फॉर्म में "सबमिट के बाद क्रिया" के रूप में सेवा का चयन करें। अपने फॉर्म क्षेत्रों को सेवा के क्षेत्रों से मानचित्रित करें, और फॉर्म सबमिट होने पर सब्सक्राइबर स्वचालित रूप से जोड़े जाएंगे।
स्पैम सुरक्षा रणनीतियाँ
संपर्क फॉर्म स्पैम बॉट्स को आकर्षित करते हैं। Elementor Pro कई स्पैम रोकथाम विकल्प प्रदान करता है:
- Google reCAPTCHA v3: अदृश्य स्पैम पहचान जो उपयोगकर्ता इंटरैक्शन के बिना सबमिशन को स्कोर करता है। अधिकांश फॉर्म के लिए अनुशंसित
- reCAPTCHA v2: "मैं रोबोट नहीं हूँ" चेकबॉक्स। अधिक दृश्य लेकिन फॉर्म पूर्णताओं को कम कर सकता है
- हनीपॉट क्षेत्र: एक अदृश्य क्षेत्र जिसे बॉट भरते हैं। यदि क्षेत्र में डेटा होता है, तो सबमिशन अस्वीकृत कर दिया जाता है। कोई उपयोगकर्ता इंटरैक्शन की आवश्यकता नहीं है
- स्वीकृति क्षेत्र: एक आवश्यक चेकबॉक्स (GDPR सहमति, शर्तों की स्वीकृति) जो बॉट को रोकने के रूप में भी कार्य करता है
हम reCAPTCHA v3 का उपयोग करने की सिफारिश करते हैं जो एक हनीपॉट क्षेत्र के साथ मिलकर काम करता है। यह बिना किसी दृश्य प्रभाव के दो स्तरों की स्पैम सुरक्षा प्रदान करता है।
उपयोगकर्ता अनुभव में।
Elementor Forms बनाम समर्पित फॉर्म प्लगइन्स
विशेषता Elementor Forms Gravity Forms WPForms दृश्य निर्माणकर्ता Elementor संपादक के भीतर अलग ड्रैग-एंड-ड्रॉप अलग ड्रैग-एंड-ड्रॉप शर्तीय लॉजिक बुनियादी (क्षेत्र दिखाना/छिपाना) उन्नत उन्नत भुगतान एकीकरण PayPal बटन Stripe, PayPal, Square Stripe, PayPal, Square गणनाएँ नहीं हाँ हाँ (Pro) बहु-चरण हाँ हाँ हाँ फाइल अपलोड हाँ हाँ हाँ प्रविष्टि प्रबंधन Elementor सबमिशन के माध्यम से पूर्ण प्रविष्टि प्रबंधक पूर्ण प्रविष्टि प्रबंधक पृष्ठ निर्माता की आवश्यकता हाँ (Elementor Pro) नहीं नहीं Elementor Forms संपर्क फॉर्म, न्यूज़लेटर साइनअप और सरल पंजीकरण फॉर्म के लिए पर्याप्त है। भुगतान प्रसंस्करण, उन्नत शर्तीय लॉजिक, या जटिल प्रविष्टि प्रबंधन की आवश्यकता वाले जटिल फॉर्म के लिए, Gravity Forms या WPForms जैसे समर्पित फॉर्म प्लगइन्स अधिक उपयुक्त हैं।
अक्सर पूछे जाने वाले प्रश्न
क्या मैं Elementor Pro के बिना Elementor फॉर्म का उपयोग कर सकता हूँ?
नहीं। फॉर्म विजेट केवल Elementor Pro के लिए विशेष है। यदि आपको Elementor के मुफ्त संस्करण के साथ फॉर्म की आवश्यकता है, तो Contact Form 7 (मुफ्त), WPForms Lite (मुफ्त), या Gravity Forms (प्रीमियम) जैसे अलग फॉर्म प्लगइन का उपयोग करें।
Elementor फॉर्म सबमिशन कहाँ संग्रहीत होते हैं?
फॉर्म सबमिशन WordPress डेटाबेस में संग्रहीत होते हैं और प्रशासन पैनल में Elementor → Submissions के तहत सुलभ होते हैं। आप सबमिशन को देख सकते हैं, निर्यात (CSV) कर सकते हैं, और हटा सकते हैं। सबमिशन उन ईमेल पते पर भी भेजे जाते हैं जिन्हें आप ईमेल क्रिया में कॉन्फ़िगर करते हैं।
क्या Elementor फॉर्म फाइल अपलोड स्वीकार कर सकते हैं?
हाँ। अपने फॉर्म में एक फाइल अपलोड फ़ील्ड प्रकार जोड़ें। आप स्वीकार किए गए फ़ाइल प्रकार (PDF, JPG, PNG, DOCX, आदि) और अधिकतम फ़ाइल आकार को कॉन्फ़िगर कर सकते हैं। अपलोड की गई फ़ाइलें WordPress मीडिया लाइब्रेरी में संग्रहीत होती हैं और फॉर्म सबमिशन से लिंक होती हैं।
मैं Elementor फॉर्म में शर्तीय लॉजिक कैसे जोड़ूं?
Elementor Pro बुनियादी शर्तीय लॉजिक का समर्थन करता है: एक अन्य फ़ील्ड के मान के आधार पर फ़ील्ड दिखाना या छिपाना। फ़ील्ड सेटिंग्स में, "शर्तीय" सक्षम करें और शर्तें सेट करें (जैसे, "मैं एक व्यवसाय हूँ" रेडियो बटन का चयन होने पर "कंपनी" फ़ील्ड केवल दिखाएँ)। उन्नत शर्तीय लॉजिक (गणनाएँ, बहु-स्तरीय शर्तें) के लिए, एक समर्पित फॉर्म प्लगइन अधिक उपयुक्त हो सकता है।
क्या मैं Elementor के साथ पॉपअप फॉर्म बना सकता हूँ?
हाँ। Elementor में एक पॉपअप टेम्पलेट बनाएं, इसके अंदर एक फॉर्म विजेट जोड़ें, और ट्रिगर शर्तें सेट करें (क्लिक, स्क्रॉल प्रतिशत, निकासी इरादा, समय विलंब)। यह न्यूज़लेटर साइनअप, लीड मैग्नेट, और प्रचार प्रस्तावों के लिए उपयोगी है बिना मुख्य पृष्ठ लेआउट में एक फॉर्म जोड़े।
मैं Elementor फॉर्म पर स्पैम को कैसे रोकूं?
Google reCAPTCHA v3 (अदृश्य) का उपयोग करें जिसे एक हनीपॉट फ़ील्ड के साथ मिलाकर दो-स्तरीय सुरक्षा के लिए। यह स्वचालित बॉट्स को रोकता है बिना वास्तविक उपयोगकर्ताओं के लिए कोई बाधा डाले। उच्च-स्पैम-वॉल्यूम फॉर्म के लिए, तीसरी परत के रूप में एक स्वीकृति फ़ील्ड (आवश्यक चेकबॉक्स) जोड़ने पर विचार करें।
फॉर्म बिल्डर के साथ Elementor Pro प्राप्त करें
फॉर्म विजेट, थीम बिल्डर, WooCommerce बिल्डर, और 100+ Pro विजेट्स तक पहुँच प्राप्त करें। बिना अतिरिक्त प्लगइन्स के दृश्य रूप से फॉर्म बनाएं।
Elementor Pro ब्राउज़ करें →
