# EmailCapture

> Email signup form with automatic first-party capture and discount incentives

Canonical URL: https://fa7e86e3d553:3005/islands/engagement/email-capture

> Email signup form. Submissions are captured automatically — no endpoint to configure. Offer discount incentive for signups.

## Preview

**Category**: Engagement

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| placeholder | string | no | "Enter your email" | Input placeholder text |
| buttonText | string | no | "Subscribe" | Submit button text |
| successMessage | string | no | "You're in! Check your inbox." | Message shown after successful submission |
| discount | string | no | - | Discount code to display (e.g. "10% off") |
| variant | enum | no | default | Display style: 'default' or 'compact' |

## Embed Example

```html
<lx-island name="EmailCapture">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Usage Patterns

**Footer signup** (site-wide):

```html
<lx-island name="EmailCapture">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**Inline CTA** (between sections):

```html
<lx-island name="EmailCapture">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## How Submissions Are Captured

EmailCapture posts automatically to the form-capture backend — there is no
`endpoint` prop and none is needed. Every submission is stored under the
`email_capture` form and is visible in <AppLink to="forms">Storefront Forms</AppLink>.

## Tips

- variant:'default' — full-width input + button (landing pages)
- variant:'compact' — smaller, inline form (footer, sidebar)
- discount prop shows discount code after signup (auto-copies to clipboard)
- successMessage can include HTML: `"Check your inbox for <strong>WELCOME10</strong>"`
- Avoid multiple EmailCapture islands on one page (confusing UX)

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `button` | Submit/action button |
| `discount` | Discount text |
| `error` | Error message |
| `form` | Form wrapper |
| `input` | Text input field |
| `root` | Outermost container |
| `success` | Success state wrapper |
| `success-icon` | Success checkmark icon |

```css
/* Example: pill input + gradient button */
[data-section-id='SECTION'] [data-part='input'] {
  border-radius: 9999px;
  padding-left: 1.5rem;
}
[data-section-id='SECTION'] [data-part='button'] {
  border-radius: 9999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
```

## Related Islands

- [Modal](/islands/engagement/modal) — Use `trigger:"exit_intent"` for last-chance capture
- [CountdownTimer](/islands/content/countdown-timer) — Pair for "Subscribe to get notified when sale ends"