Ще Форми макетів (1)
Показати все
https://neobrutalism.com/uk/blocks/forms/compact-newsletter-signup-form
Компактна форма підписки
Форми · Вихідник Pro
Найменша корисна форма підписки — підписане поле email, одна кнопка й рядок із запевненням, що лежать на жорсткій зміщеній рамці, тож форма все одно читається як свідомий об'єкт, а не як загублене поле. Ширину обмежено до max-w-md, тож вона стає в сайдбар, колонку футера чи кінець статті, не вимагаючи переробляти нічого навколо.
Форми
Компактна форма підпискиВідкрити живий прев'ю
- 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, Співзасновник @ VectorlabsVentures Як власник агенції я зазвичай витрачаю тижні на доведення макетів лендингів для клієнтів. З Neobrutalism.com я підключаю шаблон, правля copy — і готовий до релізу.
Duke Opoku Amankwah, Засновник @ Midas Шаблони не лише візуально сильні, а й надзвичайно добре структуровані. Заощадили нам тижні розробки.
Abiola Braimah, Розробник @ Studio IX Виняткова якість і увага до деталей. Адаптивний дизайн бездоганно працює на всіх пристроях.
Acromond X., Співзасновник @ VectorlabsVentures Інтеграція цих шаблонів у наш workflow помітно скоротила цикл розробки. Відмінна робота.
Raquib S., Backend-розробник Ці шаблони стали нашим основним ресурсом. Код чистий, добре задокументований і легко кастомізується.
Hallic M., Розробник @ AtlasLabs Шаблони Neobrutalism.com знаходять ідеальний баланс між естетикою та функціональністю. Справжній game-changer для наших проєктів.
Ibrahim S., Frontend Lead @ ScaleUp Відмінна підтримка і шаблони преміум-якості. ROI цих шаблонів феноменальний.
Kevin K., CEO @ WebCraft Шаблони Neobrutalism.com повністю змінили наш підхід до клієнтських проєктів. Якість коду виняткова, а дизайни — справді world-class.
Danny G., Засновник DevStack Я користувався багатьма бібліотеками шаблонів, але Neobrutalism.com вирізняється увагою до оптимізації продуктивності й чистої архітектури коду.
Ian D., CTO у Wavelength Анімації та мікроінтеракції в цих шаблонах абсолютно приголомшливі. Найкраща інвестиція для нашої design-команди.
Ben S., Lead Designer у PixelPerfect Як нетехнічний засновник, шаблони Neobrutalism.com допомогли нам запустити MVP в рекордні терміни без компромісів щодо якості дизайну. Наші інвестори були в захваті.
Matthew I., Засновник стартапу Мені подобається, наскільки модульні й добре задокументовані ці компоненти. Ми без тертя змішуємо частини з різних шаблонів.
Garrett P., Frontend Lead у TechFusion ROI шаблонів Neobrutalism.com неймовірний. Ми різко скоротили час розробки й при цьому віддаємо клієнтам сайти вищої якості.
Xavier C., Власник агенції
Часто задавані
запитання
Як зібрано блок Компактна форма підписки, що ви можете змінити й коли його використовувати замість інших макетів.
Через місце, куди вона стає. Тут max-w-md без заголовної смуги, без чекбокса згоди й без ряду аватарів, тож форма виживає в сайдбарі чи колонці футера на третину ширини сторінки. Підписка із соціальним доказом — самостійна версія для смуги на всю ширину, де є місце пояснити, що саме надсилає розсилка, і показати, що її вже читають інші.
Однією жорсткою тінню на самій картці: shadow-[12px_12px_0px_0px_var(--color-accent)]. Попередня версія підкладала за картку другий абсолютно спозиційований div, щоб це імітувати, — розмітка подвоювалася, а блок міг з'їхати з вирівнювання. Змініть два значення 12px, щоб відсунути рамку далі, поміняйте їхні знаки, щоб перекинути її в протилежний кут, або замініть токен на var(--color-primary), щоб зробити гучніше.
Бо в цієї картки немає ні заголовної смуги, ні опису: якщо приховати підпис, єдиним текстом над кнопкою лишиться плейсхолдер, і секція не дасть жодної підказки, для чого вона. Коли форма настільки компактна, підпис водночас є заголовком усього об'єкта, тож він недаремно займає свій рядок.
Це запевнення, яке за такого розміру заміняє чекбокс згоди, тож воно має лишатися чесним: якщо ваша розсилка запускає вітальну серію листів або передає адреси партнеру, це речення вже неправдиве, і його треба переписати, а не видалити. Там, де явна згода вимагається законом, беріть натомість Підписку із соціальним доказом — у ній є чекбокс.
Лише action. Форма відправляє email нативним сабмітом на /api/newsletter, без обробника onSubmit і без клієнтського стану, тож блок лишається серверним компонентом і не постачає жодного JavaScript. Спрямуйте action на власний роут або server action; а якщо замість переходу хочете вбудоване повідомлення про успіх — саме тоді файлу знадобиться use client і трохи стану.
Так — картку обмежено до max-w-md і відцентровано всередині оболонки секції, тож винести внутрішній div із секції у вужчу колонку можна без правок. Єдине, що варто зберегти, — id на полі email: саме на нього вказує підпис, і дві копії блока на одній сторінці потребуватимуть різних id, щоб обидва підписи лишалися коректними.