Problem
There are zero interactive/input components. `contact_form_stub` renders a mailto link — it's not a form. The component library can only build brochure sites. For the "Day 365: hybrid YAML + custom React" trajectory, and for a compelling hackathon demo, the framework needs at least basic data collection capability.
Proposed approach
Add a `form` content type that renders a configurable form with typed fields:
```yaml
- form:
label: "Contact Us"
heading: { text: "Get in Touch", textSize: h2 }
action: "https://formspree.io/f/xxxxx" # or mailto: or custom endpoint
method: POST
fields:
- { name: "name", type: "text", label: "Your Name", required: true }
- { name: "email", type: "email", label: "Email", required: true }
- { name: "message", type: "textarea", label: "Message", required: false }
- { name: "plan", type: "select", label: "Plan", options: ["Starter", "Pro", "Enterprise"] }
submit_text: "Send Message"
success_message: "Thanks! We'll be in touch."
```
Design constraints
- No backend required. Forms submit to an external endpoint (Formspree, Netlify Forms, custom URL) or use `mailto:`. Stackwright stays static.
- Schema-validated fields. Field types are a closed enum: `text`, `email`, `textarea`, `select`, `checkbox`. No arbitrary HTML.
- Client-side validation only. Required fields, email format, etc. No custom validation logic in YAML.
- Deprecates `contact_form_stub`. The new `form` type is a superset. Mark `contact_form_stub` as deprecated.
Acceptance criteria
Problem
There are zero interactive/input components. `contact_form_stub` renders a mailto link — it's not a form. The component library can only build brochure sites. For the "Day 365: hybrid YAML + custom React" trajectory, and for a compelling hackathon demo, the framework needs at least basic data collection capability.
Proposed approach
Add a `form` content type that renders a configurable form with typed fields:
```yaml
label: "Contact Us"
heading: { text: "Get in Touch", textSize: h2 }
action: "https://formspree.io/f/xxxxx" # or mailto: or custom endpoint
method: POST
fields:
- { name: "name", type: "text", label: "Your Name", required: true }
- { name: "email", type: "email", label: "Email", required: true }
- { name: "message", type: "textarea", label: "Message", required: false }
- { name: "plan", type: "select", label: "Plan", options: ["Starter", "Pro", "Enterprise"] }
submit_text: "Send Message"
success_message: "Thanks! We'll be in touch."
```
Design constraints
Acceptance criteria