Más diseños de Formularios (1)
Ver todo
https://neobrutalism.com/es/blocks/forms/compact-newsletter-signup-form
Newsletter compacto
Formularios · Código fuente Pro
El formulario de suscripción útil más pequeño posible: un campo de email etiquetado, un botón y una línea que genera confianza, todo sobre un marco con sombra desplazada para que se lea como un objeto deliberado y no como un input suelto. Tiene un ancho máximo de max-w-md, así que encaja en un sidebar, una columna de footer o el final de un artículo sin rediseñar nada a su alrededor.
Formularios
Newsletter compactoAbrir vista previa en directo
- Hero, precios y auth
- Previsualizar cada punto de interrupción
- Copia el código fuente
- MCP listo para instalar
- Radix · Base UI · React Aria
- 158 bloques prefabricados
- Secciones de la página que se envían
- Cuadros de mando y marketing
- Pro desbloquea el código
- Diseños de inserción directa
Adorado por devs, diseñadores
y creadores
Me topé con tu kit de UI y me lo llevé enseguida. Me impresionó ver que es nuevo, se mantiene activo y mejora sin parar. ¡Gran trabajo! 🤘
Ziv Reich, Desarrollador de software Solo quería decir que hiciste un gran trabajo con neobrutalism.com. Me encanta de verdad. Soy un desastre con el diseño, así que esto me vino de maravilla. Lo usé en mi web personal.
Paul Bratslavsky, Creador de Coding With Paul Por fin rehíce mi web personal con Neobrutalism.com — biblioteca divertida y muy fácil de empezar.
Cameron Blackwood, Creador de contenido Neobrutalism.com es una de mis bibliotecas de componentes UI retro favoritas — componentes que de verdad se pueden shippear.
Zhengyang Hou, Indie hacker una de mis bibliotecas de ui favoritas para la web. gran trabajo — espero que llegue muy lejos.
Taseen Tanvir, Fundador y diseñador Acabo de probar Neobrutalism.com Pro — un kit de UI que no se parece a todo lo demás. Los bloques neobrutalistas 🔥 hicieron más rápido prototipar diseños raros y divertidos.
Nitesh Padghan, Redactor fantasma Un diseño de landing page precioso, con un equilibrio y un flujo perfectos. La paleta de color junto con las animaciones crea una experiencia de usuario excepcional.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Estoy muy impresionado con el diseño que entregaron. El producto final coincidió exactamente con lo que había imaginado.
Desmond, Cofundador @ VectorlabsVentures Como dueño de agencia, solía pasar semanas perfeccionando layouts de landing para clientes. Con Neobrutalism.com, meto una plantilla, ajusto el copy y ya estoy listo para publicar.
Duke Opoku Amankwah, Fundador @ Midas Las plantillas no solo son visualmente impactantes: también están increíblemente bien estructuradas. Nos ahorraron semanas de desarrollo.
Abiola Braimah, Desarrollador @ Studio IX Calidad sobresaliente y atención al detalle. El diseño responsive funciona a la perfección en todos los dispositivos.
Acromond X., Cofundador @ VectorlabsVentures Integrar estas plantillas en nuestro flujo ha reducido mucho nuestro ciclo de desarrollo. Excelente trabajo.
Raquib S., Desarrollador backend Estas plantillas se han convertido en nuestro recurso de referencia. El código es limpio, está bien documentado y es fácil de personalizar.
Hallic M., Desarrollador @ AtlasLabs Las plantillas de Neobrutalism.com logran el equilibrio perfecto entre estética y funcionalidad. Un verdadero cambio de juego para nuestros proyectos.
Ibrahim S., Frontend Lead @ ScaleUp Soporte excepcional y plantillas de calidad premium. El ROI de estas plantillas es fenomenal.
Kevin K., CEO @ WebCraft Las plantillas de Neobrutalism.com han transformado por completo cómo abordamos los proyectos de clientes. La calidad del código es excepcional y los diseños son de primer nivel.
Danny G., Fundador de DevStack He usado muchas bibliotecas de plantillas, pero Neobrutalism.com destaca por su atención a la optimización del rendimiento y a una arquitectura de código limpia.
Ian D., CTO en Wavelength Las animaciones y microinteracciones de estas plantillas son absolutamente impresionantes. La mejor inversión para nuestro equipo de diseño.
Ben S., Lead Designer en PixelPerfect Como fundador no técnico, las plantillas de Neobrutalism.com nos ayudaron a lanzar el MVP en tiempo récord sin renunciar a la calidad del diseño. Nuestros inversores se quedaron impactados.
Matthew I., Fundador de startup Aprecio lo modulares y bien documentados que son estos componentes. Hemos podido combinar piezas de distintas plantillas sin fricción.
Garrett P., Frontend Lead en TechFusion El ROI de las plantillas de Neobrutalism.com es increíble. Hemos reducido drásticamente el tiempo de desarrollo y entregamos sitios de más calidad a nuestros clientes.
Xavier C., Dueño de agencia
Preguntas
frecuentes
Cómo se construye el bloque Newsletter compacto, qué puedes cambiar y cuándo usarlo en lugar de los otros diseños aquí.
Por dónde va. Este tiene max-w-md, sin banda de encabezado, sin checkbox de consentimiento y sin fila de avatares, así que sobrevive dentro de un sidebar o una columna de footer a un tercio del ancho de la página. Newsletter con prueba social es la versión independiente para una banda de ancho completo, donde hay espacio para explicar qué envía la lista y mostrar que otras personas ya la leen.
Con una sola sombra dura en la propia tarjeta: shadow-[12px_12px_0px_0px_var(--color-accent)]. La versión anterior apilaba un segundo div posicionado en absoluto detrás de la tarjeta para simularlo, lo que duplicaba el markup y podía desalinearse. Cambia los dos valores de 12px para alejar más el marco, invierte sus signos para enviarlo a la esquina opuesta, o cambia el token por var(--color-primary) para que resalte más.
Porque esta tarjeta no tiene banda de encabezado ni descripción: con la etiqueta oculta, el único texto sobre el botón sería el placeholder, y la sección no daría ninguna pista de para qué sirve. Cuando un formulario es tan compacto, la etiqueta también hace de título del elemento, así que se gana su línea.
Es la garantía que reemplaza a un checkbox de consentimiento a este tamaño, así que debe mantenerse honesta: si tu lista tiene una secuencia de bienvenida o comparte direcciones con un partner, esa frase ya no es cierta y hay que reescribirla en vez de borrarla. Cuando se requiere legalmente un opt-in explícito, usa Newsletter con prueba social en su lugar, que sí tiene el checkbox.
Solo la action. El formulario envía email como un submit nativo a /api/newsletter, sin manejador onSubmit ni estado en el cliente, así que el bloque es un server component que no envía JavaScript. Apunta la action a tu propia ruta o a una server action; si quieres un mensaje de éxito en línea en vez de una navegación, ese es el momento en que el archivo necesita use client y un estado.
Sí: la tarjeta tiene un ancho máximo de max-w-md y está centrada dentro del shell de la sección, así que sacar el div interno de la sección y llevarlo a una columna más estrecha funciona sin cambios. Lo único que hay que conservar es el id del input de email: es lo que apunta la etiqueta, y dos copias de este bloque en la misma página necesitarían ids distintos para que ambas etiquetas sigan siendo válidas.