Due to their capacity to enhance user experience and boost conversion rate, multi step HTML forms have grown in popularity. This post will provide you with 41 multi-step HTML forms that will improve the usability of your website and increase conversion rates.
We’ve created a collection of multistep HTML forms that will help you build web forms. Get started today! Updated with 3 new items on Mar 07, 2023
Pure CSS Steps
The “Step By Step” pattern is usually 100% developed with JavaScript but you can use CSS too.
Author: Rafael González · Made with: HTML / SCSS · Created: December 21, 2015 · Updated: December 21, 2015
Step By Step Form
Author: DevTips · Made with: Pug / Sass / JS · Created: August 19, 2016 · Updated: August 22, 2016 · Dependency: jquery.js
Step by step register form
CSS step-by-step register form.
Author: Jerome Renders · Made with: Pug / Sass / JS · Created: December 28, 2015 · Updated: January 6, 2017
Step by step form
Author: Jonathan H, February 19, 2017 · Made with: HTML / CSS / JavaScript · Dependency: angular.min.js
Step By Step Form
Author: DevTips, August 22, 2016 · Made with: Pug / SCSS / JavaScript · Dependency: jquery-2.2.4.min.js
CSS only order process steps
Author: Jamie Coulter, August 9, 2017 · Made with: Haml / SCSS
Input form with progress bar
Author: Carlin Scuderi, May 9, 2016 · Made with: HTML / SCSS / JavaScript · Dependency: jquery.min.js
Step by Step Form Interaction
Author: Bhakti Pasaribu, March 4, 2016 · Made with: HTML / CSS / JavaScript · Dependency: jquery.min.js, index.js
Interactive Form
Author: Rosa, September 17, 2018 · Made with: HTML / CSS / JavaScript · Dependency: jquery.min.js
Material Bootstrap Wizard
Author: Creative Tim, September 12, 2016 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.min.css, jquery.min.js, bootstrap.min.js
Bootstrap MultiStep Form
Author: Petia, April 5, 2017 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.min.css, JS – jquery.min.js, bootstrap.min.js, jquery.easing.min.js
steps jquery form with Icons
Author: MAHESH AMBURE, July 13, 2018 · Made with: HTML / CSS / JavaScript · Dependency: font-awesome.min.css, jquery.min.js, jquery.easing.min.js
Step by step register form
Author: Jerome Renders, January 6, 2017 · Made with: Pug / Sass / JavaScript
Multi Step Form with Progress Bar using jQuery and CSS3
Author: Atakan Goktepe, March 17, 2016 · Made with: HTML / CSS / JavaScript · Dependency: jquery.min.js, jquery.easing.min.js
Multi Step Form using semantic-ui
Author: KEYUR PARALKAR, August 9, 2016 · Made with: HTML / CSS / JavaScript · Dependency: semantic.min.css, font=Lobster, jquery.min.js, semantic.min.js
AngularJS 1.5.x Multi-Step Form
Author: Josh A, April 26, 2017 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.min.css, angular.min.js, angular-animate.min.js
Multi step form
Author: Hélio Marcondes, October 20, 2014 · Made with: HTML / CSS / JavaScript · Dependency: jquery.min.js
Multi-Step Form with CSS Only
Author: Mike Doubintchik, March 25, 2016 · Made with: HTML / SCSS · Dependency: bootstrap.min.css, allure.js
React Multi-Step Form
Author: Tommy Marshall, January 13, 2015 · Made with: HTML / CSS / JavaScript · Dependency: yIgqi.js, react-0.11.1.js, JSXTransformer-0.11.0.js
Multi-step form interface
Author: Emil Devantie Brockdorff, January 8, 2015 · Made with: HTML / Less / JavaScript · Dependency: jquery.min.js
Multi-step form with progress bar
Author: Brendan Sparrow, November 24, 2015 · Made with: HTML / Less / JavaScript
Multi Step Form with Progress Bar using jQuery and CSS3
Author: Daniel Ramos, April 9, 2014 · Made with: HTML / CSS / JavaScript · Dependency: jquery-1.9.1.min.js, jquery.easing.min.js
Multi Step Form with JS Validation & SPAM Blocker
Author: Wolf Wortmann, June 1, 2015 · Made with: HTML / CSS / JavaScript · Dependency: vtcha.min.css, sweet-alert.css, jquery.vtcha.bundle.min.js, sweet-alert.min.js
Bootstrap 4 Multi-Step Form
Author: Thumper, June 7, 2018 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.min.css, font-awesome.min.css, animate.min.css, jquery.min.js, popper.min.js, bootstrap.min.js, jquery.easing.min.js
Multi-Step Form UI
Author: Ryan Irilli, April 22, 2014 · Made with: Haml / SCSS / JavaScript · Dependency: style.min.css, jquery.min.js(v2.1.3)
Multi Step Form with Vanilla JS
Author: Difan, December 7, 2016 · Made with: HTML / CSS / JavaScript
Multistep Form – Parsley Validating
Author: ali, January 15, 2016 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.css(v2.2.0), docs.css(v2.2.0), parsley.css(v2.2.0), jquery-2.1.3.js, parsley.js(v2.2.0)
interview form
Author: Ilya Gerasimenko, January 25, 2016 · Made with: HTML / CSS / JavaScript
Multi Step Form with Bourbon
Author: Momanyi Samuel, September 1, 2016 · Made with: Pug / Sass / JavaScript · Dependency: jquery-2.2.4.min.js
Slide Animation | Multiple Paths Form POC
Author: Flor Antara, June 23, 2019 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.min.css(3.0.3), jquery.min.js(3.1.0)
Multi-step form with FE validations
Author: Daniel Hinds-Bond, January 3, 2018 · Made with: HTML / SCSS / JavaScript · Dependency: font-awesome.min.css(v4.5.0), jquery.min.js(v3.2.1), angular.min.js(v1.6.5)
Multi Form by toggling visible fieldsets
Author: Kyle B. Johnson, August 19, 2014 · Made with: HTML / SCSS / JavaScript · Dependency: foundation.min.css, jquery.min.js
multi form
Author: Martin Franek, March 27, 2017 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.min.css, jquery.min.js, bootstrap.min.js
Bootstrap Multi step form with progress bar
Author: Emran Khan, February 3, 2018 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.css (v4.0.0-beta), TelInput.css (v12.1.2), ionicons.min.css (v2.0.1), nice-select.min.css (1.1.0) jquery.min.js (v3.2.1), bootstrap.min.js (v4.0.0-beta), jquery.easing.min.js (v1.3), intlTelInput.js (v12.1.2), popper.min.js (v1.12.9), jquery.nice-select.min.js (1.1.0)
Multi Step Bootstrap Form with animations
Author: Natalia Davydova, April 14, 2020 · Made with: Pug / SCSS / JavaScript · Dependency: bootstrap.min.css, bootstrap.min.css, jquery.min.js
Multi Step Form with Progress Bar using jQuery and CSS3
Author: Vimalraj, June 11, 2020 · Made with: HTML / CSS / JavaScript
Employee Account | Form Wizard
Author: MAHESH AMBURE, April 1, 2017 · Made with: HTML / CSS / JavaScript
Fundraising Grader
Author: Ty Stelmach, September 29, 2016 · Made with: HTML / CSS / JavaScript · Dependency: jquery.min.js, jquery.easing.min.js, jquery.validate.js
3D Multi Step Form
Author: Coding Artist, December 9, 2019 · Made with: HTML / CSS / JavaScript · Dependency: CSS – font-awesome.min.css, google fonts (Montserrat:300,500|Poppins), google Fonts(Material+Icons) JS – jquery.min.js
Multi-Step Form
Author: Jacob Belanger, May 28, 2018 · Made with: HTML / SCSS / JavaScript · Dependency: jquery.min.js
Multi Step Form with progress bar jQuery and CSS3
Author: webbarks, August 15, 2020 · Made with: HTML / CSS / JavaScript · Dependency: jquery.min.js
Multi-step form
Author: Monica, April 28, 2020 · Made with: HTML / CSS / JavaScript · Dependency: bootstrap.min.css, font-awesome.css, jquery.min.js
Multi Step Form with Vue JS and CSS Animations
Author: Mario Laurich, August 9, 2019 · Made with: HTML / SCSS / JavaScript · Dependency: google fonts (family:Noto+Sans&display=swap), vue.min.js
step by step form (Vanilla JS)
Author: Gwenaël Robert, November 16, 2018 · Made with: HTML / SCSS / JavaScript
