41 Multi step HTML forms

By | October 18, 2017

Handpicked Multistep HTML forms using HTML, CSS, jQuery, Angular Js, and JavaScript. Demo and Download the zip (*.zip). Updated with 14 new items on Jan 08, 2021

Author

  • Jonathan H
  • February 19, 2017

Made with

  • HTML / CSS / JavaScript

About the Code

Step by step form

A take on the codrops version with the possibility to go back and confirm all inputs.

More info: Link

Dependency: angular.min.js

Author

  • Jamie Coulter
  • August 9, 2017

Made with

  • Haml / SCSS

About the Code

CSS only order process steps

It’s been a while. Just a nice process bar here where you can click on the different steps and be presented with information. The box at the top will also animate depending on the steps.

More info: Link

Dependency:

Author

  • Carlin Scuderi
  • May 9, 2016

Made with

  • HTML / SCSS / JavaScript

About the Code

Input form with progress bar

A simple form with floating labels and an animated progress bar.

More info: Link

Dependency: jquery.min.js

Author

  • Bhakti Pasaribu
  • March 4, 2016

Made with

  • HTML / CSS / JavaScript

About the Code

Step by Step Form Interaction

A simple step form for customer experience. The purpose of this form is to get the feedback from user for the store.

More info: Link

Dependency: jquery.min.js, index.js

Author

  • Rosa
  • September 17, 2018

Made with

  • HTML / CSS / JavaScript

About the Code

Interactive Form

An interactive multi step form based on DevTips tutorial

More info: Link

Dependency: jquery.min.js

Author

  • Jerome Renders
  • January 6, 2017

Made with

  • Pug / Sass / JavaScript

About the Code

Step by step register form

More info: Link

Dependency:

Author

  • Atakan Goktepe
  • March 17, 2016

Made with

  • HTML / CSS / JavaScript

About the Code

Multi Step Form with Progress Bar using jQuery and CSS3

Got long forms on your website ? Break them up into smaller logical sections and convert it into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc.

More info: Link

Dependency: jquery.min.js, jquery.easing.min.js

Author

  • Hélio Marcondes
  • October 20, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

Multi step form

A nice multi step form using jQuery

More info: Link

Dependency: jquery.min.js

Author

  • Mike Doubintchik
  • March 25, 2016

Made with

  • HTML / SCSS

About the Code

Multi-Step Form with CSS Only

This pen is for a CSS only multi-step form. It doesn’t use any JS. I’ve used Bootstrap to add a little bit of styling.

More info: Link

Dependency: bootstrap.min.css, allure.js

Author

  • Emil Devantie Brockdorff
  • January 8, 2015

Made with

  • HTML / Less / JavaScript

About the Code

Multi-step form interface

More info: Link

Dependency: jquery.min.js

Author

  • Brendan Sparrow
  • November 24, 2015

Made with

  • HTML / Less / JavaScript

About the Code

Multi-step form with progress bar

More info: Link

Dependency:

Author

  • Daniel Ramos
  • April 9, 2014

Made with

  • HTML / CSS / JavaScript

About the Code

Multi Step Form with Progress Bar using jQuery and CSS3

Got long forms on your website? Break them up into smaller logical sections and convert them into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc.

More info: Link

Dependency: jquery-1.9.1.min.js, jquery.easing.min.js

Author

  • Difan
  • December 7, 2016

Made with

  • HTML / CSS / JavaScript

About the Code

Multi Step Form with Vanilla JS

A simple and easy to use dynamic multi step form made with javascript. The script automatically adjusts to the numbers of fieldsets or steps, making it a very flexible framework for multi-step forms based on a CMS.

More info: Link

Dependency:

Author

  • Ilya Gerasimenko
  • January 25, 2016

Made with

  • HTML / CSS / JavaScript

About the Code

interview form

multi-step form sketch

More info: Link

Dependency:

Author

  • Momanyi Samuel
  • September 1, 2016

Made with

  • Pug / Sass / JavaScript

About the Code

Multi Step Form with Bourbon

More info: Link

Dependency: jquery-2.2.4.min.js

Author

  • Kyle B. Johnson
  • August 19, 2014

Made with

  • HTML / SCSS / JavaScript

About the Code

Multi Form by toggling visible fieldsets

Toggle between fieldsets using the .active class and a little jQuery.

More info: Link

Dependency: foundation.min.css, jquery.min.js

Author

  • Vimalraj
  • June 11, 2020

Made with

  • HTML / CSS / JavaScript

About the Code

Multi Step Form with Progress Bar using jQuery and CSS3

Got long forms on your website ? Break them up into smaller logical sections and convert it into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc.

More info: Link

Dependency:

Author

  • MAHESH AMBURE
  • April 1, 2017

Made with

  • HTML / CSS / JavaScript

About the Code

Employee Account | Form Wizard

More info: Link

Dependency:

Author

  • Ty Stelmach
  • September 29, 2016

Made with

  • HTML / CSS / JavaScript

About the Code

Fundraising Grader

Fully responsive multi-step form grader with validation pre-submit and pop up model. Using math to calculate a grade between 0 and 400 based on the data you enter.

More info: Link

Dependency: jquery.min.js, jquery.easing.min.js, jquery.validate.js

Author

  • Jacob Belanger
  • May 28, 2018

Made with

  • HTML / SCSS / JavaScript

About the Code

Multi-Step Form

More info: Link

Dependency: jquery.min.js

Author

  • webbarks
  • August 15, 2020

Made with

  • HTML / CSS / JavaScript

About the Code

Multi Step Form with progress bar jQuery and CSS3

Stripe.com Style Dropdown Menu developed using Pug, SCSS and JavaScript.

More info: Link

Dependency: jquery.min.js

Author

  • Mario Laurich
  • August 9, 2019

Made with

  • HTML / SCSS / JavaScript

About the Code

Multi Step Form with Vue JS and CSS Animations

How to create a Multi Step Form with Vue JS and some cool CSS Animations. The form have a step by step ui design. The label moves up when you write something and moves back if you delete your input. Validation is included and gives you a nice feedback if you write it wrong or you leave the input field empty.

More info: Link

Dependency: google fonts (family:Noto+Sans&display=swap), vue.min.js

Author

  • Gwenaël Robert
  • November 16, 2018

Made with

  • HTML / SCSS / JavaScript

About the Code

step by step form (Vanilla JS)

More info: Link

Dependency: