Mais layouts de Formulários (1)
Ver todos
https://neobrutalism.com/pt/blocks/forms/compact-newsletter-signup-form
Cadastro compacto de newsletter
Formulários · Código-fonte Pro
O menor formulário de assinatura realmente útil — um campo de e-mail rotulado, um botão e uma linha de garantia, apoiados sobre uma moldura de sombra deslocada para que ainda pareça um objeto pensado, e não um campo perdido. Tem largura máxima de max-w-md, então cabe em uma sidebar, uma coluna de rodapé ou o fim de um artigo sem redesenhar nada ao redor.
Formulários
Cadastro compacto de newsletterAbrir visualização ao vivo
- Hero, preços e auth
- Visualizar todos os pontos de interrupção
- Copie o código-fonte
- MCP pronto para instalação
- Radix · Base UI · React Aria
- 158 blocos pré-fabricados
- Seções da página que são enviadas
- Painéis e marketing
- Pro desbloqueia o código
- Layouts de encaixe
Amado por devs, designers
e criadores
Encontrei o seu kit de UI e peguei na hora. Impressionante ver que é novo, ativo e melhorando sem parar. Trabalho incrível! 🤘
Ziv Reich, Desenvolvedor de software Só queria dizer que você mandou muito bem no neobrutalism.com. Amei de verdade. Sou péssimo em design, então isso me salvou. Usei no meu site pessoal.
Paul Bratslavsky, Criador do Coding With Paul Finalmente refiz o meu site pessoal com a Neobrutalism.com — biblioteca divertida e fácil de começar!
Cameron Blackwood, Criador de conteúdo A Neobrutalism.com é uma das minhas bibliotecas de componentes UI retrô favoritas — componentes que realmente shipam.
Zhengyang Hou, Indie hacker uma das minhas bibliotecas de ui favoritas para a web. mandou muito bem — espero que vá longe.
Taseen Tanvir, Fundador e designer Acabei de testar o Neobrutalism.com Pro — um kit de UI que não é a cara de todos os outros. Os blocos neobrutalistas 🔥 deixaram prototipar layouts estranhos bem mais rápido.
Nitesh Padghan, Ghostwriter Design de landing page lindo, com equilíbrio e fluxo perfeitos. A paleta de cores combinada com as animações cria uma experiência de usuário excepcional.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Fiquei muito impressionado com o design que eles entregaram. O produto final bateu exatamente com o que eu tinha imaginado.
Desmond, Cofundador @ VectorlabsVentures Como dono de agência, eu costumava gastar semanas refinando layouts de landing para clientes. Com o Neobrutalism.com, eu plugo um template, ajusto o texto e já estou pronto para publicar.
Duke Opoku Amankwah, Fundador @ Midas Os templates não são só visualmente incríveis: também são muito bem estruturados. Economizaram semanas de desenvolvimento.
Abiola Braimah, Desenvolvedor @ Studio IX Qualidade excepcional e atenção aos detalhes. O design responsivo funciona perfeitamente em todos os dispositivos.
Acromond X., Cofundador @ VectorlabsVentures Integrar esses templates no nosso fluxo reduziu bastante nosso ciclo de desenvolvimento. Excelente trabalho.
Raquib S., Desenvolvedor backend Esses templates viraram nosso recurso principal. O código é limpo, bem documentado e fácil de personalizar.
Hallic M., Desenvolvedor @ AtlasLabs Os templates do Neobrutalism.com acertam o equilíbrio perfeito entre estética e funcionalidade. Um verdadeiro divisor de águas para nossos projetos.
Ibrahim S., Frontend Lead @ ScaleUp Suporte excepcional e templates de qualidade premium. O ROI desses templates é fenomenal.
Kevin K., CEO @ WebCraft Os templates do Neobrutalism.com transformaram completamente como encaramos novos projetos de clientes. A qualidade do código é excepcional e os designs são de primeiro nível.
Danny G., Fundador da DevStack Já usei muitas bibliotecas de templates, mas o Neobrutalism.com se destaca pela atenção à otimização de performance e a uma arquitetura de código limpa.
Ian D., CTO na Wavelength As animações e microinterações desses templates são absolutamente impressionantes. Melhor investimento para nossa equipe de design.
Ben S., Lead Designer na PixelPerfect Como fundador não técnico, os templates do Neobrutalism.com nos ajudaram a lançar o MVP em tempo recorde sem abrir mão da qualidade do design. Nossos investidores ficaram impressionados.
Matthew I., Fundador de startup Gosto de quão modulares e bem documentados esses componentes são. Conseguimos misturar peças de templates diferentes sem atrito.
Garrett P., Frontend Lead na TechFusion O ROI dos templates do Neobrutalism.com é incrível. Reduzimos drasticamente o tempo de desenvolvimento e entregamos sites de mais qualidade aos clientes.
Xavier C., Dono de agência
Perguntas
frequentes
Como o bloco Cadastro compacto de newsletter é montado, o que você pode alterar e quando usá-lo em vez dos outros layouts aqui.
Por causa de onde ele fica. Este é max-w-md, sem faixa de cabeçalho, sem checkbox de consentimento e sem fileira de avatares, então funciona dentro de uma sidebar ou de uma coluna de rodapé com um terço da largura da página. O Newsletter com prova social é a versão independente para uma faixa de largura total, onde há espaço para explicar o que a lista envia e mostrar que outras pessoas já a leem.
Com uma única sombra dura no próprio card: shadow-[12px_12px_0px_0px_var(--color-accent)]. A versão anterior empilhava uma segunda div posicionada de forma absoluta atrás do card para simular o efeito, o que dobrava a marcação e podia perder o alinhamento. Altere os dois valores de 12px para afastar mais a moldura, inverta os sinais para enviá-la ao canto oposto, ou troque o token por var(--color-primary) para deixá-la mais chamativa.
Porque este card não tem faixa de cabeçalho nem descrição — com o rótulo oculto, o único texto acima do botão seria o placeholder, e a seção não daria nenhuma pista sobre sua finalidade. Quando um formulário é tão compacto, o rótulo também funciona como o título do elemento, então ele merece sua linha.
É a garantia que substitui um checkbox de consentimento nesse tamanho, então precisa continuar honesta — se sua lista roda uma sequência de boas-vindas ou compartilha endereços com um parceiro, essa frase passa a estar errada e precisa ser reescrita, não apagada. Onde o opt-in explícito é exigido por lei, use o Newsletter com prova social, que tem o checkbox.
Só a action. O formulário envia o e-mail como um submit nativo para /api/newsletter, sem handler onSubmit e sem estado no cliente, então o bloco é um componente de servidor que não envia nenhum JavaScript. Aponte a action para sua própria rota ou uma server action; se você quiser uma mensagem de sucesso inline em vez de uma navegação, é aí que o arquivo precisa de use client e de um estado.
Sim — o card tem largura máxima de max-w-md e é centralizado dentro do invólucro da seção, então tirar a div interna da seção e colocá-la em uma coluna mais estreita funciona sem mudanças. A única coisa a manter é o id no campo de e-mail: é a ele que o rótulo aponta, e duas cópias deste bloco na mesma página precisariam de ids diferentes para que os dois rótulos continuem válidos.