Building Block

Multi-Step Forms & Wizards

Step-by-step form wizards, animated progress indicators, and PHP session-persistent checkout flows — vanilla HTML/CSS/JS patterns that Claude deploys in a single conversation. No form builders, no subscription fees.

Get started — from £6.99/month All building blocks

Code Patterns

Multi-step form patterns

Three proven patterns covering client-side step navigation, PHP session-backed multi-page forms, and checkout-style wizards with Stripe. Claude generates the full markup, CSS, PHP handlers, and vanilla JS — matched to your theme and deployed live on your server.

Pattern 1 — Client-Side Step Wizard with Progress Bar

A fully client-side multi-step form using <fieldset> sections hidden and revealed by vanilla JS. A horizontal progress bar and numbered step indicators update as the user advances. Each step validates its own fields before allowing forward navigation — no page reloads, no server round-trips until the final submit.

HTML CSS Vanilla JS Accessible No Reload
  • Form split into <fieldset> sections; inactive steps hidden via display:none and revealed with a 200ms fade transition
  • Horizontal progress bar: width: (currentStep / totalSteps * 100)% CSS transition; fills in brand colour
  • Numbered step bubbles above the bar: previous steps show a checkmark ✓, current step pulsing brand-colour ring, future steps muted
  • Per-step validation before advancing: required field check, email format regex, min-length — field-level error messages inline below each input
  • Back/Next buttons on every step; only Submit appears on the final step
  • On final submit: fetch() POST to process.php with full serialised form data; spinner replaces button during request; success/error state replaces entire form
  • prefers-reduced-motion disables all CSS transitions automatically
Prompt to use with Claude

Add a 3-step form wizard to my site. Step 1: Name, Email, Phone. Step 2: Project type (radio), Budget range (select), Timeline (select). Step 3: Message textarea, file upload. Show a progress bar and numbered step indicators. Validate each step before advancing — inline error messages below each field. POST the final form to process.php via fetch. Success state: thank you message. Brand colour: [your hex]. CSS in theme.css, JS in main.js.

Pattern 2 — PHP Session-Persistent Multi-Page Form

A server-side multi-step form where each step submits to PHP and stores validated data in $_SESSION. Users can navigate back without losing data, and the server validates each step independently before advancing. The final step writes all collected data to MySQL and sends an SMTP confirmation email.

PHP MySQL Sessions SMTP Email CSRF
  • Single form.php router: reads $_SESSION['form_step'] to determine which step to render
  • Each step's POST handler validates server-side (PHP type checks, sanitisation, regex), stores clean data in $_SESSION['form_data'], then redirects to next step via header('Location:') (PRG pattern prevents double-submit on refresh)
  • Back navigation: GET request decrements $_SESSION['form_step']; fields pre-filled from session so no data is lost
  • CSRF token generated per session, verified on every POST (hash_equals()), rotated on successful step completion
  • Final step: INSERT into MySQL submissions table, SMTP confirmation to user + notification to admin via PHPMailer, session cleared on success
  • Step progress rendered server-side as an ordered list — crawlable and functional without JavaScript
  • Optional: resume from incomplete submission via email link using a bin2hex(random_bytes(16)) token
Prompt to use with Claude

Build a 4-step PHP session-backed enquiry form. Step 1: contact details (name, email, company). Step 2: service selection (checkboxes). Step 3: project details (textarea, budget select, start date). Step 4: review summary + submit. Validate each step server-side; pre-fill fields on back navigation. On final submit, INSERT to MySQL submissions table and send SMTP emails to user and [admin email]. Include CSRF protection. CSS in theme.css.

Pattern 3 — Checkout-Style Wizard with Stripe Payment

An e-commerce style step wizard that collects customer details, delivery options, and order notes before creating a Stripe Checkout Session on the final step. A sticky summary sidebar shows the order total throughout. The order is saved to MySQL before the Stripe redirect so abandoned checkouts are recoverable.

PHP Stripe MySQL SMTP Responsive
  • Three steps: 1 — Contact & billing details, 2 — Delivery options (PHP-configurable options array with price modifiers), 3 — Order review + pay
  • Sticky right sidebar: product name, quantity, line total, delivery charge, grand total — updates dynamically as delivery option is selected
  • On step 3 submit: PHP saves order to MySQL orders table with status: pending_payment + unique order_ref, then creates Stripe Checkout Session with order_ref in client_reference_id
  • Stripe checkout.session.completed webhook updates order status: paid and triggers SMTP order confirmation to customer + admin
  • Abandoned checkout recovery: admin/orders.php lists pending_payment orders older than 1 hour with customer email and order value
  • Mobile: sticky sidebar collapses to a top bar showing order total; full summary expands on tap; steps stack vertically
  • Single STRIPE_SECRET_KEY constant in config.php switches between test and live mode
Prompt to use with Claude

Build a 3-step checkout wizard. Step 1: name, email, billing address. Step 2: delivery options (Standard £3.99 / Express £7.99 / Free over £50). Step 3: order review with a sticky summary sidebar showing subtotal, delivery, and total. On submit, save the order to MySQL then create a Stripe Checkout Session. Webhook updates order status to paid and sends SMTP confirmation. Admin panel at /admin/orders.php shows pending and paid orders. CSS in theme.css.

What you get

Every multi-step form pattern includes

No form builder fees

No Typeform, no JotForm, no per-submission charges. Claude writes the PHP and JavaScript directly — the form runs on your server and costs nothing beyond your Claude CMS plan.

Server-side validated

Client-side validation catches errors early, but every PHP pattern validates again on the server — prepared statements, CSRF tokens, and htmlspecialchars() throughout. No injection vectors.

Full backend included

MySQL submission logging, SMTP notification emails, and admin views come with every pattern. Claude builds the handler alongside the HTML — not just the front end.

Iterable in seconds

Add a step, reorder fields, change validation rules. Describe the change to Claude and it’s updated on your live site within seconds — no plugin settings panels.

More building blocks

Pair with

Combine multi-step forms with these building blocks for complete user flows.

Payment & Checkout

Stripe Checkout Sessions, subscription billing, and deposit payment flows to wire directly to your final wizard step.

View patterns →

Contact Forms

Simple single-page enquiry forms with PHP handlers, SMTP delivery, and MySQL logging — the single-step companion to wizards.

View patterns →

Authentication & Members

Session-based login and registration flows that integrate naturally with multi-step onboarding wizards.

View patterns →

Deploy your step wizard today

From £6.99/month. First month free — no credit card required.

View pricing All building blocks