Live Form Examples

Forms built with Claude

Six complete, working forms — a multi-step wizard, a one-question-at-a-time flow, a checkout, a restaurant booking, a signup and a product survey. Every one designed and built by Claude in a single conversation, with the validation, formatting and micro-interaction hand-written. No form builder, no plugin. This is what the Claude website builder puts inside the pages it builds.

Six forms, six interaction patterns, one builder

Each preview below is the real form running live — not a screenshot. Type in them, tab through them, get things wrong on purpose: the validation, auto-formatting and animation are all part of the single HTML file Claude wrote.

Atelier — Project Brief

01

Multi-step intake wizard — four validated steps, a dark summary rail that fills in live, a review-and-edit screen and an animated confirmation.

Multi-stepWizard

Don’t Make Me Think

02

One question per screen — sliding stages marked at the top, auto-advancing choices, letter hotkeys and an email typo fixer. Enter does everything.

Multi-stepStaged

Nebula — Checkout

03

Dark payment form — a 3D card that fills in as you type and flips for the security code, with Luhn validation, brand detection and a working promo code.

CheckoutDark

Maison Lumière — Reserve

04

Restaurant reservation — a hand-built calendar, availability-aware time slots and a live ticket stub that stamps CONFIRMED when you book.

BookingEditorial

Mochi — Create Account

05

Playful signup — a mascot that watches you type and covers its eyes for the password, plus a strength meter and a live username check.

SignupPlayful

Pulse — Feedback

06

Product survey — an 11-point NPS scale, emoji moods, star rating, a bubble slider, chips, a character-count ring and confetti on submit.

SurveyVibrant

What these six forms demonstrate

Every form on this page is one self-contained HTML file with no frameworks and no form-builder plugin. Claude writes the markup, styling, validation and interaction logic directly, so the same patterns drop straight into any page it builds for you.

Multi-step logic. The project-brief wizard splits a long form into four validated steps with a persistent summary rail and a review-and-edit screen — the pattern that lifts completion on long forms.

One thing at a time. “Don’t Make Me Think” shows one question per screen with staged slides, auto-advancing choices, keyboard hotkeys and an email typo fixer — Typeform-style, in one file.

Payment UX. The checkout formats card numbers as you type, detects Visa, Mastercard and Amex, validates with the Luhn checksum and flips a 3D card when you reach the security code.

Scheduling. The reservation form draws its own calendar, strikes out fully-booked days, offers only available time slots and prints a live ticket that stamps when you confirm.

Micro-interaction. The signup’s mascot reacts to every field — it watches you type and covers its eyes for the password — while a meter scores password strength live.

Survey widgets. The feedback form is a component zoo: an 11-point NPS scale, emoji moods, star ratings, a slider with a value bubble, multi-select chips and a character-count ring.

Your forms could work like this

Every form above started as a sentence. Describe the form your site needs — a quote wizard, a booking flow, a signup — and Claude designs it, builds it and wires it into your site, live on your own hosting from £6.99/month.