w3tweaks
  • 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
w3tweaks
  • 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
w3tweaks
Home Inputs Forms
41 Multi step HTML forms

41 Multi step HTML forms

W3TWEAKS by W3TWEAKS
January 8, 2021
in Forms, Inputs
0

You might also like

Custom Checkbox buttons

53 The Best Collection of Custom Checkbox Buttons

December 18, 2021
3.3k
jQuery Toggle Menu

20 Cool jQuery Toggle Menu

January 17, 2021
3.3k

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

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 styling and Effects

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 Checkbox buttons

53 The Best Collection of Custom Checkbox Buttons

by W3TWEAKS
December 18, 2021
0
3.3k

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

jQuery Toggle Menu

20 Cool jQuery Toggle Menu

by W3TWEAKS
January 17, 2021
0
3.3k

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
0
3.3k

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
0
3.3k

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 styling and Effects

Discussion about this post

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

Welcome Back!

Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In