> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Contact Form

Labels first, hairline inputs, honest focus states

- Category: Components
- Tags: form contact input accessibility

## Usage

A quiet contact form: mono uppercase labels, hairline inputs that focus to primary, one submit button.

## On PageWeave

Use `create_form` and swap the static markup for the returned `submit_url` embed — submissions land in JSONB and email the notification address.

## Rules

- Labels always visible (no placeholder-only fields); placeholders carry examples, not instructions.
- `focus:border-primary` gives a single consistent focus color — never remove outlines without replacing them.
- Two-column only for short sibling fields (name/email); everything else full-width.
- Error states: add `input-error` + an `aria-describedby` hint line; don't rely on color alone.

## HTML source

```html
<form class="max-w-lg mx-auto">
  <fieldset class="border-0 p-0">
    <legend class="font-mono text-xs uppercase tracking-[0.16em] text-base-content/50 mb-6">Send a message</legend>
    <div class="grid sm:grid-cols-2 gap-4">
      <label class="form-control">
        <span class="label-text font-mono text-xs uppercase tracking-wider text-base-content/60 mb-1.5 block">Name</span>
        <input type="text" placeholder="Ada Lovelace" class="input input-bordered w-full bg-base-100 border-base-content/20 focus:border-primary" />
      </label>
      <label class="form-control">
        <span class="label-text font-mono text-xs uppercase tracking-wider text-base-content/60 mb-1.5 block">Email</span>
        <input type="email" placeholder="ada@example.com" class="input input-bordered w-full bg-base-100 border-base-content/20 focus:border-primary" />
      </label>
    </div>
    <label class="form-control mt-4">
      <span class="label-text font-mono text-xs uppercase tracking-wider text-base-content/60 mb-1.5 block">Message</span>
      <textarea class="textarea textarea-bordered w-full bg-base-100 border-base-content/20 focus:border-primary" rows="5" placeholder="What are you building?"></textarea>
    </label>
    <button type="submit" class="btn btn-primary border-0 mt-6">Send message</button>
  </fieldset>
</form>
```