Multi Step Form With Progress bar Using HTML, CSS & JavaScript [Project 32/100]

This video tutorial revolves around creating a multi-step registration form using HTML, CSS & Vanilla JavaScript.
Source Code:
github.com/Bas...
▶ Follow & Subscribe
/ python_bootcamp
/ basirpayenda
#html #css #javascript #js #web

[@bwandesky]

Excellent tutorial. Step by step and goes straight to the point.

[@davebudah]

I had to come back and say thank you for this wonderful tutorial.

[@hemrycky]

Really thanks from Brazil bro! Nice content and English, I understood everything

[@fachrulrobi3361]

Can't wait to see your other videos.

[@dinethchamikara1015]

Thank You Very Much for this video.😀😀😀😀🙂🙂

[@anirudhsingh698]

I like smart people who explain and share the code

[@efigeniafsilva]

Yay! thank you very much for making tNice tutorials video! Very helpful!

[@emansem-e2s]

Thank you very much bro this is very helpful

[@sheikhdaniyaldeveloper]

Thank You So Much🥰

[@zachfenton608]

Wonderful, well explained. I will use it in my project. Now we need to figure how to get the data from the forms to be passed into the backend. Much appreciated

[@theman7050]

Ur a legend masha Allah ☝🏼🤲🏼💐

[@nileshpande1222]

Excellent tutorial can you make another part for validation in this form

[@emekaihiere1964]

Just subscribed. ❤

[@dushimegracefidele6279]

Thank you for such helpful content. I like how you explained advanced concepts such as scale and CSS counter-reset properties

[@willianklein5837]

You saved me so much, man. Thank you so much.

[@fareedkhanikor1835]

all the different elents together in a language that is universal. I've seen plenty of DAW tutorials being new, but tNice tutorials is by far the best so

[@Bosko139]

how we perform on validation beacuse i already try to perform validation on your code but it not perform any action

[@afpfvd]

Awsome ❤

[@bramovsk]

Thx .Nice easy beginners guide. helped plenty!

[@adelaide00002]

Extremely helpful 🙌🏻

[@solomondanso1034]

I love this tutorial. very clear to understand. but can you check the submit button, it restarts the progress all over

[@fabler_]

good one bro ,God bless you

[@0xdba]

Awesome Video 👍

[@ibad167]

excellent work excellent design, please complete your script with validation. no one can goto the next step without validation, can you please do that?

[@joserobles3582]

Excelente video, no hablo ingles y como quiera lo vi. Buen ejemplo.

[@cornelmarcu72]

Hi. Very nice work @Basir. Can you complete your function script with a check for validation on each step of the form? In this moment you put required in html and the next button do not verify validation. Nor the submit button.

[@cornedutoit5667]

This was a great tutorial! How would you implement validation for each step? Not allowing progression to the next step unless all the fields in the current step are filled in?

[@Nikhil-dq4yl]

Hi sir, thankyou, I need to build this in the production without any plugin..

[@hvsniddin]

hey, im having a problem. when the step-active is changed the animation is not being applied

[@giorgimindiashvili3810]

+1 sub bro u are perfect i will watch now your all videos i know its will be good experience and good for my study +

[@tonyvito5062]

in the progress bar width you should just have multiplied 50 by the formStepNum :) but thanks for the tut anyway

[@paulai9686]

Nice one bro

[@basirpayenda]

Thanks for the visit

[@rubencodas.i6545]

How to add this code with validation ?

[@baneetraisingh1710]

No the new soft soft is Iconic I'm using the $15 dollars one five star rating ✌️...

[@Antonio-nn2kq]

Very helpful!

[@prachisaxena556]

The next button does not check if the requirements are matched how can this bug be fixed? For example if username is a required field it can be skipped by click on the Next button

[@ultronsam1214]

I'm not sure about my answer but I guess since he is not using the button tag, it might not apply. He is using the anchor tag (a).

[@AntonHilman65]

thank you very muchh

[@34_kabilan14]

Sir Submit button is not working. Please tell me how can i make it to work

[@galihanggorojati3455]

nice one

[@basirpayenda]

Thanks for the visit

[@pk230039]

Nicely done

[@basirpayenda]

Thank you! Cheers!

[@yasminelmahdi2003]

the .progress-step-active colors the text not the circle , help!! and z-index gets rid of the progress bar all

[@AlekseyGaraev]

required?

[@alila3883]

Thanks 👍

[@Nikhil-dq4yl]

Cool

[@ABelfakirVlogs]

hey do u have any idea how to turn the numbers to green checkmarks after proceeding to next step?

[@tipssilog4506]

i cant make the funtion of next button Idont know why plss help me

[@dwaynerosales3235]

You could make a basic template to start with every ti you start a new .

[@waqarali-hj2yz]

Can we use this in MVC application?

[@calidadsed4713]

Gracias por su ayuda

[@kumarmondal8977]

Very helpful

[@basirpayenda]

Glad it helped

[@RaghavMultiverse]

my soft and no content plays, I would really appreciate so guidance on how to fix tNice tutorials problem so I can actually move pass tNice tutorials, thank

[@emekaihiere1964]

Please can you add validation to the form? VERY IMPORTANT

[@SunofarSayyed]

Why code is not working??

[@amossegun7059]

please how can i include required for the input to make it required ?

[@noahpaye6863]

Just add html `required` attribute to inputs like

[@ultronsam1214]

Can you explain the && part between the contain and remove?

[@maestrogoldring1094]

In case no one has explained this, it’s called short-circuiting with the && operator. Basically, it will stop on the first falsey value. So if contains() is false, the code stops there. If it’s true, it moves on and does the remove()

[@taniarajput9629]

Can you plz tell when to change font size when particular section is visible

[@basirpayenda]

I am not quite sure I understand but you change the font size beforehand

[@taniarajput9629]

@@basirpayenda my question is when i click on next button.. I want the title size vary in progessbar... If I'm at 2nd step i want my 2nd step data title size will be greater then rest of title size(fontsize)

[@RuztomLamundao]

Aaron 70218 I tNice tutorialnk you accidentally closed it and then it crashed. Could you give more details?

[@williesam17]

How to submit the form and get the details via email please

[@basirpayenda]

Prior to sending email, you need to validate all input fields, a database to store users and backend to handle logic of sending emails & other integrations. For sending emails there're some email service providers I believe, but they require annual & monthly subscriptions. However, you can use formcarry.com to get email notification for submissions too.

[@sistemasfrontend2643]

can you add it required?

[@basirpayenda]

Yes, since I didn't want to fill all inputs, I ignored it. My entire focus was on progress bar and multi step implementation.

[@zomalee4512]

Can we get sticky sidebar tutorial?

[@basirpayenda]

I've that in my list, will get to that soon

[@Zulfqarhyder-j1h]

god

[@aphelioschenik3162]

i don't know if this was useful or just showed that this is hard and we should keep using one form

[@hugobossard1509]

I'm too later for tNice tutorials, I'll be back stoned...

[@shuvroemon1463]

Tho. Not as insane as my one friend. I talked Nice tutorialm into getting to soft. Ca back a week later and he sampled a fart and sohow

[@smonnore7777]

he BOUGHT the software hahahahahah

[@physicsguy1240]

to