React Newsletter Signup Form

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

Add newsletter signup to your React app in minutes. No backend setup required.

Minimal Newsletter Form

Just an email field and a button. That's all you need:

import { useFormFlow } from '@formflow.sh/react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

export function NewsletterForm() {
  const { register, handleSubmit, formState } = useFormFlow({
    apiKey: process.env.NEXT_PUBLIC_FORMFLOW_API_KEY,
    onSuccess: () => alert('Subscribed! Check your email.'),
  });

  return (
    <form onSubmit={handleSubmit} className="flex gap-2 max-w-md">
      <Input
        {...register('email')}
        type="email"
        placeholder="Enter your email"
        className="flex-1"
        required
      />
      <Button type="submit" disabled={formState.isSubmitting}>
        {formState.isSubmitting ? 'Subscribing...' : 'Subscribe'}
      </Button>
    </form>
  );
}

Newsletter Form with Name Field

Optionally collect names for personalized emails:

import { useFormFlow } from '@formflow.sh/react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';

export function NewsletterForm() {
  const { register, handleSubmit, formState } = useFormFlow({
    apiKey: process.env.NEXT_PUBLIC_FORMFLOW_API_KEY,
    onSuccess: () => alert('Welcome! You\'re now subscribed.'),
  });

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      <div>
        <Label htmlFor="email">Email *</Label>
        <Input
          {...register('email')}
          id="email"
          type="email"
          placeholder="you@example.com"
          required
        />
      </div>

      <div>
        <Label htmlFor="name">Name (optional)</Label>
        <Input
          {...register('name')}
          id="name"
          placeholder="John Doe"
        />
      </div>

      <Button type="submit" disabled={formState.isSubmitting} className="w-full">
        {formState.isSubmitting ? 'Subscribing...' : 'Subscribe to Newsletter'}
      </Button>
    </form>
  );
}

Instant Setup

5 lines of code. No backend. Start collecting emails immediately.

Subscriber Management

View all subscribers in dashboard. Export to CSV for your email service.

Spam Protection

Built-in honeypot and rate limiting. Keep fake signups out.

Perfect For

✓

Blog Subscriptions

Grow your audience with email subscriptions

✓

Product Launches

Build waitlists before launch

✓

Marketing Campaigns

Collect leads for email marketing

✓

Landing Pages

Capture visitors' emails

How It Works

User enters email

Client-side validation ensures valid email format

Submitted to FormFlow backend

Spam filtered, rate limited, securely stored

View in dashboard

Export subscribers to CSV for Mailchimp, ConvertKit, etc.

Export to Your Email Service

FormFlow collects emails. Export them to your favorite email marketing platform:

Mailchimp

ConvertKit

SendGrid

Any CSV Import

Quick Start

npm install @formflow.sh/react

Install the package

Get your free API key from formflow.sh/api-keys

Copy one of the examples above. Replace the API key. Done!

Start growing your email list today

Free tier: 50 subscribers/month. No credit card required.