Conversational Form
Turn a project intake form into a conversation with one question at a time, quick replies, and an editable answer history.
Powered by
Preview
Answer four short questions to create a project brief. Use Previous answer to revise a reply, or switch to Code to copy the complete component. Everything stays in the preview.
Let’s make something.
A project brief, one reply at a time.
Guide: First, what should I call you?
Interactive demo · nothing is sent
When to use it
Conversational forms suit short onboarding flows, lead qualification, and guided support intake. The visible conversation gives each question context, while quick replies reduce typing. For lengthy forms where users need to compare many fields, a conventional layout can be easier to scan.
How to build it
- Define an ordered list of questions with stable field keys. Give each question either an input type or a set of quick replies.
- Store accepted answers separately from the current draft. The answer count determines the active question and progress indicator.
- Validate before advancing: this example uses required fields, native email validation, and a trimmed-name check.
- Render previous questions and replies as a scrollable conversation log. Move keyboard focus to the next control after a reply and announce new messages with a polite live region.
- Let users go back through their answers. This example removes the last answer and restores it as a draft; earlier replies remain intact.
- Map answers to question keys on completion. The preview displays the resulting object; connect that object to your own submit handler and validate it again on the server when adapting the example.
This is a deterministic conversation: it does not require an AI service or natural language processing.
Related pattern
Try the Natural Language Form to put editable fields inside a readable sentence, with all questions visible at once.