और फ़ॉर्म लेआउट (1)
सभी देखें
https://neobrutalism.com/hi/blocks/forms/compact-newsletter-signup-form
कॉम्पैक्ट न्यूज़लेटर साइनअप
फ़ॉर्म · Pro सोर्स
सबसे छोटा उपयोगी subscribe फ़ॉर्म — लेबल्ड ईमेल फ़ील्ड, एक बटन और reassurance की एक लाइन, हार्ड ऑफ़सेट फ़्रेम पर बैठे ताकि भटका इनपुट न लगे बल्कि जानबूझकर रखा ऑब्जेक्ट। max-w-md पर capped है ताकि साइडबार, फ़ुटर कॉलम या आर्टिकल के अंत में बिना आसपास redesign डाल सकें।
फ़ॉर्म
कॉम्पैक्ट न्यूज़लेटर साइनअपलाइव प्रीव्यू खोलें
- Hero, प्राइसिंग और auth
- हर ब्रेकपॉइंट का पूर्वावलोकन करें
- स्रोत की प्रतिलिपि बनाएँ
- MCP स्थापित करने के लिए तैयार
- Radix · Base UI · React Aria
- 158 तैयार-निर्मित ब्लॉक
- पृष्ठ के शिपिंग वाले खंड
- डैशबोर्ड और विपणन
- Pro कोड अनलॉक करता है
- ड्रॉप-इन लेआउट
पसंद डेवलपर्स, डिज़ाइनर्स
और क्रिएटर्स की
आपकी UI किट मिल गई और तुरंत ले ली। नई है, एक्टिवली मेंटेन होती है और लगातार बेहतर हो रही है — कमाल का काम! 🤘
Ziv Reich, सॉफ़्टवेयर डेवलपर बस इतना कहना था कि neobrutalism.com पर बढ़िया काम किया. सच में बहुत पसंद है. डिज़ाइन मुझसे होता नहीं, तो यह मेरे लिए कमाल की चीज़ रही. अपनी पर्सनल साइट पर इस्तेमाल किया.
Paul Bratslavsky, Coding With Paul के क्रिएटर आख़िरकार Neobrutalism.com से अपनी पर्सनल वेबसाइट फिर से बनाई — मज़ेदार लाइब्रेरी, शुरू करना बहुत आसान!
Cameron Blackwood, कंटेंट क्रिएटर Neobrutalism.com रेट्रो स्टाइल की मेरी पसंदीदा UI कंपोनेंट लाइब्रेरी में से एक है — कंपोनेंट जो सच में ship होते हैं।
Zhengyang Hou, इंडी हैकर वेब के लिए मेरी पसंदीदा ui लाइब्रेरी में से एक. बढ़िया काम — उम्मीद है यह और भी आगे जाएगी.
Taseen Tanvir, फ़ाउंडर और डिज़ाइनर Neobrutalism.com Pro आज़माया — बाक़ी से अलग UI किट, सच में ताज़गी भरी। नियोब्रूटलिज़्म ब्लॉक्स 🔥 से अजीब लेआउट का प्रोटोटाइप कहीं तेज़ हो गया।
Nitesh Padghan, घोस्टराइटर ब्यूटीफ़ुल लैंडिंग पेज डिज़ाइन, परफ़ेक्ट बैलेंस और फ्लो के साथ। कलर पैलेट और एनिमेशन मिलकर एक्सेप्शनल यूज़र एक्सपीरियंस बनाते हैं।
Alan Obeng-Peprah, Senior Designer @ NativeXAI उन्होंने जो डिज़ाइन डिलीवर किया, उससे मैं सच में इंप्रेस्ड हूँ। फ़ाइनल प्रॉडक्ट बिल्कुल वैसा ही था जैसा मैंने सोचा था।
Desmond, Co-founder @ VectorlabsVentures एजेंसी ओनर के तौर पर मैं क्लाइंट लैंडिंग लेआउट पर हफ़्ते लगा देता हूँ। Neobrutalism.com के साथ मैं टेम्प्लेट लगाता हूँ, कॉपी ट्वीक करता हूँ, और शिप के लिए तैयार।
Duke Opoku Amankwah, Founder @ Midas टेम्प्लेट सिर्फ़ विज़ुअली स्टनिंग नहीं — स्ट्रक्चर भी बहुत अच्छा है। हफ़्तों का डेवलपमेंट टाइम बचाया।
Abiola Braimah, Developer @ Studio IX आउटस्टैंडिंग क्वालिटी और डिटेल पर ध्यान। रिस्पॉन्सिव डिज़ाइन हर डिवाइस पर फ्लॉलेस काम करता है।
Acromond X., Co-founder @ VectorlabsVentures इन टेम्प्लेट को हमारे वर्कफ़्लो में जोड़ने से डेवलपमेंट साइकिल काफी कम हो गई। शानदार काम।
Raquib S., Backend Developer ये टेम्प्लेट हमारा गो-टू रिसोर्स बन गए हैं। कोड क्लीन है, अच्छी तरह डॉक्यूमेंटेड, और आसानी से कस्टमाइज़ हो जाता है।
Hallic M., Developer @ AtlasLabs Neobrutalism.com टेम्प्लेट एस्थेटिक्स और फ़ंक्शनैलिटी का परफ़ेक्ट बैलेंस रखते हैं। हमारे प्रोजेक्ट्स के लिए असली गेम-चेंजर।
Ibrahim S., Frontend Lead @ ScaleUp आउटस्टैंडिंग सपोर्ट और प्रीमियम क्वालिटी टेम्प्लेट। इन टेम्प्लेट पर ROI फ़ीनॉमिनल है।
Kevin K., CEO @ WebCraft Neobrutalism.com टेम्प्लेट ने नए क्लाइंट प्रोजेक्ट्स के अप्रोच को पूरी तरह बदल दिया। कोड क्वालिटी एक्सेप्शनल है और डिज़ाइन सच में वर्ल्ड-क्लास।
Danny G., Founder of DevStack मैंने कई टेम्प्लेट लाइब्रेरी इस्तेमाल की हैं, लेकिन Neobrutalism.com परफ़ॉर्मेंस ऑप्टिमाइज़ेशन और क्लीन कोड आर्किटेक्चर की वजह से अलग है।
Ian D., CTO at Wavelength इन टेम्प्लेट में एनिमेशन और माइक्रो-इंटरैक्शन बिल्कुल शानदार हैं। डिज़ाइन टीम के लिए बेस्ट इन्वेस्टमेंट।
Ben S., Lead Designer at PixelPerfect नॉन-टेक्निकल फ़ाउंडर के तौर पर Neobrutalism.com टेम्प्लेट ने डिज़ाइन क्वालिटी से समझौता किए बिना रिकॉर्ड समय में MVP लॉन्च करने में मदद की। हमारे इन्वेस्टर्स हैरान रह गए।
Matthew I., Startup Founder मुझे पसंद है कि ये कंपोनेंट कितने मॉड्यूलर और अच्छी तरह डॉक्यूमेंटेड हैं। अलग-अलग टेम्प्लेट के टुकड़े आसानी से मिला पाए।
Garrett P., Frontend Lead at TechFusion Neobrutalism.com टेम्प्लेट पर ROI अविश्वसनीय है। डेवलपमेंट टाइम बहुत कम हो गया और क्लाइंट्स को बेहतर क्वालिटी साइट्स मिल रही हैं।
Xavier C., Agency Owner
अक्सर पूछे
जाने वाले सवाल
कॉम्पैक्ट न्यूज़लेटर साइनअप ब्लॉक को कैसे बनाया जाता है, आप क्या बदल सकते हैं, और इसे यहाँ अन्य लेआउट की जगह कब इस्तेमाल करें।
क्योंकि यह कहाँ जाता है। यह max-w-md है बिना header band, बिना consent checkbox और बिना avatar रो, इसलिए साइडबार या फ़ुटर कॉलम में पेज की एक-तिहाई चौड़ाई पर भी बच जाता है। Newsletter Signup With Proof स्टैंडअलोन वर्ज़न है फ़ुल-विड्थ बैंड के लिए, जहाँ लिस्ट क्या भेजती है समझाने और दूसरे लोग पहले से पढ़ते हैं दिखाने की जगह होती है।
कार्ड पर एक हार्ड शैडो से: shadow-[12px_12px_0px_0px_var(--color-accent)]। पुराने वर्ज़न ने नकली बनाने के लिए कार्ड के पीछे दूसरा absolutely positioned div स्टैक किया था, जिससे मार्कअप दोगुना हो जाता और alignment बिगड़ सकता था। फ़्रेम दूर ले जाने के लिए दोनों 12px वैल्यू बदलें, उलटी कोने के लिए साइन फ़्लिप करें, या ज़ोरदार बनाने के लिए टोकन var(--color-primary) से बदलें।
क्योंकि इस कार्ड पर न header band है न डिस्क्रिप्शन — लेबल छिपाने पर बटन के ऊपर सिर्फ़ प्लेसहोल्डर बचता, और सेक्शन यह नहीं बताता कि यह किस लिए है। इतना कॉम्पैक्ट फ़ॉर्म होने पर लेबल उसी चीज़ की हेडिंग भी है, इसलिए उसकी लाइन कमाई हुई है।
यह इस साइज़ पर consent checkbox की जगह reassurance है, इसलिए ईमानदार रहनी चाहिए — अगर लिस्ट welcome सीक्वेंस चलाती है या एड्रेस पार्टनर से शेयर करती है तो वह वाक्य अब गलत है और हटाने की बजाय rewrite चाहिए। जहाँ explicit opt-in कानूनी तौर पर ज़रूरी हो, Newsletter Signup With Proof लें, जिसमें checkbox है।
सिर्फ़ action। फ़ॉर्म email को native submit से /api/newsletter पर post करता है, बिना onSubmit हैंडलर और बिना client state, इसलिए ब्लॉक server component है जो कोई JavaScript नहीं शिप करता। action अपने route या server action पर पॉइंट करें; अगर navigation की बजाय inline success message चाहिए तो तभी फ़ाइल को use client और थोड़ी state की ज़रूरत पड़ती है।
हाँ — कार्ड max-w-md पर capped है और सेक्शन शेल के अंदर centered, इसलिए inner div को सेक्शन से निकालकर संकरे कॉलम में डालना बिना बदलाव काम करता है। एक बात रखें: ईमेल इनपुट पर id — उसी पर लेबल पॉइंट करता है, और एक पेज पर इस ब्लॉक की दो कॉपी के लिए दोनों लेबल valid रखने को अलग ids चाहिए।