Newsletter signup form with validation and success states.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

heading

• Type: string - Default: 'Subscribe to our newsletter'
• Heading text

description

• Type: string - Default: 'Get the latest updates delivered to your inbox'
• Description text

placeholder

• Type: string - Default: 'Enter your email'
• Input placeholder

buttonText

• Type: string - Default: 'Subscribe'
• Button text

successMessage

• Type: string - Default: 'Thanks for subscribing!'
• Success message

errorMessage

• Type: string - Default: 'Something went wrong. Please try again.'
• Error message

collectName

• Type: boolean - Default: false
• Show name field

namePlaceholder

• Type: string - Default: 'Enter your name'
• Name placeholder

layout

• Type: 'inline' | 'stacked' - Default: 'inline'
• Layout style

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

className

• Type: string
• Additional CSS class

onSubmit

• Type: (data: { email: string
• Submit handler

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 8px; /* Border radius */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-newsletter-signup - Component wrapper