w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Inputs

41 Multi step HTML forms

A Multi step HTML form is an important part of any website. It allows visitors to interact with your site and provide valuable information.

W3TWEAKS by W3TWEAKS
November 6, 2022
in Inputs

You might also like

Custom CSS Checkbox buttons

50+ Free CSS Checkbox Examples to Make Your Site More Interactive

November 12, 2022
jQuery Toggle Menu

20 Cool jQuery Toggle Menu

January 17, 2021

We’ve created a collection of Multi step HTML forms that will help you build web forms. Get started today! Updated with 14 new items on Jan 08, 2021

Author

  • Jonathan H
  • February 19, 2017

Link

Download

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

  • DevTips
  • August 22, 2016

Link

Download

Made with

  • Pug / SCSS / JavaScript

About the Code

Step By Step Form

More info: Link

Dependency: jquery-2.2.4.min.js

Author

  • Jamie Coulter
  • August 9, 2017

Link

Download

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

Link

Download

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

Link

Download

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

Link

Download

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

  • Creative Tim
  • September 12, 2016

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Material Bootstrap Wizard

More info: Link

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

Author

  • Petia
  • April 5, 2017

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Bootstrap MultiStep Form

More info: Link

Dependency: bootstrap.min.css, JS – jquery.min.js, bootstrap.min.js, jquery.easing.min.js

Author

  • MAHESH AMBURE
  • July 13, 2018

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

steps jquery form with Icons

More info: Link

Dependency: font-awesome.min.css, jquery.min.js, jquery.easing.min.js

Author

  • Jerome Renders
  • January 6, 2017

Link

Download

Made with

  • Pug / Sass / JavaScript

About the Code

Step by step register form

More info: Link

Dependency: –

Author

  • Atakan Goktepe
  • March 17, 2016

Link

Download

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

  • KEYUR PARALKAR
  • August 9, 2016

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Multi Step Form using semantic-ui

More info: Link

Dependency: semantic.min.css, font=Lobster, jquery.min.js, semantic.min.js

Author

  • Josh A
  • April 26, 2017

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

AngularJS 1.5.x Multi-Step Form

AngularJS 1.x multip-step ng-switch form. Updated with a $scope object keeping track of the form parameters.

More info: Link

Dependency: bootstrap.min.css, angular.min.js, angular-animate.min.js

Author

  • Hélio Marcondes
  • October 20, 2014

Link

Download

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

Link

Download

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

  • Tommy Marshall
  • January 13, 2015

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

React Multi-Step Form

More info: Link

Dependency: yIgqi.js, react-0.11.1.js, JSXTransformer-0.11.0.js

Author

  • Emil Devantie Brockdorff
  • January 8, 2015

Link

Download

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

Link

Download

Made with

  • HTML / Less / JavaScript

About the Code

Multi-step form with progress bar

More info: Link

Dependency: –

Author

  • Daniel Ramos
  • April 9, 2014

Link

Download

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

  • Wolf Wortmann
  • June 1, 2015

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Multi Step Form with JS Validation & SPAM Blocker

More info: Link

Dependency: vtcha.min.css, sweet-alert.css, jquery.vtcha.bundle.min.js, sweet-alert.min.js

Author

  • Thumper
  • June 7, 2018

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Bootstrap 4 Multi-Step Form

Multi-Step form with validation

More info: Link

Dependency: bootstrap.min.css, font-awesome.min.css, animate.min.css, jquery.min.js, popper.min.js, bootstrap.min.js, jquery.easing.min.js

Author

  • Ryan Irilli
  • April 22, 2014

Link

Download

Made with

  • Haml / SCSS / JavaScript

About the Code

Multi-Step Form UI

More info: Link

Dependency: style.min.css, jquery.min.js(v2.1.3)

Author

  • Difan
  • December 7, 2016

Link

Download

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

  • ali
  • January 15, 2016

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Multistep Form – Parsley Validating

Test multi step form with Parsley

More info: Link

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)

