--- title: "Book a Demo Page and Flow Design | Utkarsh Panwar" description: "How to design a book a demo page and flow: when to lead with demo, which form fields to keep, what to show after submit, and how to measure booked calls." url: https://www.utkarshdesign.com/guides/demo-request-flow author: Utkarsh Dhairya Panwar updated: 2026-10-08 --- # How to design a book-a-demo page and flow Guide · 6 min read · By [Utkarsh Dhairya Panwar](https://www.utkarshdesign.com/about) · Updated 8 Oct 2026 **A demo flow is done when a qualified buyer has a call booked. Ask only what sales uses for routing, say what the call covers and how long it takes, show qualified people a calendar right after submit, and give everyone else a self-serve path.** ## Draw the whole flow before designing the form Teams usually redesign the demo form and stop there. But the form is one screen in a chain of seven, and the drop-offs I've seen tend to sit before it (a vague button) or after it (a thank-you page that just says thanks). 1. **The button**: Where it sits, what it says, and whether it competes with a free trial button of equal weight. 2. **The demo page**: What the call is, who's on it, how long it takes, and proof next to the form. 3. **The form**: The fewest fields that let sales route the request correctly. 4. **The moment after submit**: A calendar for qualified requests, and a useful next step for everyone else. 5. **Confirmation and reminder**: An email with the time, the agenda and a way to add a colleague. 6. **The call itself**: The product shown in the buyer's own context rather than a generic tour. 7. **The follow-up**: A trial, a sandbox or a proposal, sent the same day while the call is fresh. ## When 'Book a demo' should be the main button Lead with the demo when the buyer can't see value without setup they can't do alone, for example when an admin has to install something, security has to review it, or data has to be connected first. If one person can get value in an afternoon, lead with a trial. Many B2B sites need both, so decide which is primary and make the other visibly secondary. CodeAnt's site pairs a self-serve start with a 'Book a Demo' button, because the developer who wants to try it and the security lead who wants a walkthrough are different people arriving at the same page. ![CodeAnt AI homepage first screen with the headline Autonomous Preventive Security Platform, a filled Start Pentest button beside an outlined Book a Demo button, and a customer logo strip](https://www.utkarshdesign.com/images/web/codeant-home.webp) _Screenshot: codeant.ai, October 2026. A self-serve start for the developer, and a demo for the person who signs off._ Make the label specific. 'Book a 30-minute demo' or 'Get a demo' tells the visitor what they're signing up for. 'Contact us' could mean anything, including a week of email tennis. ## Demo request form fields: what each one costs Each field costs the visitor a little effort. Keep the ones sales will use to route or prepare for the call, and drop anything you can learn later or look up yourself. | Field | Why teams ask | My call | | --- | --- | --- | | Work email | Identifies the company and the person | Keep. It's the one field you can't do without | | Name | Personalises the follow-up | Keep, as one field, not first and last | | Company size | Routes to the right rep or plan | Keep if routing depends on it; use ranges, not a free number | | Role | Tells sales whether this is a user or a buyer | Keep as a short dropdown if the demo changes by role | | What do you want to solve? | Lets the rep prepare | Optional free text. The best requests fill it in | | Company name and website | Research before the call | Drop. The email domain gives you both | | Phone number | Fast follow-up | Drop unless you do call people. It puts off more visitors than it helps | | Country or time zone | Scheduling | Drop. The calendar step detects it | In practice that comes to three to five fields. If sales insists on more, ask which field changed what they did last week, and cut the ones nobody can name. ![CodeAnt AI Book Your Live Demo page: Gartner Cool Vendor and SOC 2, GDPR badges and a customer quote on the left, a five-field form with Full Name, Work Email, Company Name, Number of Developers and Platform on the right](https://www.utkarshdesign.com/images/web/codeant-demo.webp) _Screenshot: CodeAnt's demo page, the live site today (October 2026). Five fields with proof beside them. I'd still drop Company Name, since the email domain gives it._ ## What happens after submit decides whether the call happens - Qualified requests see a calendar on the same screen. Intent is highest in the minute after someone submits, and it has faded by tomorrow when an email arrives. - Requests that don't fit sales (a student, a solo developer, a tiny team) still get a useful next step, such as the free plan, the docs or a recorded walkthrough, instead of silence. - The confirmation email repeats the time, says who will be on the call and what they'll cover, and makes it easy to add a colleague. - A short reminder goes out before the call with a one-click reschedule link, since a rescheduled call is better than a no-show. In B2B the 'add a colleague' step is easy to underrate. The champion who books the call is often not the person who decides, and a demo without the decider usually ends in a second demo. Put an 'invite a colleague' field or link in the confirmation, not only in the calendar invite. I saw the same split between the person with intent and the person with authority in CodeAnt's onboarding, which is written up in how CodeAnt doubled trial-to-paid. ## The pages before the form, and the demo after it Demo quality is mostly settled before anyone sees the form. A visitor who lands on a page that already describes their problem books a better call than one who arrived on a generic homepage. At xPay that came from giving each go-to-market page one clear topic (the Framer SEO guide has the details). The demo itself belongs to the flow too. If the product needs narrating at every step, the call is spent explaining screens instead of answering the buyer's questions, and those questions are where deals move. My checkout UX guide has a simple test for this: walk someone through it and write down every sentence you have to say. ## Measure booked calls instead of form fills Track the flow as a funnel with the same definitions every month: demo button clicks, form starts, submits, calls booked, calls held, and calls that became a real opportunity. Flows lose value between 'submitted' and 'held' without anyone noticing, because most teams never look at that gap. If you'd like the whole path checked, from the ad or search result through to the booked call, that's what my website conversion audit covers. ## Questions people ask ### How many fields should a demo request form have? Three to five in most cases: work email, name, and one or two questions sales uses to route the request. Everything else can wait for the call. ### Should the demo page mention pricing? Link to it, or say how pricing works if it isn't public. A buyer who already knows the rough cost books a more useful call, and one who can't afford it doesn't take a slot. ### Can a recorded demo replace live demos? For small teams and early research, yes. Offer it as the self-serve path after the form. Keep live calls for buyers who need their own setup, security questions or pricing discussed. ### How long should a SaaS demo call be? Whatever you promise on the page, and then keep to it. Saying the length up front (for example, a 30-minute demo) makes people more willing to book. ## Sources 1. [Website Forms Usability: Top 10 Recommendations](https://www.nngroup.com/articles/web-form-design/), Nielsen Norman Group 2. [B2B: Help Your Fans Convince Their Bosses](https://www.nngroup.com/articles/b2b-convincing-decision-makers/), Nielsen Norman Group ## Working on this? Tell me what you're building and where it's stuck: [book a 30-minute call](https://cal.com/utkarsh-design/30min), email [work@utkarshdesign.com](mailto:work@utkarshdesign.com) or [send a brief](https://www.utkarshdesign.com/contact). ## Related - [Landing page and website conversion audit for SaaS](https://www.utkarshdesign.com/services/website-conversion-audit) - [How to structure a SaaS landing page](https://www.utkarshdesign.com/guides/saas-landing-page-structure) - [SaaS pricing page design](https://www.utkarshdesign.com/guides/pricing-page-design) - [Conversion rate optimization for SaaS websites](https://www.utkarshdesign.com/guides/saas-conversion-rate-optimization) --- Utkarsh Dhairya Panwar, Founding Product Designer and Design Engineer (IIT Roorkee; Founding Designer at CodeAnt AI, YC W24). Email: work@utkarshdesign.com · Book a call: https://cal.com/utkarsh-design/30min · Hire: https://www.utkarshdesign.com/hire · About: https://www.utkarshdesign.com/llms.txt