Contact Split

Live demo

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

npx shadcn@latest add @moonarc-pro/contact-split

---
import ContactSplit from '@/components/moonarc/pro/ContactSplit.astro';
---
<!-- Without JavaScript the form posts to action and your endpoint answers with a 303 to the page that renders
     <ContactSplit sent … />. With it, the section's script (bindForms() from the core form lib) sends the same fields
     with fetch, and the form stays and says it is done. -->
<ContactSplit
  eyebrow="Contact"
  headline="Talk to the team"
  copy="Questions about plans, a demo, or a bug: write, and a person answers."
  channels={[
    { label: 'Email', value: 'hello@example.com', href: 'mailto:hello@example.com' },
    { label: 'Phone', value: '+1 555 0100', href: 'tel:+15550100' },
    { label: 'Office', value: '1 Example Street, Springfield' },
  ]}
  fields={[
    { name: 'name', label: 'Name', type: 'text', required: true, autocomplete: 'name' },
    { name: 'email', label: 'Email', type: 'email', required: true, autocomplete: 'email' },
    { name: 'topic', label: 'Topic', type: 'select', required: true, placeholder: 'Choose one', options: ['Sales', 'Support', 'Press'] },
    { name: 'message', label: 'Message', type: 'textarea', required: true },
    { name: 'updates', label: 'Send me product updates', type: 'switch' },
  ]}
  consent="I agree to be contacted about this message."
  privacy="/privacy/"
  action="/api/contact"
  encode="json"
  honeypot="website"
/>

<!-- the page a native post lands on (noindex): the same section, the confirmation in place of the form -->
<ContactSplit headline="Talk to the team" sent sentHeadline="Message sent" />

<!-- A service that reads its own attributes and hidden inputs gets them passed through: action="/contact/sent/"
     endpoint="/" encode="urlencoded" formAttrs={{ name: 'contact', 'data-netlify': 'true' }}, and in the fields slot
     <input slot="fields" type="hidden" name="form-name" value="contact" />.
     While no service is set up, demo instead of action: nothing is sent, and a note under the form says so. -->

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: check-draw, stepper, stateful-button.

Props

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Why it is built this way

• Every control is a native one with a <label>: the select is a real <select>, the switch a checkbox with role="switch", the consent a checkbox. So the request carries the same fields with and without JavaScript, in every encoding.
• The status line exists at load, is never hidden, and reserves one line (min-block-size: 1lh): a live region that appears with its text is not announced. The button is not a live region; its face follows the form's data-pending and data-state and is its name.
• The button goes aria-disabled while pending, never disabled, so the focus stays on it. After a failure every value is still in its field, and the focus goes to the first field that held text.
• The fields' border is the tone's text at 60 % over the plate and their focus ring is the text itself, measured at 3 : 1 or more on every tone. The theme's --input and --ring are greys made for a white card. The :user-invalid border mixes the theme's destructive colour half and half with the text for the same reason.
• Every text field is 16 px or larger, so a phone never zooms the page when one is focused.
• The native path lands on a page you render with sent: your endpoint answers the post with a 303 to it (Netlify posts to it directly). The form never navigates after a fetch unless you set success.

Replaces: Contact sections (Tailwind Plus) · Contact (shadcnblocks) · Contact forms (Framer templates). See the migration table.

Related