Fill-in-the-sentence form
The fields live inside a sentence set in a book typeface, and each blank grows as you type into it.
Settings
Code
<form class="uvq06-ml"><p class="tx">Hi, my name is <span class="w"><input name="n" aria-label="Your name" placeholder="your name" autocomplete="given-name"><span class="mr" aria-hidden="true"></span></span> and I work at <span class="w"><input name="e" aria-label="Company" placeholder="your company" autocomplete="organization"><span class="mr" aria-hidden="true"></span></span>. I'd like to talk about <span class="w sl"><select aria-label="Topic"><option>a new website</option><option>an app</option><option>a brand</option></select></span>; my email is <span class="w"><input name="m" type="email" aria-label="Email" placeholder="your email" autocomplete="email"><span class="mr" aria-hidden="true"></span></span>.</p><button type="submit" class="go">Send <span aria-hidden="true">→</span></button><p class="ok" aria-live="polite"></p></form>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
Instead of stacked labels and boxes, this contact form reads like a sentence: your name, your company, a topic and an email fill dashed blanks set in a serif typeface. Each input measures its own text with a hidden twin, so it widens as you write, and an empty blank shakes on submit. It suits studios, portfolios and friendly agencies.
Rewrite the sentence in your own voice and keep four or five blanks at most. Use the main color for the filled words and the button, and leave plenty of line height so the blanks breathe on small screens.