Lead Generation Form

A pre-built, production-ready lead generation form component for Next.js with Tailwind CSS. Includes Cloudflare Turnstile bot protection, automatic email notifications, and lead tracking.

Features

• ✅ Beautiful Tailwind CSS styling
• ✅ Cloudflare Turnstile bot protection
• ✅ Server-side API key security
• ✅ Automatic email notifications via Resend
• ✅ Lead tracking in Cloudflare D1 database
• ✅ Rate limiting with Upstash Redis
• ✅ TypeScript support
• ✅ Fully customizable

Installation

npm install @nathandavi/lead-gen-form

Prerequisites

1. Deploy the Cloudflare Worker backend (contact Nathan for setup)
2. Get your Turnstile site key from Cloudflare dashboard
3. Ensure your domain is whitelisted in the worker's D1 database

Usage

import { LeadForm } from '@nathandavi/lead-gen-form';

export default function ContactPage() {
  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">Contact Us</h1>

      <LeadForm
        config={{
          workerUrl: 'https://lead-generation-worker.nathandavi100.workers.dev',
          apiKey: process.env.NEXT_PUBLIC_WORKER_API_KEY!,
          clientDomain: 'yourdomain.com',
          clientEmail: '[email protected]',
          turnstileSiteKey: process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!,
          emailSubject: 'New Lead from Website'
        }}
        onSuccess={(leadId) => console.log('Lead submitted:', leadId)}
        onError={(error) => console.error('Error:', error)}
      />
    </div>
  );
}

Environment Variables

Add these to your .env.local:

NEXT_PUBLIC_WORKER_API_KEY=your-worker-api-key
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-turnstile-site-key

License

MIT