Author

  • Ilya Gerasimenko
  • January 25, 2016

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

interview form

multi-step form sketch

More info: Link

Dependency: –

Author

  • Momanyi Samuel
  • September 1, 2016

Link

Download

Made with

  • Pug / Sass / JavaScript

About the Code

Multi Step Form with Bourbon

More info: Link

Dependency: jquery-2.2.4.min.js

Author

  • Flor Antara
  • June 23, 2019

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Slide Animation | Multiple Paths Form POC

Concept Test about a sliding multi steps form.

More info: Link

Dependency: bootstrap.min.css(3.0.3), jquery.min.js(3.1.0)

Author

  • Daniel Hinds-Bond
  • January 3, 2018

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Multi-step form with FE validations

More info: Link

Dependency: font-awesome.min.css(v4.5.0), jquery.min.js(v3.2.1), angular.min.js(v1.6.5)

Author

  • Kyle B. Johnson
  • August 19, 2014

Link

Download

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

  • Martin Franek
  • March 27, 2017

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

multi form

More info: Link

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

Author

  • Emran Khan
  • February 3, 2018

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Bootstrap Multi step form with progress bar

More info: Link

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)

Author

  • Natalia Davydova
  • April 14, 2020

Link

Download

Made with

  • Pug / SCSS / JavaScript

About the Code

Multi Step Bootstrap Form with animations

Multi Step Bootstrap Form with animations (responsive)

More info: Link

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

Author

  • Vimalraj
  • June 11, 2020

Link

Download

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

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Employee Account | Form Wizard

More info: Link

Dependency: –

Author

  • Ty Stelmach
  • September 29, 2016

Link

Download

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

  • Coding Artist
  • December 9, 2019

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

3D Multi Step Form

Inspired By Dribbble Shot ‘Sign up 3D’ by Oleg Frolov

More info: Link

Dependency: CSS – font-awesome.min.css, google fonts (Montserrat:300,500|Poppins), google Fonts(Material+Icons) JS – jquery.min.js

Author

  • Jacob Belanger
  • May 28, 2018

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Multi-Step Form

More info: Link

Dependency: jquery.min.js

Author

  • webbarks
  • August 15, 2020

Link

Download

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

  • Monica
  • April 28, 2020

Link

Download

Made with

  • HTML / CSS / JavaScript

About the Code

Multi-step form

More info: Link

Dependency: bootstrap.min.css, font-awesome.css, jquery.min.js

Author

  • Mario Laurich
  • August 9, 2019

Link

Download

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

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

step by step form (Vanilla JS)

More info: Link

Dependency: –

Tags: AngularjsCSSformshtmlinputinputsJavascriptjquerymultistep
Previous Post

Beautiful Button Loading Animation

Next Post

92 CSS Text Effects Collections for Designing Beautiful Websites

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Custom CSS Checkbox buttons

50+ Free CSS Checkbox Examples to Make Your Site More Interactive

by W3TWEAKS
November 12, 2022

If you're looking for a collection of custom CSS checkboxes to spice up your forms, You don't want to search...

jQuery Toggle Menu

20 Cool jQuery Toggle Menu

by W3TWEAKS
January 17, 2021

Hand-picked free jQuery Toggle Menus. All the collections are included with demo and source code. Updated on Jan 17 2020....

jQuery Toggle Switches

15 Cool jQuery Toggle Switches

by W3TWEAKS
October 12, 2021

Hand-picked free jQuery Toggle Switches. All the collections are Included with the demos and source codes. AuthorHimalaya SinghMarch 3, 2019LinkDownloadMade...

Cool CSS Emoji Rating

13 Cool CSS Emoji Rating

by W3TWEAKS
January 14, 2021

Hand-picked Free CSS Emoji Rating. All the collections are Included with the demos and source codes. AuthorAaron IkerMarch 17, 2020LinkDownloadMade...

Next Post
css text styling and effects

92 CSS Text Effects Collections for Designing Beautiful Websites

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools