Email Form
An interactive email capture form with animated micro-interactions and validation.
Installation
Backend Setup
Your form expects a backend endpoint at /api/newsletter that accepts a POST request with a JSON body.
Example Next.js Route Handler (app/api/newsletter/route.ts):
1import { NextResponse } from "next/server";2 3export async function POST(request: Request) {4 try {5 const { email } = await request.json();6 7 // Basic validation8 if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {9 return NextResponse.json({ error: "Invalid email" }, { status: 400 });10 }11 12 // TODO: Store email in your database or send to newsletter provider13 console.log("New subscriber:", email);14 15 return NextResponse.json({ success: true });16 } catch (error) {17 return NextResponse.json({ error: "Server error" }, { status: 500 });18 }19}
Props
Usage
1"use client";2 3import EmailForm from "@/components/ui/email-form";4 5export default function Page() {6 return (7 <div className="flex min-h-screen items-center justify-center bg-neutral-100 dark:bg-neutral-900">8 <EmailForm />9 </div>10 );11}
Features
✅ "use client" compatible for Next.js 13+
✅ Framer Motion animations with spring transitions
✅ Validation & error handling
✅ Backend-ready API endpoint
✅ Light/Dark mode support
✅ Micro-interactions for sending/loading states