Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
* {box-sizing: border-box;}
html {
background-color: #A2C7E5;
}
/**Typeo CSS End**/
.hidden {
display: none;
}
.button {
width: 140px;
cursor: pointer;
padding: 1em;
border-radius: 0.2em;
border: none;
color: white;
font-weight: bold;
font-size: 1em;
transition: all 0.5s ease;
background-color: #065c2f;
}
.button:hover {
background-color: #ff4f06;
}
.button.disabled {
opacity: 0.5;
}
.button.disabled:hover {
background-color: #065c2f;
}
.form {
width: 30em;
margin: auto;
margin-top: 4em;
padding: 2em;
padding-top: 2em;
padding-bottom: 2em;
background-color: white;
font-family: "Poppins", sans-serif;
color: #33312E;
border-radius: 0.2em;
margin-bottom: 2em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.form .progress-bar {
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-between;
align-items: stretch;
margin-bottom: 3.5em;
position: relative;
max-width: 80%;
width:100%;
margin-left: auto;
margin-right: auto;
}
.form .progress-bar li.progress-bar__dot {
flex-grow: 1;
display: flex;
position: relative;
justify-content: center;
}
.form .progress-bar li.progress-bar__dot:before {
content: '';
width: 1em;
border-radius: 1000em;
height: 1em;
border: 0.2em solid #065c2f;
background-color: white;
cursor: pointer;
transition: all 0.5s ease;
margin: -4px 0 auto 0;
position: relative;
z-index: 1;
display: inline-block;
}
.form .progress-bar li.progress-bar__dot:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #065c2f;
top: 7px;
}
.form .progress-bar li.progress-bar__dot:first-child:after {
left: 50%;
width: 50%;
}
.form .progress-bar li.progress-bar__dot:last-child:after {
left: -25%;
width: 70%;
}
.form .progress-bar li.progress-bar__dot.full:before {
background-color: #065c2f;
}
.form label {
font-weight: bold;
font-size: 1.2em;
}
.form .form-control {
width: 100%;
padding: 1em;
margin-bottom: 2em;
box-sizing: border-box;
margin-top: 0.5em;
border: #000 1px solid;
border-radius: 2px;
background-color: #fff;
font-size: 1em;
font-family: "Poppins", sans-serif;
}
.form .button-group {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.form button#validate {
margin: auto;
background-color: #1A936F;
width: 12em;
}
.form button#validate:hover {
background-color: #12684e;
}
@media(max-width: 767px) {
.form {
width: calc(100% - 30px);
margin:20px auto;
padding: 15px;
}
.form label {font-size: 1rem;}
.form .form-control { margin-top: 5px; margin-bottom: 1em;}
.form .button-group { margin-top: 20px; }
}

const previousButton = document.getElementById("previous")
const nextButton = document.getElementById("next")
const submitButton = document.getElementById('validate')
const form = document.getElementById('stepByStepForm')
const dots = document.getElementsByClassName('progress-bar__dot')
const lengthstep = document.querySelectorAll('.step').length;
const numberOfSteps = lengthstep
let currentStep = 1
for(let i = 0 ; i < dots.length; ++i){
 dots[i].addEventListener('click', ()=>{
 goToStep(i+1)
})
}
previousButton.onclick = goPrevious
nextButton.onclick = goNext
function goNext(e) {
 e.preventDefault()
 currentStep += 1
 goToStep(currentStep)
}
function goPrevious(e) {
 e.preventDefault()
 currentStep -= 1
 goToStep(currentStep)
}
function goToStep(stepNumber){
currentStep = stepNumber

let inputsToHide = document.getElementsByClassName('step')
let inputs = document.getElementsByClassName(`step${currentStep}`)
let indicators = document.getElementsByClassName('progress-bar__dot')

for(let i = indicators.length-1; i >= currentStep ; --i){
 indicators[i].classList.remove('full')
}

for(let i = 0; i < currentStep; ++i){
 indicators[i].classList.add('full')
}

//hide all input
for (let i = 0; i < inputsToHide.length; ++i) {
hide(inputsToHide[i])
}

//only show the right one
for (let i = 0; i < inputs.length; ++i) {
 show(inputs[i])
}

//if we reached final step
if(currentStep === numberOfSteps){
 enable(previousButton)
 disable(nextButton)
 show(submitButton)
}

//else if first step
else if(currentStep === 1){
 disable(previousButton)
 enable(next)
 hide(submitButton)
}

else {
 enable(previousButton)
 enable(next)
 hide(submitButton)
}
}
function enable(elem) {
 elem.classList.remove("disabled");
 elem.disabled = false;
}
function disable(elem) {
 elem.classList.add("disabled");
 elem.disabled = true;
}
function show(elem){
 elem.classList.remove('hidden')
}
function hide(elem){
 elem.classList.add('hidden')
}