Plus de dispositions Formulaires (1)
Voir tout
https://neobrutalism.com/fr/blocks/forms/newsletter-signup-form-with-social-proof
Inscription newsletter avec preuve
Formulaires · Source Pro
Une carte de newsletter qui répond aux deux questions que se posent réellement les gens avant de saisir une adresse : que reçoit-on dans sa boîte de réception, et qui d'autre la reçoit déjà. Une bande d'en-tête pleine nomme la liste, une rangée réunit le champ email et le bouton d'abonnement, une case de consentement explicite renvoie vers la politique de confidentialité, et une pile d'avatars d'abonnés se place sous un trait, à côté du compteur en direct.
Formulaires
Inscription newsletter avec preuveOuvrir l'aperçu en direct
- Hero, tarifs & auth
- Aperçu à chaque breakpoint
- Copiez le code
- Installable via MCP
- Radix · Base UI · React Aria
- 158 blocs prêts à l'emploi
- Sections de page qui livrent
- Dashboards & marketing
- Pro débloque le code
- Layouts prêts à coller
Adoré par les devs, designers
& créateurs
Je suis tombé sur ton kit UI et je l’ai adopté aussitôt. Bluffé de voir que c’est récent, activement maintenu et sans cesse amélioré — super boulot ! 🤘
Ziv Reich, Développeur logiciel Je voulais juste dire : super travail sur neobrutalism.com. J’adore vraiment. Je suis nul en design, alors c’était génial. Je l’ai utilisé sur mon site perso.
Paul Bratslavsky, Créateur de Coding With Paul J’ai enfin refait mon site perso avec Neobrutalism.com — super bibliothèque, trop simple pour démarrer !
Cameron Blackwood, Créateur de contenu Neobrutalism.com est l’une de mes bibliothèques de composants UI rétro préférées — des composants qui se shippent vraiment.
Zhengyang Hou, Indie hacker l’une de mes bibliothèques ui préférées pour le web. beau travail — j’espère que ça ira encore plus loin.
Taseen Tanvir, Fondateur & designer Je viens d’essayer Neobrutalism.com Pro — un kit UI qui ne ressemble pas à tout le reste. Les blocs néobrutalistes 🔥 m’ont permis de prototyper des layouts barrés bien plus vite.
Nitesh Padghan, Rédacteur fantôme Un design de landing page magnifique, avec un équilibre et un rythme parfaits. La palette de couleurs associée aux animations crée une expérience utilisateur exceptionnelle.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Je suis vraiment impressionné par le design livré. Le résultat final correspond exactement à ce que j’avais imaginé.
Desmond, Co-fondateur @ VectorlabsVentures En tant que dirigeant d’agence, je passais souvent des semaines à peaufiner les landing pages de mes clients. Avec Neobrutalism.com, j’insère un template, j’ajuste le texte, et je suis prêt à shipper.
Duke Opoku Amankwah, Fondateur @ Midas Les templates ne sont pas seulement superbes visuellement : ils sont aussi extrêmement bien structurés. Ils nous ont fait gagner des semaines de développement.
Abiola Braimah, Développeur @ Studio IX Qualité remarquable et souci du détail. Le design responsive fonctionne parfaitement sur tous les appareils.
Acromond X., Co-fondateur @ VectorlabsVentures Intégrer ces templates à notre workflow a nettement réduit notre cycle de développement. Excellent travail.
Raquib S., Développeur backend Ces templates sont devenus notre ressource de référence. Le code est propre, bien documenté et facilement personnalisable.
Hallic M., Développeur @ AtlasLabs Les templates Neobrutalism.com trouvent le juste équilibre entre esthétique et fonctionnalité. Un vrai game-changer pour nos projets.
Ibrahim S., Lead frontend @ ScaleUp Un support remarquable et des templates premium. Le ROI de ces templates est phénoménal.
Kevin K., CEO @ WebCraft Les templates Neobrutalism.com ont complètement transformé notre façon d’aborder les projets clients. La qualité du code est exceptionnelle et les designs vraiment world-class.
Danny G., Fondateur de DevStack J’ai utilisé beaucoup de bibliothèques de templates, mais Neobrutalism.com se démarque par son attention à la performance et à une architecture de code propre.
Ian D., CTO @ Wavelength Les animations et micro-interactions de ces templates sont absolument bluffantes. Le meilleur investissement pour notre équipe design.
Ben S., Lead designer @ PixelPerfect En tant que fondateur non technique, les templates Neobrutalism.com nous ont permis de lancer notre MVP en un temps record sans sacrifier la qualité du design. Nos investisseurs ont été bluffés.
Matthew I., Fondateur de startup J’apprécie à quel point ces composants sont modulaires et bien documentés. On a pu mélanger des pièces de différents templates sans friction.
Garrett P., Lead frontend @ TechFusion Le ROI des templates Neobrutalism.com est incroyable. Nous avons radicalement réduit notre temps de développement tout en livrant des sites de meilleure qualité à nos clients.
Xavier C., Dirigeant d’agence
Questions
fréquentes
Comment le bloc Inscription newsletter avec preuve est construit, ce que vous pouvez modifier et quand l'utiliser à la place des autres dispositions ici.
Utilisez celui-ci quand l'inscription est le sujet même de la section — il offre la place nécessaire pour la bande d'en-tête, une description de ce que la liste envoie réellement, une case de consentement et une preuve sociale, et fonctionne donc comme une bande autonome sur une landing page. Inscription newsletter compacte réduit le même objectif à une étiquette, un champ et un bouton pour une barre latérale, une colonne de pied de page ou la fin d'un article, là où une carte complète écraserait le contenu voisin.
Parce que rien ici ne conserve d'état. Le formulaire envoie une soumission native vers /api/newsletter sans gestionnaire JavaScript, et reste donc un composant serveur qui n'expédie aucun bundle côté client. Ajouter un message de succès ou un état optimiste est le moment où use client devient nécessaire — jusque-là, le formulaire continue même de fonctionner avec JavaScript désactivé.
Une véritable étiquette existe, simplement en sr-only. Un placeholder n'est pas une étiquette : il disparaît dès qu'on commence à taper, il n'est pas annoncé de façon fiable, et il fait défaut précisément au moment où le champ se remplit. Garder l'étiquette dans le balisage tout en la masquant visuellement donne au design ce qu'il recherche sans priver quiconque utilise un lecteur d'écran de ce nom accessible.
Parce qu'un consentement implicite n'en est pas un selon les règles de type RGPD, pas plus qu'une case précochée — celle-ci démarre donc décochée, n'est pas marquée required, et ne compte comme consentement que lorsqu'elle est réellement cochée. Le lien vers la politique de confidentialité se trouve à l'intérieur du texte de l'étiquette, où il se lit comme faisant partie de la déclaration à laquelle on adhère.
Parce qu'ils ne portent aucune information que la phrase voisine ne porte déjà. La pile n'est qu'une reformulation visuelle de « Rejoignez plus de 2 000 abonnés » ; elle est donc marquée aria-hidden, avec un alt vide sur chaque image — décrire trois visages anonymes ajouterait trois annonces sans le moindre sens. Si vous les remplacez par des clients nommés, donnez à chacun un vrai alt et retirez aria-hidden.
Elle est en flex-col jusqu'au point de rupture sm, puis en flex-row ensuite, si bien que sur un écran étroit le bouton se place sous le champ en pleine largeur plutôt que d'être compressé dans un espace de 90px à côté. Le bouton conserve aussi une base fixe sur grand écran, pour qu'un libellé localisé plus long, comme Abonnieren, ne vienne pas empiéter sur la largeur du champ.