Skip to content
Aback UI

Block ยท Forms

Contact form

A contact form with field-level errors, focus on the first error, a character count, and submit states.

Beta7 componentsRegistry JSON (opens in a new tab)
the Contact form preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add contact-form

The block lands at components/blocks/contact-form.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Implement onSubmit with your server action or API route and validate again on the server. Client checks only catch typos.
  • Return { ok: false, message } for a failure you can explain, such as a rate limit. Thrown errors show a generic retry message.
  • Change topics to match how your team triages messages, and keep a catch-all option.
  • Add spam protection on the server, such as Turnstile, before going live.

Accessibility

  • Every field has a visible label and a required marker; errors are linked with aria-describedby and mark the field aria-invalid.
  • On an invalid submit, focus moves to the first field with an error, so the reader lands on the problem.
  • The character count is the message field's description, so it is announced with the field.
  • The success view replaces the form inside a status region, with a clear next step.