फॉर्म स्टाईलिंग
ऑटो फॉर्म बिल्डर तुम्हाला फॉर्मच्या स्टायलिंगवर संपूर्ण नियंत्रण देतो. तुमच्या ब्रँडचे रंग जुळवा, तुमचे फॉन्ट वापरा, स्पेसिंग समायोजित करा आणि तुमच्या साइटचा एक नैसर्गिक भाग वाटतील असे फॉर्म डिझाइन करा.
फॉर्म स्टाइलिंग का महत्त्वाचे आहे
तुमच्या वेबसाइटला एक ब्रँड आहे. तुमच्या फॉर्ममध्ये ते प्रतिबिंबित झाले पाहिजे.
जेव्हा फॉर्म तुमच्या साइटच्या इतर भागांपेक्षा वेगळे दिसतात तेव्हा अभ्यागत संकोच करतात. त्यांना आश्चर्य वाटते की ते अजूनही त्याच वेबसाइटवर आहेत का. त्या संकोचमुळे रूपांतरणांना किंमत मोजावी लागते.
स्टाईल केलेले फॉर्म व्यावसायिकतेचा संदेश देतात. एक पॉलिश केलेला फॉर्म अभ्यागतांना सांगतो की तुम्हाला तपशीलांची काळजी आहे - आणि जर तुम्हाला फॉर्म डिझाइनची काळजी असेल तर तुम्हाला कदाचित त्यांच्या डेटाची देखील काळजी असेल.
फॉर्म स्टाइलिंग कसे कार्य करते
ऑटो फॉर्म बिल्डरमध्ये फॉर्म बिल्डर इंटरफेसमध्येच एक व्हिज्युअल स्टाईल एडिटर समाविष्ट असतो.
- काय स्टाईल करायचे ते निवडा. फॉर्म कंटेनर, फील्ड लेबल्स, इनपुट फील्ड, बटणे किंवा त्रुटी संदेशांमधून निवडा.
- सेटिंग्ज समायोजित करा. मूल्ये बदलण्यासाठी रंग निवडक, स्लाइडर आणि ड्रॉपडाउन वापरा. शिकण्यासाठी किंवा लक्षात ठेवण्यासाठी कोणताही CSS वाक्यरचना नाही.
- त्वरित पूर्वावलोकन करा. प्रत्येक बदल लाईव्ह प्रिव्ह्यूमध्ये लगेच दिसून येतो. प्रकाशित करण्यापूर्वी तुमचा फॉर्म कसा दिसेल ते नक्की पहा.
- डीफॉल्ट म्हणून सेव्ह करा. नवीन फॉर्मवर तुमची स्टाईलिंग आपोआप लागू करा. एकदा तयार करा, सर्वत्र पुन्हा वापरा.
तुम्ही काय कस्टमाइझ करू शकता
रंग
तुमच्या फॉर्ममधील प्रत्येक रंग नियंत्रित करा. फॉर्म कंटेनर आणि वैयक्तिक फील्डसाठी पार्श्वभूमी रंग. लेबल्स, प्लेसहोल्डर्स आणि इनपुट टेक्स्टसाठी टेक्स्ट रंग. डीफॉल्ट, फोकस आणि एरर स्टेट्ससाठी बॉर्डर रंग. पार्श्वभूमी, मजकूर आणि होव्हर इफेक्ट्ससाठी बटण रंग.
टायपोग्राफी
लेबल्स आणि इनपुट फील्डसाठी फॉन्ट निवडा. फॉन्ट आकार स्वतंत्रपणे समायोजित करा—अधोरेखनासाठी मोठे लेबल्स, दुय्यम माहितीसाठी लहान सहाय्यक मजकूर. ठळक लेबल्स किंवा हलक्या इनपुट मजकुरासाठी फॉन्ट वजन नियंत्रित करा.
अंतर आणि लेआउट
श्वास घेण्यास जागा निर्माण करण्यासाठी फील्डमधील अंतर सेट करा. आरामदायी मजकूर प्रविष्टीसाठी फील्डमधील पॅडिंग समायोजित करा. तुमच्या पृष्ठ लेआउटमध्ये ते योग्यरित्या ठेवण्यासाठी संपूर्ण फॉर्मभोवती मार्जिन नियंत्रित करा.
सीमा आणि कोपरे
बॉर्डरची रुंदी, शैली आणि रंग निश्चित करा. आधुनिक लूकसाठी गोल कोपरे वापरा किंवा किमान डिझाइनसाठी त्यांना तीक्ष्ण ठेवा. वेगवेगळ्या फॉर्म स्टेट्समध्ये वेगवेगळ्या बॉर्डर स्टाइल लावा—डिफॉल्टनुसार सूक्ष्म बॉर्डर, फोकसवर प्रमुख बॉर्डर.
बटणे
तुमच्या ब्रँडशी जुळणारे सबमिट बटणे डिझाइन करा. पार्श्वभूमी रंग, मजकूर रंग, बॉर्डर रेडियस, पॅडिंग, फॉन्ट आकार आणि फॉन्ट वजन. बटणे प्रतिसादात्मक आणि क्लिक करण्यायोग्य वाटतील अशा प्रकारे होव्हर आणि सक्रिय स्थिती कस्टमाइझ करा.
फॉर्म कंटेनर
संपूर्ण फॉर्म रॅपरला स्टाईल करा. पार्श्वभूमी रंग जोडा किंवा तो पारदर्शक ठेवा. खोलीसाठी बॉक्स शॅडो लावा. गोलाकार फॉर्म कंटेनरसाठी बॉर्डर रेडियस सेट करा. फॉर्म खूप रुंद पसरू नयेत म्हणून कमाल-रुंदी नियंत्रित करा.
सामान्य फॉर्म स्टाइलिंग परिस्थिती
ब्रँड मार्गदर्शक तत्त्वे जुळवा
तुमच्या कंपनीकडे विशिष्ट रंग आहेत—प्राथमिक रंगासाठी #0F2D5F, अॅक्सेंटसाठी #F59E0B. स्टाईल एडिटरमध्ये ती मूल्ये एंटर करा. फॉर्म बटणे तुमचा अॅक्सेंट रंग वापरतात. फॉर्म लेबल्स तुमचा प्राथमिक रंग वापरतात. परिपूर्ण ब्रँड सुसंगतता.
उच्च-कॉन्ट्रास्ट फॉर्म तयार करा
गडद पार्श्वभूमी असलेली वेबसाइट? वेगळे दिसणारे हलके फॉर्म तयार करा. हलकी पार्श्वभूमी? दृश्यात्मक स्पर्धा न करता फॉर्म क्षेत्र परिभाषित करण्यासाठी सूक्ष्म सावल्यांसह बॉर्डर फॉर्म वापरा.
किमान फॉर्म डिझाइन करा
सीमा काढा, अंतर कमी करा, पारदर्शक पार्श्वभूमी वापरा. बॉक्समध्ये बसण्याऐवजी पृष्ठात एकत्रित वाटणारे फॉर्म तयार करा.
ठळक कॉल-टू-अॅक्शन फॉर्म तयार करा
मोठी बटणे, मजबूत रंग, उदार पॅडिंग. तुमच्या सर्वात महत्त्वाच्या लीड जनरेशन पेजसाठी लक्ष वेधून घेणारे फॉर्म तयार करा.
कोणत्याही थीमशी जुळणारे फॉर्म
ऑटो फॉर्म बिल्डर प्रत्येक वर्डप्रेस थीमसोबत काम करतो. तुमचे स्टाईल केलेले फॉर्म कोणत्याही डिझाइन संदर्भानुसार जुळवून घेतात.
वुडमार्ट, अॅस्ट्रा, जनरेटप्रेस, डिव्ही किंवा इतर कोणतीही थीम वापरत आहात का? तुमचे फॉर्म मूळ दिसतील. स्टाईल एडिटर तुम्हाला कोणत्याही डिझाइन सिस्टमशी जुळण्यासाठी पुरेसे नियंत्रण देतो.
थीममध्ये कोणताही संघर्ष नाही. शैलीच्या वारशाच्या समस्या नाहीत. फक्त असे फॉर्म जे तुम्हाला हवे तसे दिसतील.
CSS आवश्यक नाही
तुमचे फॉर्म स्टाईल करण्यासाठी तुम्हाला कस्टम CSS लिहिण्याची गरज नाही. व्हिज्युअल एडिटर सर्वकाही हाताळतो.
परंतु तुम्हाला CSS नियंत्रण हवे असल्यास, ऑटो फॉर्म बिल्डर प्रत्येक फॉर्मसाठी कस्टम CSS ला सपोर्ट करतो. विशेष परिस्थितींसाठी ओव्हरराइड्स जोडा किंवा व्हिज्युअल एडिटरमध्ये उपलब्ध नसलेली प्रगत स्टाइलिंग लागू करा. प्रगत वापरकर्त्यांना आवश्यक असलेली लवचिकता मिळते.
