Formulario en frase
Los campos van dentro de una frase escrita con tipografía de libro y cada hueco crece con lo que escribes.
Ajustes
Código
<form class="uvq06-ml"><p class="tx">Hola, me llamo <span class="w"><input name="n" aria-label="Tu nombre" placeholder="tu nombre" autocomplete="given-name"><span class="mr" aria-hidden="true"></span></span> y trabajo en <span class="w"><input name="e" aria-label="Empresa" placeholder="tu empresa" autocomplete="organization"><span class="mr" aria-hidden="true"></span></span>. Quiero hablar de <span class="w sl"><select aria-label="Tema"><option>una web nueva</option><option>una app</option><option>una marca</option></select></span>; mi correo es <span class="w"><input name="m" type="email" aria-label="Correo electrónico" placeholder="tu correo" autocomplete="email"><span class="mr" aria-hidden="true"></span></span>.</p><button type="submit" class="go">Enviar <span aria-hidden="true">→</span></button><p class="ok" aria-live="polite"></p></form>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
En lugar de etiquetas y cajas apiladas, este formulario de contacto se lee como una frase: tu nombre, tu empresa, un tema y un correo rellenan huecos discontinuos en una tipografía con remates. Cada campo mide su texto con un gemelo oculto, así que se ensancha mientras escribes, y un hueco vacío tiembla al enviar. Encaja en estudios, portfolios y agencias cercanas.
Reescribe la frase con tu propia voz y no pases de cuatro o cinco huecos. Usa el color principal para las palabras escritas y el botón, y deja interlineado amplio para que los huecos respiren en pantallas pequeñas.