और फ़ॉर्म लेआउट (1)
सभी देखें
https://neobrutalism.com/hi/blocks/forms/newsletter-signup-form-with-social-proof
प्रूफ वाला न्यूज़लेटर साइनअप
फ़ॉर्म · Pro सोर्स
एक न्यूज़लेटर कार्ड जो उस दो सवालों का जवाब देता है जो लोग एड्रेस टाइप करने से पहले सच में पूछते हैं: इनबॉक्स में क्या आएगा, और पहले से कौन-कौन लेता है। एक भरा हेडर बैंड लिस्ट का नाम बताता है, एक रो में ईमेल फ़ील्ड और सब्सक्राइब बटन हैं, एक स्पष्ट सहमति चेकबॉक्स प्राइवेसी पॉलिसी से लिंक है, और सब्सक्राइबर अवतारों का एक स्टैक एक नियम के नीचे चलते काउंट के साथ बैठता है।
फ़ॉर्म
प्रूफ वाला न्यूज़लेटर साइनअपलाइव प्रीव्यू खोलें
- 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
अक्सर पूछे
जाने वाले सवाल
प्रूफ वाला न्यूज़लेटर साइनअप ब्लॉक को कैसे बनाया जाता है, आप क्या बदल सकते हैं, और इसे यहाँ अन्य लेआउट की जगह कब इस्तेमाल करें।
इसे तब इस्तेमाल करें जब साइनअप ही सेक्शन का मक़सद हो — इसमें हेडर बैंड, लिस्ट असल में क्या भेजती है उसकी डिस्क्रिप्शन, सहमति चेकबॉक्स और सोशल प्रूफ की जगह है, इसलिए यह लैंडिंग पेज पर स्टैंडअलोन बैंड की तरह काम करता है। Compact Newsletter Signup वही काम है जो लेबल, फ़ील्ड और बटन तक छँटा हुआ है — साइडबार, फ़ुटर कॉलम या आर्टिकल के आख़िर के लिए, जहाँ पूरा कार्ड बगल के कंटेंट पर चिल्लाएगा।
क्योंकि यहाँ कुछ भी स्टेट नहीं रखता। फ़ॉर्म /api/newsletter पर नेटिव सबमिट से पोस्ट करता है, कोई JavaScript हैंडलर नहीं, इसलिए यह सर्वर कंपोनेंट बना रहता है और कोई क्लाइंट बंडल नहीं भेजता। सक्सेस मैसेज या ऑप्टिमिस्टिक स्टेट जोड़ते ही use client चाहिए — और तब तक फ़ॉर्म JavaScript बंद होने पर भी काम करता रहता है।
असली लेबल है, बस sr-only है। प्लेसहोल्डर लेबल नहीं है: टाइप करते ही गायब हो जाता है, भरोसे से अनाउंस नहीं होता, और ठीक उसी पल फ़ेल हो जाता है जब फ़ील्ड भरी जा रही हो। लेबल मार्कअप में रखकर विज़ुअली छिपाने से डिज़ाइन को वही मिलता है जो वह चाहता है, बिना स्क्रीन रीडर इस्तेमाल करने वाले से नाम छीने।
क्योंकि निहित सहमति GDPR-स्टाइल नियमों में सहमति नहीं है, और पहले से टिक किया बॉक्स भी स्पष्ट रूप से नहीं — इसलिए यह अनटिक से शुरू होता है, required मार्क नहीं है, और सहमति तभी पोस्ट होती है जब सच में चेक हो। प्राइवेसी पॉलिसी लिंक लेबल टेक्स्ट के अंदर बैठता है, जहाँ वह उस स्टेटमेंट का हिस्सा पढ़ा जाता है जिस पर सहमति दी जा रही है।
क्योंकि वे कोई ऐसी जानकारी नहीं ले जाते जो बगल का वाक्य पहले से न ले जाए। स्टैक Join 2,000+ subscribers का विज़ुअल दोहराव है, इसलिए aria-hidden है और हर इमेज पर खाली alt — तीन अनाम चेहरों का वर्णन तीन अनाउंसमेंट जोड़ता और कोई अर्थ नहीं। अगर इन्हें नाम वाले कस्टमर से बदलें, तो हर एक को असली alt दें और aria-hidden हटा दें।
sm ब्रेकपॉइंट तक flex-col है और उसके बाद flex-row, इसलिए संकरी स्क्रीन पर बटन फ़ील्ड के नीचे फ़ुल-विड्थ बैठता है, बगल में 90px के ठूँठ तक नहीं सिमटता। चौड़ी स्क्रीन पर बटन एक फ़िक्स्ड basis भी रखता है ताकि Abonnieren जैसे लंबे लोकलाइज़्ड लेबल इनपुट से चौड़ाई न छीन लें।