Natural Language Form
Collect a structured project brief through editable sentences with inline inputs and dropdowns.
Powered by
Preview
Fill in your name and email, then change the underlined choices to complete the brief. Switch to Code for the full implementation. Submitting shows the structured data locally without sending it anywhere.
Fill in the blanks
A brief in your own words.
Edit the underlined fields to tell us what you have in mind.
When to use it
Natural language forms work well for short project briefs, search filters, booking requests, and preference settings. Connecting fields with a sentence can explain how the answers relate. Use a conventional form for long, complex workflows or fields that need substantial help text.
How to build it
- Write a short sentence around the information you need, then replace each blank with an input or select. Keep the sentence grammatical for every available choice.
- Store each field under a stable key in one state object. The sentence is the presentation; the submitted data stays structured.
- Style fields with an underline and a clear focus state so the editable parts remain discoverable. Allow sentences and controls to wrap on small screens.
- Give every control an accessible name. Native inputs and selects provide keyboard interaction, and required name and email fields provide browser validation.
- On submit, validate whitespace-only names and show the resulting object. Preserve the values when users choose Edit brief and restore defaults with Start again.
This pattern uses explicit choices and text inputs. It does not parse freeform prose or need an AI model. When adapting it, connect the state object to your submission endpoint and validate the fields on the server too.
Related pattern
The Conversational Form collects a similar brief through a sequence of chat messages instead of a single sentence-based interface.