Cal.com — booking details form
Functional Product UI · product UI flow
Source: pending · Classification: pending
Original principle diagram · Draft explanation
Keep the decision in view.
What to borrow: Keep the selected appointment visible while collecting details.
When to use this principle
- When it works
- Booking flows where date, duration, and person must stay clear.
- When to avoid it
- Sensitive details on shared screens; summaries that crowd out fields.
Original principle diagram — a model-drafted explanation, not a reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.
- Steal · grid/layoutmodel draft
The left column keeps the meeting's facts and adds the chosen slot (Tuesday, 13 October, 10:30–10:45). The right column swaps the calendar for the form, so the commitment stays in view while you fill it in.
- Steal · component patternmodel draft
Three fields only (name, email, what to discuss), 'Add guests' as a quiet link, then Back and Confirm side by side. The terms line sits above the button, not in a checkbox.
Fonts: Inter · Original: Cal.com
private-reference-only
View original ↗Source & usage rights
Original: Cal.com. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-10-10. Capture does not establish source verification.