फ़ॉर्म डिज़ाइन करना.

BrandStudio से डिज़ाइन अपनाएँ

हर नया फ़ॉर्म BrandStudio से आपके ब्रांड के रंग और फ़ॉन्ट अपनाता है — टेम्पलेट से या Kenji द्वारा बनाया गया फ़ॉर्म भी। इसके लिए “डिज़ाइन” चरण में सबसे ऊपर “ब्रांड” कार्ड है, जिसमें “BrandStudio से डिज़ाइन अपनाएँ” स्विच है। जब तक यह चालू है, नीचे के नियंत्रण लॉक रहते हैं; अगर आप BrandStudio में कुछ बदलते हैं, तो फ़ॉर्म अपने-आप उसका अनुसरण करता है।

स्विच बंद करने पर फ़ॉर्म वही रूप बनाए रखता है जो उसका अभी है, और वहाँ से आगे आप खुद डिज़ाइन करते हैं; कार्ड “अपना डिज़ाइन” दिखाता है। इसे फिर से चालू करने पर फ़ॉर्म दोबारा ब्रांड का अनुसरण करता है — आपका अपना डिज़ाइन अलग रख दिया जाता है, और “पूर्ववत करें: … का अपना डिज़ाइन” उसे वापस ले आता है। अगर आपके ब्रांड में अभी कोई रंग नहीं हैं, तो तब तक ब्रांड के फ़ॉन्ट के साथ सादी थीम लागू रहती है।

“ब्रांड” कार्ड केवल तभी दिखाई देता है जब आपके खाते में कोई ब्रांड हो। स्विच “सहेजें” के बिना तुरंत लागू होता है।

1. 1फ़ॉर्म को “डिज़ाइन” चरण में खोलें।
2. 2अगर आप खुद डिज़ाइन करना चाहते हैं, तो “BrandStudio से डिज़ाइन अपनाएँ” बंद करें।
3. 3रंग, फ़ॉन्ट और फ़ील्ड सेट करें और “सहेजें” पर क्लिक करें।

लोगो और कंपनी विवरण

उसी कार्ड में “ब्रांड का लोगो और कंपनी विवरण दिखाएँ” से फ़ॉर्म के ऊपर आपके ब्रांड का लोगो और नाम दिखते हैं, और नीचे कंपनी का नाम, ईमेल, फ़ोन, वेबसाइट और आपके सोशल मीडिया चैनलों के आइकन, जिन्हें आपने SocialStudio में सहेजा है। सूचना, प्रति और PDF प्रति में भी यही विवरण होते हैं, और तब ब्राउज़र में पेज का शीर्षक कुछ ऐसा होता है: “Tisch reservieren · Café Lumen”।

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

1. 1“डिज़ाइन” चरण खोलें।
2. 2“ब्रांड” कार्ड में “ब्रांड का लोगो और कंपनी विवरण दिखाएँ” को चालू या बंद करें।
3. 3“सहेजें” पर क्लिक करें और “ब्राउज़र में प्रीव्यू” से इसकी जाँच करें।

मिज़ाज और रंग

अगर आप खुद डिज़ाइन करते हैं, तो “मिज़ाज” में एक क्लिक सब कुछ एक साथ सेट कर देता है: सादा, आधी रात, सेज, रेत, गुलाब, सागर, स्याही या आकाश। इसके बाद आप “रंग” में एक-एक करके बारीकी से समायोजन करते हैं: “पृष्ठभूमि”, “कार्ड” — वह सतह जिस पर फ़ील्ड रहते हैं —, “टेक्स्ट का रंग” और “बटन और एक्सेंट”।

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

1. 1“डिज़ाइन” चरण में BrandStudio से डिज़ाइन अपनाना बंद करें।
2. 2किसी मिज़ाज पर क्लिक करें, जैसे “रेत”।
3. 3अलग-अलग रंग और अपारदर्शिता समायोजित करें और “सहेजें” पर क्लिक करें।

फ़ॉन्ट

“फ़ॉन्ट” में आप ग्यारह मुफ़्त फ़ॉन्ट में से एक चुनते हैं — “सिस्टम”, Inter, DM Sans, Poppins, Space Grotesk, Karla, Lora, Playfair Display, Fraunces, Manrope या IBM Plex Mono। प्रीव्यू इसे तुरंत दिखाता है।

अपना फ़ॉन्ट आप फ़ाइल के रूप में अपलोड करते हैं: “अपनी फ़ॉन्ट फ़ाइल अपलोड करें (woff2, अधिकतम 2 MB)”। फ़ाइल का नाम ही उसका नाम बन जाता है, और “हटाएँ” उसे फिर से हटा देता है। अगर आपका फ़ॉन्ट किसी फ़ॉन्ट सेवा पर है, तो “लिंक से अपना फ़ॉन्ट” खोलें और CSS फ़ाइल का लिंक (https) और फ़ॉन्ट फ़ैमिली का नाम दर्ज करें — प्रीव्यू दिखाता है कि दोनों आपस में मेल खाते हैं या नहीं। तब फ़ॉन्ट वहीं से लोड होता है जहाँ लिंक इशारा करता है। अपलोड की गई फ़ाइल को लिंक और सूची से चुने गए फ़ॉन्ट पर प्राथमिकता मिलती है।

