shadcn.io is not affiliated with official shadcn/ui
Contact Form Footer Block for React Aria
A contact-form footer for a hosting company: three short link groups on one half of a split, and on the other a compact message form in a card in card that checks itself and confirms in place.
Installation
Overview
A contact-form footer for React with React Aria, split behind a hairline that runs from the page's top rule to the end of the page, wider at the start. The start half holds the brand, one sentence and three short link groups in the nav labelled Footer. The end half is a compact form in a card in card with + marks on its corners: an email field, a two-row message and the Shine Button "Send message". Submitting it checks both fields, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid message turns into "Message sent" in the same space, which takes focus. A legal band runs under both halves. It's built from Field, Input, Textarea, Guides, Shine Button and Button, with your theme's tokens for every colour.
FAQ
Where does the message go?
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 a call to your support inbox, help desk or form endpoint: email and message hold what was typed. Show the confirmation when the request succeeds and an error line in the form when it doesn't.
How does the form check what is typed?
The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks that the email has an @ and a domain and that the message is not empty. 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 clears its message.
What does the confirmation say, and who hears it?
It repeats the email address the reply will go to, so the visitor can spot a typo, and says how soon to expect it. It's a status region that takes focus when it appears, so a screen reader reads it at once; "Send another message" brings back an empty form and puts focus on its heading. The form and the confirmation share one space, so the footer does not change height.