How to Create Multi Step Form Using HTML, CSS & JavaScript

This is the day-20 of #30days30submits. Today we are going to create a multi step from using HTML, CSS & JavaScript. Hope you will like it.

🔔subscribe and turn on the notification bell.

▶ Also Watch :

🌐 Join The Community :

#30days30submits #form #multiStepForm

[webcifar]

🔔subscribe and turn on the notification bell.

[erwindiazrosario]

bro, you R my hero, so thanks, grettings from dominican republic.

[spellman]

Thanks, some improvements can be made:


const steps = .step'));
const buttons = .next-btn, form .prev-btn');
const form =

buttons.forEach(button => {
button.addEventListener('click', (e) => {
const direction = ? 'next' : 'prev';
changeStep(direction);
})
});

form.addEventListener('submit', (e) => {
e.preventDefault();
const inputs = getFormData();
console.log(inputs);
resetForm();
})

function getFormData() {
const inputs = [];
=> {
inputs.push({name: input.name, value: input.value});
});
return inputs;
}

function resetForm() {
form.reset();
updateStep(0);
}

function changeStep(direction) {
const active = document.querySelector('form .step.active');
let index = steps.indexOf(active);
if(direction === 'next' && index < steps.length - 1) {
index++;
} else if(direction === 'prev' && index > 0) {
index--;
}
updateStep(index);
}

function updateStep(index) {
steps.forEach((step, i) => {
step.classList.toggle('active', i === index);
});
}

[yousefmiri]

It's work, Thanks for great teach !

[ronarmengol]

Hi. How would you do this:
step 1 -> input number of persons (n)
step 2 -> input first name and last name of persons (n times)
in a multi form

[bryanc]

I changed the type of the submit button from “Submit” to “Button” but now when I submit the form it does not take me back to the first page of the form. How would I modify the code the make it move back to the first page?

[chelseaortega]

is it possible to get the logs and redirect them after they tap the submit button?

[vanessacardena]

Thank you for the video. It has been very helpful, much appreciated.

[arcortez]

great video! but where to and how to collect the data that the user inputed?

[deluxenailsdev]

Respect your effect of creating this series!
It's really interesting.
Thank you!

[latasoni]

Really thankful of you for such a clear content

[abyss_v]

The frist bangli guy on YouTube who actually knows something

[DevenderCSD]

But I don't want my user to go to step 2 without completing step 1

[doni]

the previous button doesn't work for me, it skips.

[michaelkolawolesharp]

thank you for this, works well, good explanation

[AyushSingh-dshs]

Thank you, buddy. Kudos to your skills.

[zyan]

thank you so much for source code may god bless you

[andrefrancis]

the form data is not posting please help

[doni]

I need help, my previous is not working. urgent

here is my code:
const steps = .tabs'));
const nextBtn = .next-btn');
const prevBtn = .prev-btn');
const form =

nextBtn.forEach(button=>{
button.addEventListener('click', () => {
changeStep('next');
})
})

prevBtn.forEach(button=>{
button.addEventListener('click', () => {
changeStep('prev');
})
})

function changeStep(btn) {
let index = 0;
const active = document.querySelector('form .tabs.active');
index = steps.indexOf(active);

if(btn === 'next') {
index ++;
} else if (btn === 'prev') {
index --;
}

}

[SSNUTHIN]

This is very helpful; thank you very much!