Newsletter
Email Input Form
Email field and submit button for newsletter signup. Generic enough for footers, popups, or dedicated newsletter sections.
Overview
EmailInputForm is the email-capture field and submit button used inside NewsletterRegistration, PopUpNewsletter, and standalone footer signups. The form is accessible and validation-ready, with optional placeholder and label.
EmailInputFormDisplay is the display sub-component. Use it to separate the form chrome from the success or empty state when you need finer control over rendering.
Key Business & UX Benefits
- One signup field drops into footers, popups, and dedicated sections, so the same primitive grows the subscriber list everywhere it appears.
- Built-in accessibility and validation reduce drop-off on the highest-friction step of marketing acquisition.
- Splitting form chrome from the success state via the display sub-component gives teams full control over post-signup messaging.
- Editors place the form anywhere in Studio, opening signup placements that engineering would otherwise have to ticket.
Pro-Tip from Larry: Drop
EmailInputForm in the footer so signup is always available without a separate page.Usage
LEmailInputForm
Feature List
- Email field plus submit button reused inside NewsletterRegistration, PopUpNewsletter, and standalone footer signups
- Accessible and validation-ready out of the box, with optional placeholder and label
- EmailInputFormDisplay sub-component separates form chrome from success or empty states for finer rendering control
- Drops into any layout, so the same primitive grows the subscriber list everywhere it appears
- Editors place the form anywhere in Studio without engineering tickets
API Reference
LEmailInputForm
| Prop | Default | Type |
|---|---|---|
emailPlaceholder | string | |
emailButton | { text, ariaLabel, iconRight, 1 more } | |
statusMessages | { showPartyPopperEmojis, loadingText, successText, 6 more } |
LEmailInputFormDisplay
| Prop | Default | Type |
|---|---|---|
staterequired | "error" | "loading" | "success" | "initial" | "already-registered" | |
emailPlaceholder | string | |
emailButton | { text, ariaLabel, iconRight, 1 more } | |
statusMessages | { showPartyPopperEmojis, loadingText, successText, 6 more } |
| Event | Type |
|---|---|
reset | (event: "reset"): void |
submit | (event: "submit", value: string): void |