# FormCapture
> Render any form from Storefront Forms by its key, with validation, inline errors, consent, and first-party capture
Canonical URL: https://3c5b211cae60:3005/islands/engagement/form-capture
> Renders a merchant form (phone, name, select, consent, and more) from its `formKey`, validates it, and submits to the form-capture backend. Field errors from the server show inline next to the right input.
**Category**: Engagement
## Props
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| formKey | string | yes | - | Key of the form in Storefront Forms, e.g. `customer_phone_number` |
| fields | array | no | - | Field definitions rendered instead of the live schema. Keys must match the form's fields |
| heading | string | no | - | Heading above the form |
| description | string | no | - | Supporting text under the heading |
| submitLabel | string | no | "Submit" | Submit button text |
| successMessage | string | no | "Thanks! We got your details." | Message shown after a successful submit |
| consentText | string | no | form's consent text | Consent copy. When set here or on the form, a required checkbox is shown |
| layout | enum | no | stacked | `stacked` or `inline` (fields and button on one row from the `sm` breakpoint) |
| variant | enum | no | default | `default`, `compact` (tighter padding) or `minimal` (underline inputs) |
| fieldOverrides | object | no | - | Per-field `{label, placeholder, width}` keyed by field key. `width: "half"` puts two fields on one row |
| messages | object | no | - | Custom or translated error copy keyed by error code (see below) |
| resetOnSuccess | boolean | no | false | Clear the inputs and keep the form visible after success |
Field types map to native inputs: `text`, `email` (`type="email"`), `phone` (`type="tel"`, `inputMode="tel"`, `autoComplete="tel"`), `number`, `date`, `textarea`, `select`, `radio` (a fieldset of options) and `checkbox`.
## Embed Example
```html
```
## Usage Patterns
**Phone pop-up** (nested in Modal):
```html
```
**Two fields on one row**:
```html
```
**Translated errors**:
```html
```
## How Submissions Are Captured
FormCapture loads the form's live field list when it mounts and shows a skeleton while loading. If the form doesn't exist, it renders nothing on the live page. In the editor preview it shows "Form `` not found" so the problem is visible.
On submit it checks required fields, emails and phones on the client. Phones must be 10 digits, or `+` followed by 8–15 digits, ignoring spaces, dashes and parentheses. The server is authoritative: it normalises the phone for the form's default country and returns field-level errors, which appear inline next to the input with `aria-invalid` and `aria-describedby`. Focus moves to the first invalid field.
Consent is sent as `_consent: true`. A hidden honeypot input named `_hp` is included and must stay empty, so bots that fill it are silently dropped.
After success the island emits `form:submitted` on the island event bus. If an email field was filled, it also calls `lx("identify", {email})`.
### Error codes
`required`, `invalid_email`, `invalid_phone`, `invalid_number`, `invalid_option`, `invalid_checkbox`, `too_long`, `consent_required`, `unknown_form`, `form_archived`, `rate_limited`, `network_error`, `submit_failed`. Any of them can be overridden through `messages`.
## Stylable Parts
Every element carries both `data-part` and `data-lx-part` with the same value:
| Part | Description |
|------|-------------|
| `root` | Outermost container (dispatches the DOM events) |
| `heading` | Heading |
| `description` | Description text |
| `form` | `