PageWeave/Design
llms.txt Contribute
Menu
Styles Themes Components Skills Prompts Guides Collections Changelog About

Components / Contact Form

5 Component formcontactinputaccessibility .md

Contact Form

Labels first, hairline inputs, honest focus states

Live preview — rendered in this site's theme Contact Form

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 Copy-paste source

<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>