React Newsletter Signup Form

Name: FormFlow
Rating: 4.9 (50 reviews)
Author: FormFlow

A beautiful email signup form for React. Integrates with Mailchimp, ConvertKit, or any email service via webhooks. Includes validation and success animations.

Installation

npm install @formflow.sh/react

Basic Usage

import { NewsletterForm } from '@formflow.sh/react';

function Newsletter() {
  return (
    <NewsletterForm
      apiKey="ff_live_xxx"
      onSuccess={() => console.log('Subscribed!')}
    />
  );
}

With Name Field

<NewsletterForm
  apiKey="ff_live_xxx"
  showNameField={true}
  buttonText="Join the list"
/>

Props

Prop	Type	Default	Description
`apiKey`	string	-	Your FormFlow API key
`showNameField`	boolean	false	Show optional name field
`buttonText`	string	"Subscribe"	Submit button label
`placeholder`	string	"Enter your email"	Email input placeholder
`theme`	"minimal" \| "modern" \| "brutalist" \| "glass"	"minimal"	Visual theme
`onSuccess`	(data) => void	-	Called after successful subscription

Mailchimp Integration

Connect your Mailchimp account in the FormFlow dashboard to automatically add subscribers to your list:

Go to Dashboard → Settings
Add your Mailchimp API key and list ID
New subscribers are automatically added to your Mailchimp audience

No code changes needed! Once connected, all newsletter submissions are automatically synced to Mailchimp.

Inline Layout

<NewsletterForm
  apiKey="ff_live_xxx"
  layout="inline"
  className="max-w-md"
/>

Custom Webhook

Send subscribers to ConvertKit, Buttondown, or any other service using webhooks. Configure in your dashboard under Form Settings → Webhooks.

Features

Email validation - Client and server-side
Duplicate detection - Prevents duplicate signups
Mailchimp sync - Automatic subscriber sync
Webhook support - Connect any email service
Success animation - Satisfying confirmation

ContactForm - Full contact form
Webhooks - Connect to any service