फॉर्म स्टाइलिंग
ऑटो फॉर्म बिल्डर आपको फॉर्म स्टाइलिंग पर पूरा नियंत्रण देता है। अपने ब्रांड के रंगों का मिलान करें, अपने फ़ॉन्ट का उपयोग करें, स्पेसिंग को समायोजित करें और ऐसे फॉर्म डिज़ाइन करें जो आपकी साइट का एक स्वाभाविक हिस्सा लगें।
फॉर्म स्टाइलिंग क्यों मायने रखती है
आपकी वेबसाइट का अपना एक ब्रांड है। आपके फॉर्म्स में भी यह ब्रांड झलकना चाहिए।
जब फॉर्म आपकी वेबसाइट के बाकी हिस्सों से अलग दिखते हैं, तो आगंतुक हिचकिचाते हैं। वे सोचते हैं कि क्या वे अभी भी उसी वेबसाइट पर हैं। यह हिचकिचाहट कन्वर्ज़न को कम करती है।
सुव्यवस्थित फॉर्म व्यावसायिकता का भी संकेत देते हैं। एक आकर्षक फॉर्म आगंतुकों को बताता है कि आप बारीकियों का ध्यान रखते हैं—और यदि आप फॉर्म डिज़ाइन का ध्यान रखते हैं, तो संभवतः आप उनके डेटा का भी ध्यान रखते हैं।
फॉर्म स्टाइलिंग कैसे काम करती है
ऑटो फॉर्म बिल्डर में फॉर्म बिल्डर इंटरफेस में ही एक विजुअल स्टाइल एडिटर शामिल होता है।
- स्टाइल करने के लिए चुनेंफॉर्म कंटेनर, फ़ील्ड लेबल, इनपुट फ़ील्ड, बटन या त्रुटि संदेशों में से चुनें।
- सेटिंग्स समायोजित करेंमान बदलने के लिए कलर पिकर, स्लाइडर और ड्रॉपडाउन का उपयोग करें। CSS सिंटैक्स सीखने या याद रखने की कोई आवश्यकता नहीं है।
- तुरंत पूर्वावलोकन करेंहर बदलाव लाइव प्रीव्यू में तुरंत दिखाई देता है। प्रकाशित करने से पहले देखें कि आपका फॉर्म कैसा दिखेगा।
- डिफ़ॉल्ट के रूप में सहेजेंनए फॉर्म पर अपनी स्टाइलिंग स्वचालित रूप से लागू करें। एक बार बनाएं, हर जगह पुनः उपयोग करें।
आप क्या अनुकूलित कर सकते हैं
रंग
अपने फॉर्म के सभी रंगों को नियंत्रित करें। फॉर्म कंटेनर और अलग-अलग फ़ील्ड के लिए बैकग्राउंड रंग। लेबल, प्लेसहोल्डर और इनपुट टेक्स्ट के लिए टेक्स्ट रंग। डिफ़ॉल्ट, फ़ोकस और त्रुटि स्थितियों के लिए बॉर्डर रंग। बैकग्राउंड, टेक्स्ट और होवर इफ़ेक्ट के लिए बटन रंग।
टाइपोग्राफी
लेबल और इनपुट फ़ील्ड के लिए फ़ॉन्ट चुनें। फ़ॉन्ट आकार को अलग-अलग समायोजित करें—ज़ोर देने के लिए बड़े लेबल, अतिरिक्त जानकारी के लिए छोटा सहायक टेक्स्ट। बोल्ड लेबल या हल्के इनपुट टेक्स्ट के लिए फ़ॉन्ट वेट को नियंत्रित करें।
स्पेसिंग और लेआउट
फ़ील्ड्स के बीच पर्याप्त स्पेस सेट करें ताकि लिखने के लिए पर्याप्त जगह मिल सके। फ़ील्ड्स के अंदर पैडिंग को एडजस्ट करें ताकि टेक्स्ट आसानी से टाइप हो सके। पूरे फ़ॉर्म के मार्जिन को कंट्रोल करके उसे पेज लेआउट में सही जगह पर रखें।
सीमाएँ और कोने
बॉर्डर की चौड़ाई, स्टाइल और रंग निर्धारित करें। आधुनिक लुक के लिए कोनों को गोल करें या मिनिमल डिज़ाइन के लिए उन्हें नुकीला रखें। अलग-अलग फॉर्म स्टेट्स पर अलग-अलग बॉर्डर स्टाइल लागू करें—डिफ़ॉल्ट रूप से हल्के बॉर्डर, फोकस होने पर प्रमुख बॉर्डर।
बटन
अपने ब्रांड के अनुरूप सबमिट बटन डिज़ाइन करें। बैकग्राउंड रंग, टेक्स्ट रंग, बॉर्डर रेडियस, पैडिंग, फ़ॉन्ट साइज़ और फ़ॉन्ट वेट को कस्टमाइज़ करें। होवर और एक्टिव स्टेट्स को भी कस्टमाइज़ करें ताकि बटन रिस्पॉन्सिव और क्लिक करने योग्य लगें।
फॉर्मकंटेनर
फॉर्म के बाहरी आवरण को स्टाइल करें। बैकग्राउंड कलर जोड़ें या इसे पारदर्शी रखें। गहराई देने के लिए बॉक्स शैडो लगाएं। गोल आकार वाले फॉर्म कंटेनरों के लिए बॉर्डर रेडियस सेट करें। फॉर्म को बहुत ज्यादा फैलने से रोकने के लिए अधिकतम चौड़ाई को नियंत्रित करें।
सामान्य फॉर्म स्टाइलिंग परिदृश्य
ब्रांड दिशानिर्देशों का पालन करें
आपकी कंपनी के कुछ खास रंग हैं—प्रधान रंग के लिए #0F2D5F और एक्सेंट रंग के लिए #F59E0B। इन मानों को स्टाइल एडिटर में दर्ज करें। फॉर्म बटन आपके एक्सेंट रंग का उपयोग करेंगे। फॉर्म लेबल आपके प्रधान रंग का उपयोग करेंगे। इस तरह ब्रांड में पूर्ण एकरूपता आएगी।
उच्च-विपरीत आकृतियाँ बनाएँ
क्या आपकी वेबसाइट का बैकग्राउंड गहरा है? ऐसे हल्के आकार बनाएं जो अलग दिखें। यदि बैकग्राउंड हल्का है? तो बॉर्डर वाले आकार और हल्की परछाइयों का उपयोग करके आकार के क्षेत्र को इस तरह परिभाषित करें कि वह देखने में किसी से टकराए नहीं।
न्यूनतम रूपों का डिज़ाइन करें
बॉर्डर हटाएँ, स्पेसिंग कम करें, पारदर्शी बैकग्राउंड का उपयोग करें। ऐसे फॉर्म बनाएँ जो बॉक्स में रखे होने के बजाय पेज का अभिन्न अंग प्रतीत हों।
आकर्षक कॉल-टू-एक्शन फॉर्म बनाएं
बड़े बटन, चटख रंग, पर्याप्त पैडिंग। अपने सबसे महत्वपूर्ण लीड जनरेशन पेजों के लिए ऐसे फॉर्म बनाएं जो ध्यान आकर्षित करें।
किसी भी थीम से मेल खाने वाले फॉर्म
ऑटो फॉर्म बिल्डर हर वर्डप्रेस थीम के साथ काम करता है। आपके द्वारा डिज़ाइन किए गए फॉर्म किसी भी डिज़ाइन संदर्भ के अनुरूप ढल जाते हैं।
क्या आप Woodmart, Astra, GeneratePress, Divi, या किसी अन्य थीम का उपयोग कर रहे हैं? आपके फ़ॉर्म बिल्कुल प्राकृतिक दिखेंगे। स्टाइल एडिटर आपको किसी भी डिज़ाइन सिस्टम से मेल खाने के लिए पर्याप्त नियंत्रण प्रदान करता है।
कोई थीम संबंधी टकराव नहीं। स्टाइल इनहेरिटेंस की कोई समस्या नहीं। बस ऐसे फॉर्म जो बिल्कुल वैसे ही दिखें जैसे आप चाहते हैं।
CSS की आवश्यकता नहीं है
आपको अपने फॉर्म को स्टाइल करने के लिए कस्टम CSS लिखने की आवश्यकता नहीं है। विजुअल एडिटर सब कुछ संभाल लेता है।
लेकिन अगर आप CSS कंट्रोल चाहते हैं, तो ऑटो फॉर्म बिल्डर हर फॉर्म के लिए कस्टम CSS को सपोर्ट करता है। विशेष परिस्थितियों के लिए ओवरराइड जोड़ें या विज़ुअल एडिटर में उपलब्ध न होने वाली एडवांस्ड स्टाइलिंग लागू करें। एडवांस्ड यूज़र्स को वह लचीलापन मिलता है जिसकी उन्हें ज़रूरत होती है।
