Vanilla JS Project: Multi Step form in HTML, CSS & OOP Javascript

Опубликовано: 21 Март 2025
на канале: Alejandro AO - Software & Ai
1,649
49

In this video, we create a multistep form using only HTML, CSS and Javascript. This may also serve as an Object Oriented Programming (OOP) tutorial, for we will be working with Javascript classes.

Multi step forms can be difficult to create, especially if you want to add a progress bar. In this tutorial, we add a progress bar to the design.

This multi step form with a step progress bar is just more of an exercise than an actual implementation of a feature. Sometimes, the code in this OOP example with JS will turn out to be over-engineered. And it is true that the same can be done with fewer lines of code. But the idea is to create software that can be easily updated and maintained, no only by yourself, but by other developers that might come after you.

👉 Codesandbox: https://codesandbox.io/s/multistep-fo...

⏰ Timestamps
0:00 Introduction
01:41 HTML and structure
07:56 Style the form with CSS
34:01 Enable pagination with Javascript