shadcn.io is not affiliated with official shadcn/ui
Priced consultation length Contact Block for Ark UI
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 Ark 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 topic's Field takes the select's id, so its label and the hidden native select share it, and focusing that select passes focus to the button.
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.