Formulaire en phrase à trous
Les champs sont glissés dans une phrase en police de livre, et chaque trou s'élargit au fil de la saisie.
Réglages
Code
<form class="uvq06-ml"><p class="tx">Bonjour, je m'appelle <span class="w"><input name="n" aria-label="Tu nombre" placeholder="tu nombre" autocomplete="given-name"><span class="mr" aria-hidden="true"></span></span> et je travaille chez <span class="w"><input name="e" aria-label="Empresa" placeholder="tu empresa" autocomplete="organization"><span class="mr" aria-hidden="true"></span></span>. J'aimerais parler d' <span class="w sl"><select aria-label="Sujet"><option>un nouveau site</option><option>une app</option><option>une marque</option></select></span>; mon e-mail est <span class="w"><input name="m" type="email" aria-label="E-mail" placeholder="ton e-mail" autocomplete="email"><span class="mr" aria-hidden="true"></span></span>.</p><button type="submit" class="go">Envoyer <span aria-hidden="true">→</span></button><p class="ok" aria-live="polite"></p></form>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Voir tout : ChampsOù l’utiliser
Au lieu d'étiquettes et de cases empilées, ce formulaire de contact se lit comme une phrase : ton nom, ton entreprise, un sujet et un e-mail remplissent des trous en pointillé dans une police à empattements. Chaque champ mesure son texte avec un jumeau invisible pour s'élargir pendant la saisie, et un trou vide tremble à l'envoi. Il convient aux studios, portfolios et agences.
Réécris la phrase avec ta propre voix et garde quatre ou cinq trous au maximum. Utilise la couleur principale pour les mots remplis et le bouton, et laisse un interligne généreux pour que les trous respirent sur petit écran.