Lebih banyak tata letak Formulir (1)
Lihat semua
https://neobrutalism.com/id/blocks/forms/compact-newsletter-signup-form
Daftar Newsletter Ringkas
Formulir · Sumber Pro
Form berlangganan terkecil yang masih berguna — satu kolom email berlabel, satu tombol, dan sebaris kalimat penenang, di atas bingkai offset tegas supaya tetap terbaca sebagai objek yang disengaja, bukan input yang tercecer. Lebarnya dibatasi max-w-md, jadi ia masuk ke sidebar, kolom footer, atau akhir artikel tanpa perlu merombak apa pun di sekitarnya.
Formulir
Daftar Newsletter RingkasBuka pratinjau langsung
- Hero, harga & auth
- Lihat pratinjau setiap titik henti
- Salin sumbernya
- MCP siap dipasang
- Radix · Base UI · React Aria
- 158 blok siap pakai
- Bagian halaman yang disertakan
- Dasbor & pemasaran
- Pro membuka kode
- Tata letak fleksibel
Disukai oleh developer, desainer
& kreator
Saya menemukan UI kit ini dan langsung mengambilnya. Terkesan: masih baru, dirawat aktif, dan terus diperbaiki. Kerja luar biasa! 🤘
Ziv Reich, Software Developer Saya hanya ingin bilang: kerja yang bagus untuk neobrutalism.com. Benar-benar menyukainya. Saya payah soal desain, jadi ini sangat membantu. Saya memakainya di situs pribadi saya.
Paul Bratslavsky, Kreator Coding With Paul Akhirnya saya membangun ulang situs pribadi dengan Neobrutalism.com — pustaka yang seru, sangat mudah mulai!
Cameron Blackwood, Content creator Neobrutalism.com adalah salah satu pustaka komponen UI bergaya retro favorit saya — komponen yang benar-benar siap di-ship.
Zhengyang Hou, Indie hacker salah satu pustaka ui favorit saya untuk web. kerja yang keren — semoga proyeknya makin jauh melangkah.
Taseen Tanvir, Founder & desainer Baru mencoba Neobrutalism.com Pro — UI kit yang tidak mirip yang lain. Blok neobrutalismenya 🔥 bikin prototipe layout nyeleneh jauh lebih cepat.
Nitesh Padghan, Ghostwriter Desain landing page yang indah dengan keseimbangan dan alur yang pas. Palet warna digabung animasi menciptakan pengalaman pengguna yang luar biasa.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Saya sangat terkesan dengan desain yang mereka kirimkan. Produk akhir benar-benar sesuai dengan yang saya bayangkan.
Desmond, Co-founder @ VectorlabsVentures Sebagai pemilik agensi, biasanya saya butuh berminggu-minggu menyempurnakan layout landing untuk klien. Dengan Neobrutalism.com, saya pasang template, sesuaikan copy, dan siap ship.
Duke Opoku Amankwah, Founder @ Midas Template-nya tidak hanya memukau secara visual, tetapi juga terstruktur sangat rapi. Menghemat minggu-minggu waktu development.
Abiola Braimah, Developer @ Studio IX Kualitas luar biasa dan perhatian pada detail. Desain responsif berjalan mulus di semua perangkat.
Acromond X., Co-founder @ VectorlabsVentures Mengintegrasikan template ini ke alur kerja kami secara signifikan memangkas siklus development. Kerja yang bagus.
Raquib S., Backend Developer Template ini sudah jadi sumber andalan kami. Kodenya bersih, terdokumentasi dengan baik, dan mudah dikustomisasi.
Hallic M., Developer @ AtlasLabs Template Neobrutalism.com menyeimbangkan estetika dan fungsionalitas dengan sempurna. Benar-benar game-changer untuk proyek kami.
Ibrahim S., Frontend Lead @ ScaleUp Dukungan luar biasa dan template berkualitas premium. ROI template ini fenomenal.
Kevin K., CEO @ WebCraft Template Neobrutalism.com sepenuhnya mengubah cara kami menangani proyek klien baru. Kualitas kode luar biasa dan desainnya benar-benar world-class.
Danny G., Founder DevStack Saya sudah memakai banyak pustaka template, tetapi Neobrutalism.com menonjol karena perhatiannya pada optimasi performa dan arsitektur kode yang bersih.
Ian D., CTO di Wavelength Animasi dan micro-interaction di template ini benar-benar memukau. Investasi terbaik untuk tim desain kami.
Ben S., Lead Designer di PixelPerfect Sebagai founder non-teknis, template Neobrutalism.com membantu kami meluncurkan MVP dalam waktu rekor tanpa mengorbankan kualitas desain. Investor kami sangat terkesan.
Matthew I., Founder startup Saya menghargai betapa modular dan terdokumentasinya komponen ini. Kami bisa mencampur potongan dari template berbeda tanpa hambatan.
Garrett P., Frontend Lead di TechFusion ROI template Neobrutalism.com luar biasa. Kami memangkas waktu development secara dramatis sambil mengirim situs berkualitas lebih tinggi ke klien.
Xavier C., Pemilik agensi
Sering ditanya
pertanyaan
Bagaimana blok Daftar Newsletter Ringkas disusun, apa yang dapat Anda ubah, dan kapan menggunakannya sebagai pengganti tata letak lain di sini.
Karena tempat ia dipasang. Yang ini max-w-md tanpa pita header, tanpa kotak centang persetujuan, dan tanpa deretan avatar, jadi ia selamat di dalam sidebar atau kolom footer selebar sepertiga halaman. Daftar Newsletter dengan Bukti adalah versi berdiri sendiri untuk pita selebar penuh, tempat masih ada ruang untuk menjelaskan apa yang dikirim daftar itu dan menunjukkan bahwa orang lain sudah membacanya.
Dengan satu bayangan tegas pada kartunya sendiri: shadow-[12px_12px_0px_0px_var(--color-accent)]. Versi sebelumnya menumpuk div berposisi absolut kedua di belakang kartu untuk memalsukannya, yang menggandakan markup dan bisa melenceng dari kelurusannya. Ubah kedua nilai 12px untuk menggeser bingkainya lebih jauh, balik tandanya untuk mengirimnya ke sudut sebaliknya, atau ganti tokennya jadi var(--color-primary) supaya lebih lantang.
Karena kartu ini tidak punya pita header dan tidak punya deskripsi — dengan label disembunyikan, satu-satunya teks di atas tombol adalah placeholder, dan bagian ini jadi tidak memberi petunjuk apa pun tentang gunanya. Saat sebuah form seringkas ini, label sekaligus menjadi judul benda itu, jadi ia layak dapat barisnya sendiri.
Ia adalah penenang yang menggantikan kotak centang persetujuan pada ukuran sekecil ini, jadi ia harus tetap jujur — kalau daftar Anda menjalankan rangkaian email sambutan atau membagikan alamat ke mitra, kalimat itu jadi salah dan perlu ditulis ulang, bukan dihapus. Di tempat persetujuan eksplisit diwajibkan secara hukum, pakai Daftar Newsletter dengan Bukti yang sudah punya kotak centang itu.
Hanya action-nya. Form-nya mengirim email lewat submit native ke /api/newsletter tanpa handler onSubmit dan tanpa state klien, jadi bloknya adalah komponen server yang tidak mengirim JavaScript sama sekali. Arahkan action ke route Anda sendiri atau ke server action; kalau Anda ingin pesan sukses inline alih-alih navigasi, di situlah file-nya butuh use client dan sepotong state.
Bisa — kartunya dibatasi max-w-md dan diletakkan di tengah cangkang section, jadi mengangkat div bagian dalam keluar dari section ke kolom yang lebih sempit tetap berfungsi tanpa perubahan. Satu hal yang harus dipertahankan adalah id pada input email: itulah yang ditunjuk label-nya, dan dua salinan blok ini di halaman yang sama butuh id berbeda agar kedua labelnya tetap valid.