1. 1“डिज़ाइन” चरण में BrandStudio से डिज़ाइन अपनाना बंद करें।
2. 2“फ़ॉन्ट” में एक फ़ॉन्ट चुनें — या एक woff2 फ़ाइल अपलोड करें।
3. 3“सहेजें” पर क्लिक करें।

फ़ील्ड शैली और गोलाई

“फ़ील्ड” में आप तय करते हैं कि इनपुट फ़ील्ड कैसे दिखें: बारीक बाहरी रेखा के साथ “किनारा”, हल्की रंगत वाली पृष्ठभूमि के साथ “सतह” या केवल एक आधार रेखा के साथ “रेखा” — सबसे शांत रूप। “गोलाई” स्लाइडर कार्ड, फ़ील्ड और बटन को अधिक कोणीय या अधिक गोल बनाता है।

इस चरण के सभी नियंत्रणों की तरह यह भी तभी काम करता है जब आपने BrandStudio से डिज़ाइन अपनाना बंद कर दिया हो, और यह “सहेजें” के बाद लागू होता है।

पृष्ठभूमि छवि

कार्ड के पीछे एक छवि हो सकती है। “पृष्ठभूमि छवि” में तीन स्रोत हैं: आपकी अपनी फ़ाइल (PNG, JPEG या WebP, 3 MB तक), “या मुफ़्त छवियाँ खोजें …” खोज और आपके MediaStudio से “या अपनी छवियों में से चुनें”। हर स्थिति में छवि आपके फ़ॉर्म में कॉपी की जाती है और आपके पते से दी जाती है — इससे कोई बाहरी सेवा नहीं जुड़ी होती।

फ़ील्ड वाला कार्ड उसके ऊपर पढ़ने योग्य बना रहता है; छवि कितनी झलकती है, यह आप “कार्ड” की अपारदर्शिता से तय करते हैं। “छवि हटाएँ” उसे फिर से हटा देता है। चुनी गई छवि तुरंत सहेज ली जाती है। जब तक फ़ॉर्म आपके ब्रांड का अनुसरण करता है, तब तक अपलोड करना, खोजना और आपकी अपनी लाइब्रेरी लॉक रहते हैं।

1. 1“डिज़ाइन” चरण में BrandStudio से डिज़ाइन अपनाना बंद करें।
2. 2“पृष्ठभूमि छवि” में “Café” जैसा कोई शब्द टाइप करें और “खोजें” पर क्लिक करें।
3. 3किसी छवि पर क्लिक करें — वह तुरंत फ़ॉर्म के पीछे आ जाती है।

प्रीव्यू और जाँच

“डिज़ाइन” के बीच में आपका फ़ॉर्म वैसा ही दिखता है जैसा आपके मेहमान उसे देखते हैं — भरने वाले पेज जैसे ही रंगों, फ़ॉन्ट और पंक्तियों के साथ। “डेस्कटॉप”, “टैबलेट” और “स्मार्टफ़ोन” से आप चौड़ाई बदलते हैं; फ़ोन की चौड़ाई में पंक्तियाँ एक-दूसरे के नीचे आ जाती हैं, ठीक वैसे ही जैसे मेहमान के फ़ोन पर। बाईं ओर संरचना है: किसी फ़ील्ड पर क्लिक करने से आप “बनाएँ” पर पहुँचते हैं, जहाँ वह फ़ील्ड पहले से चुना होता है।

“जाँचें” प्रीव्यू को भरने योग्य बनाता है: शर्तें लागू होती हैं, कुछ भी सहेजा नहीं जाता। “प्रीव्यू” वापस बदल देता है। “ब्राउज़र में प्रीव्यू” पहले सहेजता है और फिर असली भरने वाला पेज नए टैब में खोलता है — वहाँ आप लोगो और कंपनी विवरण, अनुमानित मूल्य और ऑर्डर की कुल राशि भी देखते हैं। यह तब भी काम करता है जब फ़ॉर्म अभी बंद हो; ऊपर एक पट्टी पर “प्रीव्यू” लिखा होता है, और वहाँ से कुछ भी जमा नहीं किया जाता।

“बनाएँ” चरण में फ़ॉर्म जानबूझकर तटस्थ रूप में दिखाया जाता है; उसका रूप-रंग यह चरण दिखाता है।

1. 1“डिज़ाइन” चरण खोलें और “स्मार्टफ़ोन” चुनें।
2. 2“जाँचें” पर क्लिक करें और फ़ॉर्म को आज़माइश के तौर पर भरें।
3. 3असली पेज देखने के लिए “ब्राउज़र में प्रीव्यू” पर क्लिक करें।