An open collection of form interfaces

Less friction.
Better forms.

From a simple hello to a thoughtful checkout. Explore working interfaces, try the interactions, and make the code your own.

Explore 60 examples

The collection

Accordion Form

Author and publication details organized into collapsible, independently saved sections.

Guided flowsLive preview + code

Airbnb Styled Form

Checkout and booking form pattern inspired by Airbnb with trip summary, cancellation policy, payment schedule toggles, and card management.

Booking & checkoutLive preview + code

Alert Form

An inline notification prompt that expands into a short preferences form.

Feedback & intakeLive preview + code

Auto-save Form

A draft that saves after a short pause and survives a reload in the same browser tab.

Data & toolsLive preview + code

Avatar Onboarding Form

Interactive multi-step onboarding paired with an expressive morphing bot avatar that reacts dynamically to typing, validation, password masking, and completion.

Guided flowsLive preview + code

Bottom Sheet Multi-Step Form

Mobile-first bottom sheet drawer pattern for unobtrusive feedback, quick ratings, and multi-step intake.

Guided flowsLive preview + code

Client-Side Forms in Next.js

Building high-performance, real-time interactive forms with client-side Zod validation and React Hook Form.

Data & toolsLive preview + code

Command Palette Quick-Entry Form

Keyboard-first task and issue intake with micro-chip selectors, shortcut dispatching (⌘+Enter), and live feeds.

Data & toolsLive preview + code

Conditional Logic Form

Dynamically reveal fields, toggle validation schemas, and branch onboarding paths based on real-time user selections.

Guided flowsLive preview + code

Conversational Form

Turn a project intake form into a conversation with one question at a time, quick replies, and an editable answer history.

Guided flowsLive preview + code

Conversational Product Search Form

Natural-language e-commerce search interface with interactive elevated pills, an authentic iPhone frame, recent search replays, and real-time product matching.

Booking & checkoutLive preview + code

Creative Agency Conversational Appointment Form

Warm minimalist agency appointment form with natural-language fill-in-the-blank sentences, underlined input styling, and an executive concierge contact footer.

Guided flowsLive preview + code

Credit Card Checkout Form

Minimalist single-product checkout card featuring formatted card inputs, real-time totals, and smooth submission states.

Booking & checkoutLive preview + code

Drizzle ORM Forms

Lightweight, edge-ready form data mutations with type-safe schema validation and Drizzle ORM.

Data & toolsLive preview + code

E-commerce Checkout Form

Full-featured two-column e-commerce checkout flow with breadcrumb navigation, shipping address fields, order summary, and promo code discounts.

Booking & checkoutLive preview + code

Embark Dynamic Document

Dynamic planning document inspired by Ink & Switch's Embark research project, unifying freeform text notes with structured mentions, live spreadsheet-like formulas, and a coordinated interactive map and schedule canvas.

Data & toolsLive preview + code

Event Booking Form

Multi-step event registration form with vertical timeline stepper, interactive participant range slider, and dynamic step navigation.

Booking & checkoutLive preview + code

Flight Booking Form

Comprehensive travel flight search dashboard featuring trip type selectors, airport swap controls, filter sidebar, and expandable flight itineraries.

Booking & checkoutLive preview + code

Google-style Form

A workshop registration built with TanStack Form and sectioned, Material-inspired fields.

Guided flowsLive preview + code

Grammarly Internal Tool Form

Engineering configuration and experimentation console replicating Grammarly's internal session metadata overrides, segmented feature flag matrices, and conditional LLM model routing selectors.

Data & toolsLive preview + code

Health Form

Mobile-first patient intake questionnaire designed for ER triage with visual symptom checklists and mood assessment tiles.

Feedback & intakeLive preview + code

Hiring Form

A focused job application with portfolio, résumé, and an optional personal note.

Feedback & intakeLive preview + code

Hotel Booking Form

Hotel reservation form featuring multi-step progress badges, property specifications, inline checkmark validation, and sticky pricing breakdown.

Booking & checkoutLive preview + code

Image Upload

Interactive file and image upload pattern featuring drag-and-drop zones, thumbnail previews, upload progress animation, and file validation.

Data & toolsLive preview + code

Indian Wedding Invitation & RSVP Form

Regal Indian wedding card invitation (Shaadi Patrika) with interactive wax seal unsealing, multi-ceremony attendance tracking, dietary protocols, and 60fps GPU-accelerated web animations.

Feedback & intakeLive preview + code

Interactive Pricing Calculator Form

Real-time SaaS plan estimation with seat sliders, add-on toggles, annual discount calculations, and checkout intent.

Booking & checkoutLive preview + code

Media Upload

A file collection interface for images, video, audio, and documents.

Data & toolsLive preview + code

Multi-step Form

Personal details and address fields split into validated steps with a progress indicator.

Guided flowsLive preview + code

Multilingual Form

Switch languages while completing a localized contact form.

Data & toolsLive preview + code

Natural Language Form

Collect a structured project brief through editable sentences with inline inputs and dropdowns.

Guided flowsLive preview + code

Next.js Server Actions

Implementing type-safe, progressively enhanced forms powered by React 19 and Next.js Server Actions.

Data & toolsLive preview + code

Onboarding Experience

Dark-mode multi-step product publishing and catalog onboarding flow with live synchronized product previews.

Guided flowsLive preview + code

One-question Form

A focused, keyboard-friendly flow with smooth scrolling between questions.

