Feature
Clean Lead Form
Customizable fields for company name, email, phone, and message with client and server-side validation
Claude-generated alpha starter
Capture Leads Without the Bloat
A simple, GDPR-compliant form that sends leads straight to your existing tools. No expensive subscriptions, no feature overload.
A lightweight, GDPR-compliant lead capture form system for B2B SaaS businesses that collects prospect information and forwards it to existing marketing workflows via SendGrid confirmation emails and Zapier webhooks.
Feature
GDPR Consent Tracking
Explicit opt-in checkbox with recorded timestamp and IP address for EU compliance documentation
Feature
SendGrid Confirmation
Automatic confirmation email sent to leads using your SendGrid account for double opt-in workflows
Feature
Zapier Webhook Push
Every submission POSTs to your Zapier webhook URL for integration with your existing automation stack
Feature
Admin Lead Export
Protected endpoint to download all leads as CSV with consent metadata for your records
Feature
Embeddable Form
Standalone form page that can be embedded via iframe on your marketing site
Architecture
Next.js 15 App Router application with server-side form handling. The system uses a single PostgreSQL table (via Vercel Postgres) to store lead submissions with consent tracking. Form submissions trigger two parallel actions: a SendGrid transactional email for double opt-in confirmation, and a Zapier webhook POST for downstream automation. All data collection includes explicit GDPR consent checkboxes and timestamps. The UI is a single embeddable form page plus a minimal admin view for lead export. No authentication required for form submission; admin routes protected by a simple shared secret for alpha phase.
Core components
Multi-field lead capture form with validationGDPR consent checkbox with timestamp recordingSendGrid integration for confirmation emailsZapier webhook forwarding on submissionAdmin CSV export endpointEmbeddable iframe-ready form variant
Timeline
Foundation
Project setup, database schema, environment configuration, and basic form UI
Form Processing
Server action for form submission, validation, GDPR consent recording, and database storage
Integrations
SendGrid email dispatch and Zapier webhook forwarding on successful submission
Admin & Export
Protected admin route with lead list view and CSV export functionality
Polish & Deploy
Error handling, loading states, mobile responsiveness, and Vercel deployment
API surface
POST /api/leads
Receives form submission, validates data, stores lead, triggers SendGrid email and Zapier webhook
GET /api/leads/export
Returns all leads as CSV file, protected by admin secret header
POST /api/leads/confirm
Handles double opt-in confirmation link clicks from email
GET /api/health
Simple health check endpoint for monitoring uptime
Data model
Lead
id: uuidemail: stringcompanyName: stringcontactName: stringphone: string (optional)message: text (optional)gdprConsent: booleanconsentTimestamp: datetimeipAddress: stringemailConfirmed: booleanconfirmedAt: datetime (optional)createdAt: datetime
Setup
1. Clone repository and run npm install 2. Create Vercel Postgres database from Vercel dashboard 3. Copy .env.example to .env.local and fill in all required variables 4. Run npx prisma db push to create the Lead table 5. Verify SendGrid API key and authenticated sender email 6. Test Zapier webhook URL with a manual POST request 7. Run npm run dev to test locally 8. Deploy to Vercel via git push or vercel CLI 9. Set all environment variables in Vercel project settings 10. Test end-to-end: submit form, check database, verify email received, confirm Zapier trigger
Operator notes
• Verify SendGrid sender email is authenticated before deployment
• Test Zapier webhook with sample payload to confirm field mapping
• Set ADMIN_SECRET to a strong random string, share only with authorized team members
• For iframe embedding, ensure parent domain is added to CSP headers if needed
• Database indexes on email and createdAt fields recommended for export performance
• Consider rate limiting /api/leads in production to prevent spam submissions
Suggested env vars
DATABASE_URL
Vercel Postgres connection string for lead storage
SENDGRID_API_KEY
SendGrid API key for sending confirmation emails
SENDGRID_FROM_EMAIL
Verified sender email address for SendGrid
ZAPIER_WEBHOOK_URL
Your Zapier webhook endpoint URL for lead forwarding
ADMIN_SECRET
Shared secret for protecting admin export endpoint
NEXT_PUBLIC_BASE_URL
Public URL for generating confirmation links in emails
FAQ
How does GDPR compliance work?
Every submission requires an explicit consent checkbox. We record the consent timestamp and IP address, and store this metadata alongside the lead for your compliance records.
Can I customize the form fields?
The alpha includes standard B2B fields. Field customization can be added by modifying the form schema in the codebase.
How do leads get to my other tools?
Each submission triggers a POST to your Zapier webhook URL with the full lead payload. From there, Zapier can route to your CRM, spreadsheet, or any connected app.
What happens if SendGrid or Zapier fails?
Leads are always saved to the database first. Integration failures are logged but don't block storage, so you never lose a lead.
Is there a submission limit?
No artificial limits. Throughput depends on your Vercel plan and database connection limits.