Ещё Формы макетов (1)
Показать все
https://neobrutalism.com/ru/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 нативным submit на /api/newsletter без обработчика onSubmit и без клиентского состояния, поэтому это серверный компонент, который не отдаёт ни строчки JavaScript. Укажите в action свой маршрут или серверный экшен; а вот если вместо перехода нужно инлайн-сообщение об успехе, тогда файлу понадобится use client и немного состояния.
Да — карточка ограничена по ширине max-w-md и центрирована внутри обёртки секции, поэтому достаточно вынести внутренний div из секции в более узкую колонку — без изменений. Единственное, что важно сохранить, — id у поля email: именно на него указывает подпись, и если на странице окажется две копии этого блока, id обеих подписей нужно сделать разными, чтобы они оставались валидными.