Guided flowsLive preview + code

Orfactor Agency Contact Form

Modern creative studio project inquiry interface featuring minimalist underline inputs, italic typography, budget tier selector chips, handcrafted vector paper airplane illustration, and a vibrant emerald backdrop.

Feedback & intakeLive preview + code

OTP & Two-Factor Verification Form

6-digit authentication code input with paste handling, slot grouping, resend cooldown timer, and auto-submit.

Account & accessLive preview + code

Password Reset Form

A focused recovery request with email validation and confirmation feedback.

Account & accessLive preview + code

Persistent Draft Form

A project notebook that restores its draft from local browser storage.

Data & toolsLive preview + code

Prisma ORM Forms

Type-safe database mutations, nested relations, and error mapping with Prisma Client in Next.js.

Data & toolsLive preview + code

Progress Indicator Form

A three-step onboarding form with clear progress, validation, and a completion state.

Guided flowsLive preview + code

Progress Pills Focus Form

Mobile health intake and symptom assessment interface featuring a horizontal progress pills tracker with active sub-step counters, dual-weight question typography, and spacious radio option cards.

Guided flowsLive preview + code

Promotional Performance Configuration Form

Multi-step SaaS analytics form with a floating step navigator, tokenized metric selection, hashtag category filters, and a real-time indicators counter.

Data & toolsLive preview + code

React Hook Form Registration

A complete account form with password confirmation and inline validation.

Data & toolsLive preview + code

reCAPTCHA Contact Form

A contact form with accessible fields and a Google reCAPTCHA verification step.

Account & accessLive preview + code

Registration Form

An account creation interface with password confirmation and a newsletter option.

Account & accessLive preview + code

Review Form

Comprehensive product review submission pattern with interactive star ratings, feature sliders, pros tags, and verification badges.

Feedback & intakeLive preview + code

Schema-driven Form

Generate a contact form from a reusable React Hook Form field configuration.

Data & toolsLive preview + code

Shadcn Form Sign in

Account & accessLive preview + code

Sidebar Form

A multi-step onboarding and entity registration form featuring a dedicated sidebar stepper, state navigation, and inline validation.

Guided flowsLive preview + code

Stackable Form

Layered cards give a short onboarding flow a tangible sense of progress.

Guided flowsLive preview + code

Stepper Dialog Form

SaaS onboarding checklist with dynamic completion percentage and an interactive multi-step modal dialog.

Guided flowsLive preview + code

Supabase Forms in Next.js

Connecting React forms to Supabase Postgres with @supabase/ssr, Row Level Security, and real-time synchronization.

Data & toolsLive preview + code

Survey Form

Customer satisfaction and NPS survey pattern featuring a 0-10 rating scale, role selectors, and structured feedback collection.

Feedback & intakeLive preview + code

Swipeable Form

Engaging card-based questionnaire utilizing motion transitions and swipe gestures for intuitive binary feedback.

Guided flowsLive preview + code

Swiss Design Conversational Form

Modern citizen intake form fusing International Typographic Style, natural language fill-in-the-blank sentences, multi-step process navigation, and a reactive avatar companion.

Guided flowsLive preview + code

Tabbed Settings Form

Profile and security settings organized into tabs with local save feedback.

Account & accessLive preview + code

TanStack Contact Form

Typed fields, visible validation, and a compact workspace introduction.

Data & toolsLive preview + code

TanStack Form Fields

Compose typed fields and validation into a reusable form foundation.

Data & toolsLive preview + code

Turnstile Verification Form

A contact interface with verification, disabled-submit, and completion states.

Account & accessLive preview + code

URL State Form

Encode sample answers in a shareable URL and restore them when opening the link.

Data & toolsLive preview + code

View Transition Form

A short onboarding flow that uses the browser View Transition API when available.

Guided flowsLive preview + code

Less friction.Better forms.

The collection

Accordion Form

Airbnb Styled Form

Alert Form

Auto-save Form

Avatar Onboarding Form

Bottom Sheet Multi-Step Form

Client-Side Forms in Next.js

Command Palette Quick-Entry Form

Conditional Logic Form

Conversational Form

Conversational Product Search Form

Creative Agency Conversational Appointment Form

Credit Card Checkout Form

Drizzle ORM Forms

E-commerce Checkout Form

Embark Dynamic Document

Event Booking Form

Flight Booking Form

Google-style Form

Grammarly Internal Tool Form

Health Form

Hiring Form

Hotel Booking Form

Image Upload

Indian Wedding Invitation & RSVP Form

Interactive Pricing Calculator Form

Media Upload

Multi-step Form

Multilingual Form

Natural Language Form

Next.js Server Actions

Onboarding Experience

One-question Form

Orfactor Agency Contact Form

OTP & Two-Factor Verification Form

Password Reset Form

Persistent Draft Form

Prisma ORM Forms

Progress Indicator Form

Progress Pills Focus Form

Promotional Performance Configuration Form

React Hook Form Registration

reCAPTCHA Contact Form

Registration Form

Review Form

Schema-driven Form

Shadcn Form Sign in

Sidebar Form

Stackable Form

Stepper Dialog Form

Supabase Forms in Next.js

Survey Form

Swipeable Form

Swiss Design Conversational Form

Tabbed Settings Form

TanStack Contact Form

TanStack Form Fields

Turnstile Verification Form

URL State Form

View Transition Form

Less friction.
Better forms.