shadcn.io is not affiliated with official shadcn/ui
Talk to Sales Contact Block for React
A 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.
Installation
Overview
A talk-to-sales section for React with Base UI, split by a hairline that meets the page's top rule with a + mark. At the start, a compact header, what happens next as three numbered steps joined by a thin line, and a band of contact details (an email, a phone number and office hours as links in an address). At the end, a real form: full name, work email, company size in a Select and a note in a Textarea, each a Field with its label. Submitting it 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. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Field, Input, Select, Textarea, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For B2B products, enterprise plans and any page where a visitor should reach a person.
FAQ
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 (your CRM, your sales inbox or a form endpoint): details holds the name, email, company size and note. 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 each field: a name, an email address with an @ and a domain, a company size and a note. Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby that points to the message, and focus moves to the first one. Typing in a field, or choosing a size, clears its message. Edit problems to add rules, such as turning away personal email domains.
How is the company size select labelled?
The label above it names the select's button for screen readers, and focus can land on that button when the size 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 email and company size they sent, so they can spot a typo. It's a status region that takes focus when it appears, so a screen reader reads it at once, and "Send another request" brings back an empty form and puts focus on its heading. It doesn't promise anything a server would have to keep: the reply time is the published one in the steps beside it.
Are the email address and phone number real?
No. sales@shiftwright.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0142 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file with yours. The phone number keeps its order in a right-to-left layout.
How does it fit on a phone?
Below lg the split stacks: the header, then the form straight away, then the steps and the contact details, each part opened by a rule with + marks. Name and email go one per row below sm, the submit button goes full width, and under 360 pixels the contact labels shrink to their icons (screen readers still hear "Email", "Phone" and "Hours"), so nothing scrolls sideways at 320 pixels. The header and the form fade up once on load; with reduced motion they simply appear.
Related
- Pro
Custom Quote Pricing
Sales and partnersA quote request for a security platform: the pitch and three ruled points beside a short form whose submit button sits inside the first screen, and a confirmation that takes focus once it's sent.
- Pro
Sales Call Scheduler Pricing
Sales and partnersEnterprise pricing by conversation: a scheduler with a strip of the next five working days and a grid of time slots in the visitor's own time zone, then a confirmation.
- Pro
Reverse Split Dot Grid Map Hero
Diagrams and mapsA reverse split contact hero on solid rails: an abstract dot map with a pulsing marker per office fills the first half up to a divider, beside a headline, a Shine Button and three offices as ruled rows.
- Pro
Tax Details Billing
Payment and invoicesBilling address and tax ID in app settings: a form that checks the postal code and tax number against the country, an optional invoice note, and a live preview of the invoice header.
- Pro
Centered Email Capture CTA
Forms and captureA call to action between solid rails that follows the page theme, in a card in card with a two-step email capture: an email field and a Shine Button, then a six-digit code that verifies on the sixth digit and turns into a confirmation in the same space.
- Pro
Card in Card Contact
Contact formsA card-in-card contact section for a bookkeeping service: the details of the desk you pick beside a raised form with a live message counter.