Formlar için daha fazla düzen (1)
Hepsini görüntüle
https://neobrutalism.com/tr/blocks/forms/compact-newsletter-signup-form
Kompakt Bülten Kaydı
Formlar · Pro kaynağı
En küçük kullanışlı abone formu — etiketli bir e-posta alanı, bir düğme ve bir güvence satırı; sert kaymalı bir çerçevede oturur, böylece rastgele bir giriş yerine kasıtlı bir nesne olarak okunur. max-w-md ile sınırlıdır, bu yüzden bir yan çubuğa, bir altbilgi sütununa veya bir makalenin sonuna çevresini yeniden tasarlamadan sığar.
Formlar
Kompakt Bülten KaydıCanlı önizlemeyi aç
- Hero, fiyatlandırma ve auth
- Her duraklama noktasını önizle
- Kaynağı kopyala
- MCP kuruluma hazır
- Radix · Base UI · React Aria
- 158 hazır bloklar
- Gönderilen sayfa bölümleri
- Gösterge panelleri ve pazarlama
- Pro şifreyi açar
- Açılır düzenler
Sevilen bir topluluk:
geliştiriciler, tasarımcılar ve üreticiler
Bir UI kitine denk geldim ve hemen aldım. Yeni, aktif sürdürülüyor ve sürekli gelişiyor — harika bir iş! 🤘
Ziv Reich, Yazılım Geliştirici Sadece şunu söylemek istedim: neobrutalism.com harika olmuş. Gerçekten çok beğendim. Tasarımda berbatım, bu yüzden bu benim için müthiş oldu. Kişisel sitemde kullandım.
Paul Bratslavsky, Coding With Paul'ün yaratıcısı Sonunda kişisel web sitemi Neobrutalism.com ile yeniden yaptım — eğlenceli kütüphane, başlamak çok kolay!
Cameron Blackwood, İçerik Üreticisi Neobrutalism.com, retro tarzındaki en sevdiğim UI bileşen kütüphanelerinden biri — gerçekten ship edilebilen bileşenler.
Zhengyang Hou, Indie Hacker web için en sevdiğim ui kütüphanelerinden biri. harika iş — umarım çok daha ileri gider.
Taseen Tanvir, Kurucu ve Tasarımcı Neobrutalism.com Pro'yu denedim — her şeye benzemeyen bir UI kiti. Neobrütalist bloklar 🔥 tuhaf düzenleri prototiplemeyi çok hızlandırdı.
Nitesh Padghan, Ghostwriter Mükemmel denge ve akışa sahip harika bir landing page tasarımı. Renk paleti animasyonlarla birleşince olağanüstü bir kullanıcı deneyimi yaratıyor.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Sundukları tasarımdan gerçekten etkilendim. Nihai ürün tam olarak hayal ettiğimle örtüştü.
Desmond, Kurucu ortak @ VectorlabsVentures Bir ajans sahibi olarak müşteriler için landing page düzenlerini genelde haftalarca cilalarım. Neobrutalism.com ile bir şablon takıyorum, metni ayarlıyorum ve ship etmeye hazırım.
Duke Opoku Amankwah, Kurucu @ Midas Şablonlar yalnızca görsel olarak çarpıcı değil; aynı zamanda inanılmaz iyi yapılandırılmış. Bize haftalarca geliştirme süresi kazandırdı.
Abiola Braimah, Geliştirici @ Studio IX Üstün kalite ve detaylara özen. Responsive tasarım tüm cihazlarda sorunsuz çalışıyor.
Acromond X., Kurucu ortak @ VectorlabsVentures Bu şablonları iş akışımıza entegre etmek geliştirme döngümüzü ciddi şekilde kısalttı. Mükemmel iş.
Raquib S., Backend geliştirici Bu şablonlar başvurduğumuz ana kaynağımız oldu. Kod temiz, iyi belgelenmiş ve kolayca özelleştirilebilir.
Hallic M., Geliştirici @ AtlasLabs Neobrutalism.com şablonları estetik ile işlevsellik arasında mükemmel dengeyi kuruyor. Projelerimiz için gerçek bir dönüm noktası.
Ibrahim S., Frontend Lead @ ScaleUp Üstün destek ve premium kalitede şablonlar. Bu şablonların ROI’si fenomenal.
Kevin K., CEO @ WebCraft Neobrutalism.com şablonları yeni müşteri projelerine yaklaşımımızı tamamen değiştirdi. Kod kalitesi olağanüstü, tasarımlar gerçekten dünya standartlarında.
Danny G., DevStack kurucusu Birçok şablon kütüphanesi kullandım ama Neobrutalism.com performans optimizasyonu ve temiz kod mimarisine verdiği önemle öne çıkıyor.
Ian D., Wavelength CTO’su Bu şablonlardaki animasyonlar ve mikro etkileşimler gerçekten büyüleyici. Tasarım ekibimiz için en iyi yatırım.
Ben S., PixelPerfect Lead Designer Teknik olmayan bir kurucu olarak Neobrutalism.com şablonları, tasarım kalitesinden ödün vermeden MVP’mizi rekor sürede çıkarmamıza yardımcı oldu. Yatırımcılarımız çok etkilendi.
Matthew I., Startup kurucusu Bu bileşenlerin ne kadar modüler ve iyi belgelenmiş olduğunu takdir ediyorum. Farklı şablonlardan parçaları sorunsuzca birleştirebildik.
Garrett P., TechFusion Frontend Lead Neobrutalism.com şablonlarının ROI’si inanılmaz. Geliştirme süremizi ciddi şekilde kısaltırken müşterilere daha yüksek kaliteli siteler teslim ediyoruz.
Xavier C., Ajans sahibi
Sıkça sorulan
sorular
Bu Kompakt Bülten Kaydı bloğunun nasıl bir araya getirildiği, ne değiştirebileceğiniz ve burada diğer düzenler yerine ne zaman kullanması gerektiği.
Nereye gittiği yüzünden. Bu max-w-md'dir, başlık şeridi, onay kutusu ve avatar satırı yoktur; bu yüzden bir yan çubukta veya altbilgi sütununda sayfa genişliğinin üçte birinde hayatta kalır. Newsletter Signup With Proof, listenin ne gönderdiğini açıklamak ve başkalarının zaten okuduğunu göstermek için yer olan tam genişlik bir bant için bağımsız sürümdür.
Kartın kendisindeki tek bir sert gölgeyle: shadow-[12px_12px_0px_0px_var(--color-accent)]. Önceki sürüm bunu taklit etmek için kartın arkasında mutlak konumlandırılmış ikinci bir div yığıyordu; işaretlemeyi ikiye katlıyor ve hizadan kayabiliyordu. Çerçeveyi daha dışarı taşımak için iki 12px değerini değiştirin, karşı köşeye göndermek için işaretleri ters çevirin veya daha gürültülü yapmak için belirteci var(--color-primary) ile değiştirin.
Çünkü bu kartta başlık şeridi ve açıklama yoktur — etiket gizli olsaydı düğmenin üstündeki tek metin yer tutucu olurdu ve bölüm ne işe yaradığını hiç söylemezdi. Form bu kadar kompaktken etiket aynı zamanda şeyin başlığıdır, bu yüzden satırını hak eder.
Bu boyutta bir onay kutusunun yerini alan güvencedir, bu yüzden dürüst kalmalıdır — listeniz bir hoş geldin dizisi çalıştırıyorsa veya adresleri bir ortakla paylaşıyorsa o cümle artık yanlıştır ve silmek yerine yeniden yazılmalıdır. Açık onay yasal olarak zorunluysa, onay kutusuna sahip Newsletter Signup With Proof'u kullanın.
Yalnızca action'ı. Form e-postayı yerel bir gönderimle /api/newsletter'a iletir; onSubmit işleyicisi ve istemci durumu yoktur, bu yüzden blok JavaScript göndermeyen bir sunucu bileşenidir. Action'ı kendi rotanıza veya bir sunucu eylemine yönlendirin; gezinme yerine satır içi bir başarı iletisi istiyorsanız dosyanın use client ve bir parça duruma ihtiyacı olduğu andır.
Evet — kart max-w-md ile sınırlıdır ve bölüm kabuğu içinde ortalanmıştır, bu yüzden iç div'i bölümden çıkarıp daha dar bir sütuna almak değişmeden çalışır. Tutulması gereken tek şey e-posta girdisindeki id'dir: etiketin işaret ettiği budur ve aynı sayfadaki bu bloğun iki kopyası, her iki etiketin de geçerli kalması için farklı id'lere ihtiyaç duyar.