Form
Embeddable forms that collect user input and send it via email.
For isolated previews, theme switching, and sandbox editing, open the Form playground on holydocs.com .
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.
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.
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.
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
Visual color swatch with hex value and optional name, useful for design system documentation.
More
- Interactive playground: Form on holydocs.com
- Component library index: /components