NewsletterCard Component

Newsletter subscription card component with email collection, validation, and modern design. Perfect for capturing leads and building your email list.

Overview

The NewsletterCard component provides an attractive newsletter subscription interface with email validation, submission handling, and success/error states. It's designed to maximize email capture conversions.

Preview

Basic Usage

<template>
  <section class="newsletter-section">
    <NewsletterCard 
      title="Stay Updated"
      description="Get the latest updates and exclusive content delivered to your inbox."
      @subscribe="handleSubscription"
    />
  </section>
</template>

<script setup lang="ts">
const handleSubscription = (email) => {
  // Handle newsletter subscription
  console.log('New subscriber:', email)
}
</script>

Features

📧 Email Collection

• Email input with validation
• Real-time format checking
• Duplicate prevention
• GDPR compliance options

🎨 Modern Design

• Clean, attractive card layout
• Responsive design
• Smooth animations
• Visual feedback states

✅ Validation & States

• Email format validation
• Loading states during submission
• Success confirmation
• Error handling and display

🔒 Privacy Focused

• GDPR compliance features
• Privacy policy links
• Consent management
• Unsubscribe options

Component API

Props

Prop	Type	Default	Description
title	string	'Newsletter'	Card title
description	string	''	Description text
placeholder	string	'Enter your email'	Input placeholder
buttonText	string	'Subscribe'	Submit button text
showPrivacy	boolean	true	Show privacy notice

Events

Event	Payload	Description
subscribe	{ email: string }	Email subscription submitted
success	{ email: string }	Subscription successful
error	{ error: Error }	Subscription failed

Styling Variants

Default Card

Clean white card with subtle shadow and modern typography.

Gradient Background

<NewsletterCard 
  class="bg-gradient-to-br from-blue-500 to-purple-600 text-white"
  title="Join Our Community"
/>

Compact Version

<NewsletterCard 
  compact
  title="Quick Subscribe"
  :show-privacy="false"
/>

Form Validation

Email Validation Rules

• Required field validation
• Email format verification
• Domain validation (optional)
• Disposable email detection

Error States

• Invalid email format
• Required field missing
• Subscription already exists
• Network/server errors

Integration Examples

With Email Service

<script setup lang="ts">
const { $fetch } = useNuxtApp()
const toast = useToast()

const handleSubscription = async (email) => {
  try {
    const response = await $fetch('/api/newsletter/subscribe', {
      method: 'POST',
      body: { email }
    })
    
    toast.success('Successfully subscribed!', 'Welcome to our newsletter.')
  } catch (error) {
    toast.error('Subscription failed', 'Please try again later.')
  }
}
</script>

<template>
  <NewsletterCard 
    @subscribe="handleSubscription"
    @success="trackConversion"
    @error="trackError"
  />
</template>

With Analytics Tracking

<script setup lang="ts">
const trackConversion = (email) => {
  gtag('event', 'newsletter_subscribe', {
    event_category: 'engagement',
    event_label: 'newsletter_signup',
    value: 1
  })
}

const trackError = (error) => {
  gtag('event', 'newsletter_error', {
    event_category: 'error',
    event_label: error.message
  })
}
</script>

Multiple Newsletter Options

<template>
  <div class="newsletter-options">
    <NewsletterCard 
      title="Weekly Updates"
      description="Product updates and company news"
      @subscribe="(email) => subscribe(email, 'weekly')"
    />
    
    <NewsletterCard 
      title="Developer Newsletter"
      description="Technical content and tutorials"
      @subscribe="(email) => subscribe(email, 'developer')"
    />
  </div>
</template>

Accessibility Features

Screen Reader Support

• Proper form labels
• Error message announcements
• Success confirmations
• Loading state indicators

Keyboard Navigation

• Tab order through form elements
• Enter key submission
• Focus management
• Skip links where appropriate

GDPR Compliance

Privacy Features

<NewsletterCard 
  :show-privacy="true"
  privacy-text="By subscribing, you agree to our Privacy Policy"
  privacy-link="/privacy"
  :require-consent="true"
/>

Consent Management

• Explicit consent checkboxes
• Privacy policy links
• Data usage explanations
• Easy unsubscribe options

Performance Optimization

Lazy Loading

<template>
  <div v-intersect="handleIntersect">
    <NewsletterCard v-if="isVisible" />
  </div>
</template>

Debounced Validation

Email validation with debouncing to reduce API calls and improve performance.

Related Components

• ContactForm - Contact form component
• Button - Submit button styling
• Toast - Success/error notifications