143
AI ready

Multi-Step Form Website Template

£29 View live demo or the whole Vault, £79.20

Six working form flows drawn like printed forms, in one cobalt ink on paper: a sign-up you fill in as a sentence with an email code, a six-step application with check your answers, a booking calendar, a checkout, a routed contact form and account settings. Worked example: an open wood and metal workshop in Sheffield.

ScrollTrigger advanced
12 more details
form-validationform-animationkeyboard-navigationfocus-managementstate-transitioncount-updialog-animationtheme-switchtabsscroll-revealstaggerprogressive-enhancement
Open Multi-Step Form template in new tab

Released

About this template

A set of real form flows to drop into a product or a site: sign-up and onboarding, a multi-step application, a booking, a checkout, a contact form and account settings. Every one validates, explains its errors at the top and beside the field, and ends in a designed confirmation. The look is a printed form: square boxes, rules and labels in one cobalt ink on warm paper, form numbers on every page, and the visitor's own answers set in black.

Read the full template overview

The home page makes the sign-up the hero. Visitors fill in a sentence at display size, pick a shop from ruled boxes inside it, enter a six-digit code in a comb of boxes, choose what they will make, and get a stamped member number. Beside it, an office record fills in live as they type. The application runs in six steps with a progress rail, an under-18 guardian branch, a plan picker whose prices follow a monthly or yearly switch, a signature pad and a check-your-answers page whose Change links return to the exact field.

Booking pairs a keyboard-operable calendar with time slots, places left and a group stepper, and a ticket that fills in as you choose. Checkout has an editable basket with undo, a promo code, collection or post with an address finder, card number formatting and checks, and a stamped receipt. Contact asks different questions for each topic and takes attachments. Account settings cover profile, plan, pause, notification switches, a saved card, password strength and two-step sign-in, with an unsaved-changes bar.

A components page shows every building block live in each of its states, with an index and search. The worked example is Furnace Hill Workshop, an open-access wood and metal workshop in Sheffield; change the copy, the ink colour and the photographs to make it a SaaS sign-up, a club, a clinic or a shop.

Multi-Step Form - website template preview

What's included

11 items
  • Six working forms plus a UI elements page: join, membership application, booking, checkout, contact and account settings, on one stylesheet and one script
  • Sentence sign-up at display size with inline blanks and shop boxes, a six-digit code comb with paste and resend timer, onboarding chips and a stamped member number; an office record fills in live
  • Six-step application with a progress rail, error summary, under-18 guardian fields, monthly or yearly plan prices, a machine checklist, a counted text box, a signature pad with a typed alternative and check your answers with Change links back to the field
  • Answers kept on the device as a draft and restored with a banner, so the application survives a reload
  • Booking calendar with arrow, Home, End and Page keys, closed and full days, time slots with places left, a group stepper limited by the slot, member pricing and a ticket that fills as you choose, plus a calendar file
  • Checkout with quantity steppers, remove and undo, an empty basket state, a promo code, collection or post with an address finder, card brand detection, Luhn and expiry checks, and a stamped receipt
  • Contact form routed by topic: hire, teach and fault reports each ask their own questions; reply by phone adds a number; attachments are checked for type, size and count
  • Account settings with tabs linked to the address bar, an unsaved-changes bar with discard, membership pause, notification switches, a replace-card dialog, password rules and strength, two-step sign-in and type-to-confirm deletion
  • Designed phone navigation: a Forms sheet listing every form by number, with focus kept inside and Escape to close
  • Light and dark themes on the same token names with measured contrast pairs; plain page loads with a cross-document view transition
  • Every form works with reduced motion, without the animation library and without JavaScript; self-hosted Newsreader and Schibsted Grotesk

Perfect for

5 use cases
  • SaaS sign-up and onboarding flows
  • Membership, club and course applications
  • Checkout and order forms
  • Booking and appointment forms
  • Contact and enquiry forms

How it works

5 sections

Printed-form furniture

Every box, rule, label and button is drawn in one spot colour token, and what the visitor types is set in the ink colour. Change the spot token for light and dark and the whole set of forms follows. Square corners and a single rule weight carry the look, so new fields need no extra styling.

One validation layer

Fields are marked up as ordinary native inputs inside a wrapper that names its messages: required, invalid, too short, too long, in the past. On Continue or Send the page checks only the visible questions, lists every problem in a summary that links to the field, and marks each field beside its label. Errors clear as soon as the answer is fixed rather than while someone is still typing.

