Build a Multi Step Form with Validation using Javascript

[@AvinashSingh-tr5vt]

Amazing, thanks for quality content. please make a video on trello like list without html5 drag and drop. Thank you beforehand

[@refinedguides]

Thanks! I’ll keep that in mind 👍🏻

[@buduryahya]

when change the direction the next step and button dont work with me , can you help me how to change to dir to rtl in right way>

[@refinedguides]

Assuming you added dir="rtl" in the html tag, add this in the CSS:
html[dir="rtl"] .progress-container .progress { transform-origin: right; }
And in the steps.forEach loop, change to this:
const percentage = document.documentElement.dir === "rtl" ? 100 : -100;
step.style.transform = `translateX(${currentStep * percentage}%)`;

[@buduryahya]

@@refinedguides done , Thank you so much

[@buduryahya]

@refinedguides New problem was A problem has appeared, which is that when adding multiple fields in any step, it is not possible to scroll down until the fields are filled in.

[@buduryahya]

also when add header or footer all style destroy , please chack for this problem in style

[@refinedguides]

In the video, I added a 'form styles' comment in the CSS. The styles after that comment are specifically for making the form wizard work. The styles before that could cause conflicts if you're adding them to an existing site, as they modify the base styles. You may also need to adjust class names to avoid clashes with your website's existing classes.

[@buduryahya]

Can I contact you via email?

[@refinedguides]

Sure! 👍