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
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
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: –
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
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
About the Code
Interactive Form
An interactive multi step form based on DevTips tutorial
More info: Link
Dependency: jquery.min.js
About the Code
Material Bootstrap Wizard
More info: Link
Dependency: bootstrap.min.css, jquery.min.js, bootstrap.min.js
About the Code
Bootstrap MultiStep Form
More info: Link
Dependency: bootstrap.min.css, JS – jquery.min.js, bootstrap.min.js, jquery.easing.min.js
About the Code
steps jquery form with Icons
More info: Link
Dependency: font-awesome.min.css, jquery.min.js, jquery.easing.min.js
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
About the Code
Multi Step Form using semantic-ui
More info: Link
Dependency: semantic.min.css, font=Lobster, jquery.min.js, semantic.min.js
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
About the Code
Multi step form
A nice multi step form using jQuery
More info: Link
Dependency: jquery.min.js
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
About the Code
React Multi-Step Form
More info: Link
Dependency: yIgqi.js, react-0.11.1.js, JSXTransformer-0.11.0.js
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
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
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
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: –
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)
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)
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)
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
About the Code
multi form
More info: Link
Dependency: bootstrap.min.css, jquery.min.js, bootstrap.min.js
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)
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
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: –
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
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
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
About the Code
Multi-step form
More info: Link
Dependency: bootstrap.min.css, font-awesome.css, jquery.min.js
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
Discussion about this post