shadcn.io is not affiliated with official shadcn/ui
Priced consultation length Contact Block for React
A consultation request for an advisory firm, with a 15, 30 or 60 minute choice that sets the price and the questions the call will cover.
Installation
Overview
A consultation request for Finchbrook Advisory, an advisory firm, for React with Base UI. A 15, 30 or 60 minute choice sets the fee shown beside it and replaces the list of questions the call will cover. The visitor adds a name, an email and a topic from a Select. Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one. A valid request turns into a confirmation in the same space, which takes focus and repeats the length, the fee and the topic. The firm's address sits in the frame's shell, under the panel. The page's rails and top rule come from the Guides spine. It's built from Segment Group, Select, Field, Input, Frame, Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For advisory firms and anyone who prices a first conversation by its length.
FAQ
What changes when the visitor picks a length?
The fee and the question list. Fifteen minutes is $180 and two questions, thirty is $320 and three, sixty is $540 and four. The questions are the first entries of one list, cut to that length's count, so the copy stays tied to the data. They are a list the visitor reads, not extra fields. The list keeps a minimum height so the fields under it stay put.
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call. details holds the length, the name, the email and the topic. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How does the form check what's typed?
The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks the name, an email address with an @ and a domain, and a topic. The length always has a value, because choosing again cannot clear it. Each problem appears under its field, the control is marked invalid, and focus moves to the first one. Typing, or choosing a topic, clears that field's message.
How is the topic select labelled?
The label above it names the select's button for screen readers, and focus can land on that button when the topic is missing.
The select's trigger takes the id, and the label points to it with htmlFor.
What does the confirmation say, and who hears it?
It thanks the visitor by first name and repeats the minutes, the fee and the topic they chose, plus the email they typed. It's a status region that takes focus when it appears, so a screen reader reads it at once. "Send another request" brings back the form at the 30 minute length, with the other fields empty, and puts focus on its heading. It doesn't promise a time on a calendar. The reply is the one in the line under the button: a person writes back to set the time.
Are the email address and phone number real?
No. hello@finchbrook.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0104 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF, HOURS and STREET at the top of the file with yours. The phone number and the fee keep their order in a right-to-left layout.
Related
- Pro
Month Calendar Scheduler Contact
Calls and meetingsA scheduling split: a host panel at the start; a month calendar that closes weekends and past days, the open times of the chosen day and a name and email at the end, with Confirm unavailable until a day and time are chosen.
- Pro
Request a Callback Contact
Calls and meetingsA callback request with a status band and a form that asks when to ring: as soon as possible, later today from a select of 15-minute times, or on a chosen day, with a time zone.
- Pro
Budget Range Slider Contact
Quotes and estimatesA roofing quote request as a card in a card: three kinds of job, a two-thumb budget slider that says in words what the range covers, and a short form that checks itself.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Stylist Booking Contact
Visits and servicesA salon booking that starts with the person: three stylists in hairline cells, each with their next three openings as chips, a live appointment line, and a form that checks itself and confirms in place.
- Pro
Self-Assessment Coaching Contact
Calls and meetingsA coaching request that starts with three scored sliders: Career, Health and Relationships, each with a level meter, and a computed line naming where there is most room.