> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Form

Embeddable forms that collect user input and send it via email.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Form playground on holydocs.com](https://holydocs.com/components/form).

## When to use

Use this component when the reader benefits from an active surface such as a form, quiz, chart, or draggable visual.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Contact Form

Full contact form with multiple field types.

**Contact Us**

**Name**
  **Email**
  **Message**

~~~mdx
<Form title="Contact Us" subject="New inquiry">
  <FormField name="name" label="Name" type="text" required />
  <FormField name="email" label="Email" type="email" required />
  <FormField name="message" label="Message" type="textarea" required />
</Form>
~~~

### With Select

Form with a dropdown select field.

**Request Access**

**Email**
  **Plan**
  **Why?**

~~~mdx
<Form title="Request Access" subject="Access request">
  <FormField name="email" label="Email" type="email" required />
  <FormField name="plan" label="Plan" type="select" options="Free,Pro,Enterprise" />
  <FormField name="reason" label="Why?" type="textarea" />
</Form>
~~~

### Minimal

Simple single-field form.

**Subscribe**

**Email address**

~~~mdx
<Form title="Subscribe" submitLabel="Subscribe">
  <FormField name="email" label="Email address" type="email" required placeholder="you@example.com" />
</Form>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `undefined` | Form heading text. |
| `to` | `string` | `Project owner email` | Email address to receive submissions. |
| `subject` | `string` | `'Form submission'` | Email subject line. |
| `submitLabel` | `string` | `'Submit'` | Submit button text. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Form title="Contact Us" subject="New inquiry">
  <FormField name="name" label="Name" type="text" required />
  <FormField name="email" label="Email" type="email" required />
  <FormField name="message" label="Message" type="textarea" required />
</Form>
~~~

## Tips

- Explain what changes when a reader interacts with the component. Motion or controls alone should not carry the full meaning.
- Keep a non-interactive fallback in mind for screenshots, exported docs, and AI-driven readers that only see the resulting HTML.
- Verify keyboard behavior and focus states whenever the component includes inputs, toggles, or draggable controls.

## Related Components

**[Color](/components/color)**

Visual color swatch with hex value and optional name, useful for design system documentation.
**[Carousel](/components/carousel)**

Embla-style carousel for screenshots, product tours, quotes, and gallery cards with optional autoplay.
**[Prompt](/components/prompt)**

Display pre-built AI prompts with a one-click copy button for easy reuse.

## More

- Interactive playground: [Form on holydocs.com](https://holydocs.com/components/form)
- Component library index: [/components](/components)