Mais layouts de Formulários (1)
Ver todos
https://neobrutalism.com/pt/blocks/forms/newsletter-signup-form-with-social-proof
Newsletter com prova social
Formulários · Código-fonte Pro
Um card de newsletter que responde às duas perguntas que as pessoas realmente têm antes de digitar um endereço: o que chega na caixa de entrada e quem mais já recebe. Uma faixa de cabeçalho preenchida nomeia a lista, uma linha reúne o campo de e-mail e o botão de assinatura, um checkbox de consentimento explícito linka a política de privacidade, e uma pilha de avatares de assinantes fica abaixo de uma linha divisória com a contagem em tempo real.
Formulários
Newsletter com prova socialAbrir 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 Newsletter com prova social é montado, o que você pode alterar e quando usá-lo em vez dos outros layouts aqui.
Use este quando o cadastro é o foco da seção — ele tem espaço para a faixa de cabeçalho, uma descrição do que a lista realmente envia, um checkbox de consentimento e prova social, então funciona como uma faixa independente em uma landing page. O Cadastro compacto de newsletter faz o mesmo trabalho reduzido a um rótulo, um campo e um botão para uma sidebar, uma coluna de rodapé ou o fim de um artigo, onde um card completo gritaria mais alto que o conteúdo ao lado.
Porque nada aqui mantém estado. O formulário envia para /api/newsletter com um submit nativo e nenhum handler de JavaScript, então continua sendo um componente de servidor e não envia nenhum bundle para o cliente. Adicionar uma mensagem de sucesso ou um estado otimista é o momento em que você precisa de use client — e, até lá, o formulário também continua funcionando com JavaScript desativado.
Existe um rótulo de verdade, ele só é sr-only. Um placeholder não é um rótulo: ele desaparece assim que alguém começa a digitar, não é anunciado de forma confiável, e falha exatamente no momento em que o campo está sendo preenchido. Manter o rótulo na marcação e escondê-lo visualmente dá ao design o que ele quer sem tirar o nome do campo de quem usa um leitor de tela.
Porque consentimento implícito não é consentimento sob regras no estilo GDPR, e uma caixa pré-marcada também não é — então esta começa desmarcada, não é definida como obrigatória, e só é enviada como consentimento quando é de fato marcada. O link da política de privacidade fica dentro do texto do rótulo, onde é lido como parte da declaração que está sendo aceita.
Porque não carregam nenhuma informação que a frase ao lado já não carregue. A pilha é uma reafirmação visual de Junte-se a mais de 2.000 assinantes, então é marcada como aria-hidden com alt vazio em cada imagem — descrever três rostos anônimos adicionaria três anúncios e nenhum significado. Se você trocá-los por clientes nomeados, dê a cada um um alt de verdade e remova o aria-hidden.
É flex-col até o breakpoint sm e flex-row a partir dele, então em uma tela estreita o botão fica abaixo do campo em largura total, em vez de ser espremido em um coto de 90px ao lado. O botão também mantém uma base fixa em telas largas, para que um rótulo localizado longo, como Abonnieren, não roube largura do campo.