Thêm bố cục Biểu mẫu (1)
Xem tất cả
https://neobrutalism.com/vi/blocks/forms/newsletter-signup-form-with-social-proof
Đăng ký newsletter kèm bằng chứng
Biểu mẫu · Nguồn Pro
Một thẻ newsletter trả lời hai câu hỏi mọi người thực sự có trước khi gõ địa chỉ: hộp thư sẽ nhận được gì, và còn ai khác đã nhận rồi. Một dải tiêu đề tô màu đặt tên danh sách, một hàng chứa ô email và nút đăng ký, một hộp đồng ý rõ ràng liên kết chính sách quyền riêng tư, và một chồng avatar người đăng ký nằm dưới một đường kẻ kèm bộ đếm đang chạy.
Biểu mẫu
Đăng ký newsletter kèm bằng chứngMở xem trước trực tiếp
- Hero, bảng giá & auth
- Xem trước mọi điểm dừng
- Sao chép mã nguồn
- MCP đã sẵn sàng cài đặt
- Radix · Base UI · React Aria
- 158 khối đúc sẵn
- Các phần trang được cung cấp
- Bảng điều khiển & tiếp thị
- Pro mở khóa mã
- Bố cục linh hoạt
Được yêu thích bởi nhà phát triển, nhà thiết kế
& người sáng tạo
Tình cờ thấy bộ UI kit và lấy về dùng ngay. Còn mới, duy trì tích cực và liên tục cải tiến — làm quá tuyệt! 🤘
Ziv Reich, Nhà phát triển phần mềm Chỉ muốn nói là bạn làm neobrutalism.com tuyệt lắm. Mình thích thật sự. Mình dở tệ khoản thiết kế nên cái này đúng là cứu tinh. Đã dùng cho trang cá nhân của mình.
Paul Bratslavsky, Nhà sáng tạo Coding With Paul Cuối cùng cũng dựng lại xong trang cá nhân với Neobrutalism.com — thư viện thú vị, rất dễ bắt đầu!
Cameron Blackwood, Nhà sáng tạo nội dung Neobrutalism.com là một trong những thư viện thành phần UI phong cách retro mình thích nhất — component ship được thật.
Zhengyang Hou, Indie hacker một trong những thư viện ui mình thích nhất cho web. làm tốt lắm — mong dự án tiến xa hơn nữa.
Taseen Tanvir, Nhà sáng lập & nhà thiết kế Vừa thử Neobrutalism.com Pro — UI kit không giống mọi thứ khác. Các khối neo-brutalist 🔥 giúp dựng layout kỳ quặc nhanh hơn hẳn.
Nitesh Padghan, Ghostwriter Thiết kế landing page đẹp, cân bằng và nhịp chảy hoàn hảo. Bảng màu kết hợp animation tạo trải nghiệm người dùng xuất sắc.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Tôi thực sự ấn tượng với thiết kế họ giao. Sản phẩm cuối khớp đúng với những gì tôi hình dung.
Desmond, Đồng sáng lập @ VectorlabsVentures Là chủ agency, tôi thường mất cả tuần hoàn thiện layout landing cho khách. Với Neobrutalism.com, tôi gắn template, chỉnh copy là sẵn sàng ship.
Duke Opoku Amankwah, Nhà sáng lập @ Midas Template không chỉ đẹp mắt mà còn cấu trúc cực tốt. Tiết kiệm cho chúng tôi cả tuần phát triển.
Abiola Braimah, Developer @ Studio IX Chất lượng vượt trội và chú ý đến chi tiết. Thiết kế responsive hoạt động mượt trên mọi thiết bị.
Acromond X., Đồng sáng lập @ VectorlabsVentures Tích hợp các template này vào quy trình đã rút ngắn đáng kể chu kỳ phát triển. Làm việc xuất sắc.
Raquib S., Backend Developer Những template này đã trở thành nguồn tham chiếu của chúng tôi. Code sạch, tài liệu tốt và dễ tùy biến.
Hallic M., Developer @ AtlasLabs Template Neobrutalism.com cân bằng hoàn hảo giữa thẩm mỹ và chức năng. Thật sự thay đổi cách làm dự án của chúng tôi.
Ibrahim S., Frontend Lead @ ScaleUp Hỗ trợ xuất sắc và template chất lượng premium. ROI của các template này thật ấn tượng.
Kevin K., CEO @ WebCraft Template Neobrutalism.com đã hoàn toàn thay đổi cách chúng tôi tiếp cận dự án khách. Chất lượng code xuất sắc và thiết kế đẳng cấp.
Danny G., Nhà sáng lập DevStack Tôi đã dùng nhiều thư viện template, nhưng Neobrutalism.com nổi bật nhờ tối ưu hiệu năng và kiến trúc code sạch.
Ian D., CTO tại Wavelength Animation và micro-interaction trong các template này thật sự ấn tượng. Khoản đầu tư tốt nhất cho team thiết kế.
Ben S., Lead Designer tại PixelPerfect Là founder không technical, template Neobrutalism.com giúp chúng tôi launch MVP kỷ lục mà không hy sinh chất lượng thiết kế. Nhà đầu tư rất ấn tượng.
Matthew I., Nhà sáng lập startup Tôi thích cách các component này modular và được tài liệu hóa tốt. Chúng tôi trộn ghép mảnh từ nhiều template rất mượt.
Garrett P., Frontend Lead tại TechFusion ROI của template Neobrutalism.com thật sự lớn. Chúng tôi giảm mạnh thời gian phát triển mà vẫn giao site chất lượng hơn cho khách.
Xavier C., Chủ agency
Câu hỏi thường
gặp
Cách xây dựng khối Đăng ký newsletter kèm bằng chứng, những gì bạn có thể thay đổi, và khi nào nên sử dụng thay cho các bố cục khác ở đây.
Dùng mục này khi chính việc đăng ký là trọng tâm của section — nó có chỗ cho dải tiêu đề, mô tả danh sách thực sự gửi gì, hộp đồng ý và bằng chứng xã hội, nên hoạt động như một dải độc lập trên landing page. Compact Newsletter Signup làm cùng một việc nhưng chỉ còn nhãn, ô nhập và nút cho sidebar, cột chân trang hoặc cuối bài viết, nơi một thẻ đầy đủ sẽ át nội dung xung quanh.
Vì không có gì ở đây giữ state. Form gửi native submit tới /api/newsletter mà không có handler JavaScript, nên nó vẫn là server component và không ship client bundle nào. Thêm thông báo thành công hoặc optimistic state là lúc bạn cần use client — và trước đó form vẫn hoạt động cả khi JavaScript bị tắt.
Có nhãn thật, chỉ là sr-only. Placeholder không phải nhãn: nó biến mất ngay khi gõ, không được thông báo đáng tin cậy, và thất bại đúng lúc ô đang được điền. Giữ nhãn trong markup và ẩn về mặt thị giác cho thiết kế những gì nó muốn mà không lấy mất tên khỏi ai dùng trình đọc màn hình.
Vì đồng ý ngầm không phải đồng ý theo quy tắc kiểu GDPR, và hộp được tích sẵn cũng không — nên cái này bắt đầu chưa tích, không đánh required, và chỉ gửi consent khi thực sự được chọn. Liên kết chính sách quyền riêng tư nằm trong văn bản nhãn, được đọc như một phần của tuyên bố đang đồng ý.
Vì chúng không mang thông tin nào ngoài câu bên cạnh. Chồng ảnh chỉ là cách trình bày lại trực quan của Join 2,000+ subscribers, nên được đánh aria-hidden với alt rỗng trên mỗi ảnh — mô tả ba khuôn mặt ẩn danh sẽ thêm ba lần thông báo mà không thêm nghĩa. Nếu thay bằng khách hàng có tên, hãy cho mỗi ảnh một alt thật và bỏ aria-hidden.
Nó là flex-col đến breakpoint sm rồi flex-row sau đó, nên trên màn hẹp nút nằm dưới ô ở full width thay vì bị ép thành mẩu 90px bên cạnh. Nút cũng giữ basis cố định trên màn rộng để nhãn đã bản địa hóa dài như Abonnieren không cướp chiều rộng của input.