Medium Websites system

Two-Step Lead Intake Page

A conversion-focused lead capture page where a Next.js Server Action validates and rate-limits submissions, writes to Supabase via the service-role client only on the server, and gates spam with Turnstile — collecting just enough context to route the lead without scaring people off.

HMX Zone
Supabase (service-role)

Verified HMX-owned system

System facts

Two-Step Lead Intake Page uses a web app route, data, and conversion layer for Full-Stack Websites. A conversion-focused lead capture page where a Next.js Server Action validates and rate-limits submissions, writes to Supabase via the service-role... The architecture connects a 2-step form that, next, supabase, and lead capture with an explicit control path.

Outcome

Minutes-not-days lead-to-owner routing with clean, deduped records and no exposed write credentials in the browser.

Main risk

Bots or replayed submissions flood the table, or a validation gap lets malformed data through.

Prevention

Server-side Turnstile verification plus Zod schema validation and KV rate limiting before any DB write.

Fallback

If Turnstile or KV is unavailable, fall back to in-memory limiting and queue suspect rows for manual review.

System architecture

Two-Step Lead Intake Page Architecture

6 nodes
a 2-step form that
Submit through a Server
Next
Supabase
Fallback Path
Lead Capture
  1. 01a 2-step form that

    A conversion-focused lead capture page where a Next.js Server Action validates and rate-limits submissions, writes to Supabase via the service-role...

  2. 02Submit through a Server

    Submit through a Server Action that validates with Zod and verifies a Cloudflare Turnstile token server-side

  3. 03Next

    Next.js Server Actions supports the route, form, or data boundary for Two-Step Lead Intake Page so public UX and backend state stay connected.

  4. 04Supabase

    Insert into the Supabase leads table using the server-only service-role client, never an anon browser write

  5. 05Fallback Path

    If Turnstile or KV is unavailable, fall back to in-memory limiting and queue suspect rows for manual review.

  6. 06Lead Capture

    Minutes-not-days lead-to-owner routing with clean, deduped records and no exposed write credentials in the browser.

4-7 days

How it is built

A conversion-focused lead capture page where a Next.js Server Action validates and rate-limits submissions, writes to Supabase via the service-role client only on the server, and gates spam with Turnstile — collecting just enough context to route the lead without scaring people off.

  1. 01Build a 2-step form (intent + contact) that partial-saves to localStorage so progress survives a refresh
  2. 02Submit through a Server Action that validates with Zod and verifies a Cloudflare Turnstile token server-side
  3. 03Insert into the Supabase leads table using the server-only service-role client, never an anon browser write
  4. 04Rate-limit by IP via Upstash/Vercel KV with an in-memory fallback, then return a typed success/error state

Tools

Workflow surface

  • Next.js Server Actions
  • Supabase (service-role)
  • Cloudflare Turnstile
  • Zod
  • Upstash KV
  • Experience layer: Build a 2-step form (intent + contact) that partial-saves to localStorage so progress survives a refresh
  • Server layer: Submit through a Server Action that validates with Zod and verifies a Cloudflare Turnstile token server-side
  • Database layer: Next.js Server Actions supports the route, form, or data boundary for Two-Step Lead Intake Page so public UX and backend state stay connected.
  • Automation layer: Supabase (service-role) handles routine steps while server-side Turnstile verification plus Zod schema validation and KV rate limiting before any DB write.
  • Measurement layer: Minutes-not-days lead-to-owner routing with clean, deduped records and no exposed write credentials in the browser.

Data flow

  1. 01Build a 2-step form (intent + contact) that partial-saves to localStorage so progress survives a refresh
  2. 02Submit through a Server Action that validates with Zod and verifies a Cloudflare Turnstile token server-side
  3. 03Insert into the Supabase leads table using the server-only service-role client, never an anon browser write
  4. 04Rate-limit by IP via Upstash/Vercel KV with an in-memory fallback, then return a typed success/error state

Controls and fallbacks

  • Bots or replayed submissions flood the table, or a validation gap lets malformed data through.
  • Server-side Turnstile verification plus Zod schema validation and KV rate limiting before any DB write.
  • If Turnstile or KV is unavailable, fall back to in-memory limiting and queue suspect rows for manual review.

System path inside the website build

Full-stack websites for service businesses and operators: route architecture, service pages, lead capture, metadata, proof boundaries, blog/database paths, analytics, and deployment checks.

Route map

Service architecture

Clear service routes

01active
Progress72%

Lead capture

Form and context flow

Lead capture that saves context

02active
Progress86%

Public metadata

SEO and schema layer

SEO and schema on public pages

03active
Progress64%

Launch QA

Analytics and deployment checks

Analytics events tied to CTAs

04active
Progress91%

Build this system around your real handoffs.

All systems operational
HMX Zone
(c) 2026 HMX Zone