Steps and branches

Multi-step pages are sections of one form shown a step at a time, so without JavaScript they become one long form that still posts. Conditional questions are shown and enabled by the answer they depend on, and hidden questions are disabled so they are never checked or sent.

Live summaries

The office record, booking ticket, basket totals and check-your-answers page are written from the form's own values as they change, so they always agree with what has been entered. Totals count from their previous value and changed lines flash briefly.

Keyboard and fallbacks

Everything is a native control: radios, checkboxes, buttons and dialogs. The calendar moves with the arrow keys, tabs with left and right, the code comb steps between boxes, and dialogs and the phone sheet keep focus inside and return it on close. Motion only plays when the animation library is present and reduced motion is off; otherwise every change happens instantly.

Plugins ScrollTrigger
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (7 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Do the forms send anything?

No. They are complete front ends that validate and show a confirmation, but nothing leaves the browser. The sign-up collects a name, shop and email; the application, booking, contact and checkout collect what their fields show. Point each form's action at Formspree, Netlify Forms, your own API or your CRM, and call your endpoint where the script currently shows the success panel.

Can I take real payments with the checkout?

Not as it stands. The card fields format and check the number, expiry and security code, then show a receipt, but nothing is charged. For real payments replace the card fields with your payment provider's hosted fields or redirect to its checkout, and keep the basket, promo code, delivery choice and receipt layout around it.

Does it only suit a workshop?

No. The flows are the common ones every product needs: a sign-up with email verification, a multi-step application, a booking calendar, a checkout, a contact form and account settings. Rename the questions and options, swap the cobalt for your brand colour and the photographs for your own, and it becomes a SaaS onboarding, a gym or club membership, a clinic booking or a shop checkout.

How do I add or remove a step in the application?

Each step is a section inside the one form with a step name, and the progress rail has one button per step. Copy a section, give it a new name and heading, add a matching rail button, and the Continue, Back and Change links work with it. The check-your-answers rows are listed in one function in the script, so add the new questions there too.

Is the email code or booking availability real?

No. The six-digit code is fixed in the script for the demo, and the calendar's open, closed and full days and the places left in each slot are worked out from the date so the demo looks the same on every visit. Replace the availability function with a call to your booking system, and the code check with your sign-up provider's verification.

What is the components page for?

It shows every building block of the forms working, in each state: fields with hints and errors, the code comb, choice boxes, steppers, the calendar, file drop, password strength, dialogs, toasts and confirmation panels, with their class names. Use it to build new forms from parts that already behave correctly, or delete it from a finished site.

Paid template

Purchase to unlock the code.

Buying Multi-Step Form opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

Static files, no build step. Serve the folder with any static server and open index.html:

Code snippet omitted: it ships with the download.

Each page loads, in this order:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

  • Colour is a token block at the top of assets/style.css, restated under :root[data-theme="dark"] with the same names. --spot draws every box, rule, label, link and button; change it (and --spot-rgb, --spot-strong) first. --ink is what visitors type. --error, --success and the --highlight focus band keep their meanings.
  • Type: Newsreader for headings, ledes and the hero sentence (--font-display), Schibsted Grotesk for labels, inputs and buttons (--font-ui).
  • Brand: the wordmark is two joined boxes in the header (.wordmark-name and .wordmark-tag); replace the text, or swap in your logo.
  • Form numbers (.form-no) are part of the look. Rename them, or delete the element from each page head if your product does not number its forms.
  • Photographs sit in ruled frames (.photo-frame); any 4:5 or 3:2 image works.
  • Controls that need JavaScript carry data-js-only and hide on a plain document; their plain fallbacks carry data-nojs-only.

Pages and Configuration

Fields and messages

A question is a wrapper with data-field around a native control, its label, an optional .field-hint and a .field-error:

Code snippet omitted: it ships with the download.

  • Messages come from data-error-required, -invalid, -short (textarea minlength), -long (textarea data-max), -range (number min/max), -future and -past.
  • data-check names a custom check: phone, phone-optional, postcode, dob (three boxes), code (comb), card, expiry, cvc, start, future-date, member, url-optional, signature, booking-date, pw-new, pw-match. They live in checkField() in the script.
  • A group of radios or checkboxes uses data-group="name", with data-min for how many must be ticked.
  • A form with data-validate gets the designed messages instead of browser bubbles. Its [data-error-summary] lists every problem as a link to the field.

Conditional questions

data-show-when="name=value" shows a block when that control has that value, for radios, checkboxes (pause=on) and selects. Hidden blocks disable their inputs, so they are neither checked nor sent. Without JavaScript every block shows.

FH1 Join

Panels are [data-join-panel]: details, verify, about, done. Inputs with data-office="name" write into [data-office-field="name"] in the member record. The demo code is DEMO_CODE at the top of the script; replace that check with your sign-up provider's verification.

FH2 Application

Steps are section[data-step] inside one form; the rail has one button per step. To add a step, copy a section, add a rail button and add its rows to buildAnswers(). Answers are saved to localStorage under the form's data-draft key and restored with a banner; remove the attribute to turn drafts off.

FH3 Booking

Each induction radio carries data-length, data-price and data-days (weekday numbers, 0 is Sunday). Availability comes from dayStatus() and slotsFor(); replace them with calls to your booking system. A valid member number (FH- and four digits) makes the booking free. Add to calendar builds an .ics file in the browser.

FH4 Checkout

Basket lines are [data-item] with data-price, data-qty, data-max and data-kind (course or material; post is offered only when a material is in the basket). Promo codes are PROMO_CODES and postage is POSTAGE at the top of the script. The address finder returns four sample addresses for any valid postcode; point it at your address lookup API.

FH5 Contact

Topic answers are in the copy table in initContact(). The file drop takes data-max-files and data-max-mb and accepts JPG, PNG and PDF.

FH6 Account settings

Every control with data-track counts towards the unsaved-changes bar. Tabs are linked to the address bar, so account.html#security opens Security. Dialogs are native <dialog> elements opened by data-dialog-open="id".

Phone navigation

Below 1140px the link row becomes a Forms button that opens a sheet listing every form by number. Without JavaScript the button is a link to the footer, which lists every page.

Front end only

Nothing is sent. Each form ends by showing its confirmation in the script's submit handler (submitHandlers.set(form, ...)). Post the form's data to Formspree, Netlify Forms, your API or CRM there, and show the confirmation when it answers. Use a payment provider's hosted fields in place of the card inputs.

Palette

Token Light Dark Use
--ground #F1EEE6 #10121B Page
--sheet #FAF8F3 #171A26 Form sheets, inputs, tickets
--ink #17171C #EEEBE2 Answers and body text
--spot #2337C6 #9DA9FF Boxes, rules, labels, buttons, bands
--error #B42318 #FF8F80 Errors only
--success #1D6B3F #73D69C Success only
--highlight #FFD84A #FFD84A Focus band, always behind ink

Measured contrast pairs are recorded in the first comment of assets/style.css.

Images

Photographs are baked WebP derivatives in assets/img/, made from Pexels originals (Pexels licence) listed in assets/img-manifest.json: photos 7484164, 6790760, 6790027, 7483054, 3716681, 3158651 and 5466146. Replace a file with your own at the same name and size, or edit the manifest and regenerate.

Accessibility

  • Every control is native: inputs, radios, checkboxes, buttons, <dialog>. Custom-looking boxes are styled native inputs.
  • Errors are listed in a focused summary with links to each field, and repeated beside the field with aria-invalid and aria-describedby.
  • The calendar is a grid with roving focus: arrows, Home, End, Page Up and Page Down. Tabs move with the arrow keys. The code comb moves between boxes and accepts a pasted code.
  • The signature pad has a typed alternative. Focus moves to each new step's heading; the ring shows only for keyboard use.
  • Dialogs and the phone sheet keep focus inside, close on Escape and return focus to their trigger.
  • Reduced motion keeps every interaction and makes changes instantly. Without the animation library the forms still work; without JavaScript, steps stack into one form and conditional questions all show.

Dependencies

  • GSAP core for motion, plus ScrollTrigger on the home page. Demo built against 3.15.0; works with 3.12+. Optional: the forms work if it fails to load.
  • Newsreader and Schibsted Grotesk, self-hosted in assets/fonts/ (latin, variable weights). SIL Open Font License; see assets/fonts/OFL.txt.
  • No Lenis: form pages scroll natively.

Teardown

Pages are ordinary page loads, so there is nothing to tear down between them. The home page reveals live in one GSAP context (window.gsapContext), reverted on pagehide or by calling window.gsapContext.revert(). Other tweens are short and finish on their own.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.