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

No video

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

Рет қаралды 89,194

Basir Payenda

Күн бұрын

Пікірлер: 78

@bwandesky 3 жыл бұрын

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

@davebudah 2 жыл бұрын

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

@emansem-e2s Ай бұрын

Thank you very much bro this is very helpful

@hemrycky Жыл бұрын

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

@anirudhsingh698 2 жыл бұрын

I like smart people who explain and share the code

@nileshpande1222 2 жыл бұрын

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

@Bosko139 2 жыл бұрын

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

@zachfenton608 2 жыл бұрын

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

@fareedkhanikor1835 2 жыл бұрын

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

@solomondanso1034 2 жыл бұрын

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

@fachrulrobi3361 2 жыл бұрын

Can't wait to see your other videos.

@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?

@cornelmarcu72 2 жыл бұрын

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.

@dinethchamikara1015 5 ай бұрын

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

@dushimegracefidele6279 Жыл бұрын

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

@theman7050 2 жыл бұрын

Ur a legend masha Allah ☝🏼🤲🏼💐

@34_kabilan14 Ай бұрын

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

@rubencodas.i6545 2 жыл бұрын

How to add this code with validation ?

@Nikhil-dq4yl Жыл бұрын

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

@emekaihiere1964 6 ай бұрын

Please can you add validation to the form? VERY IMPORTANT

@hvsniddin 8 ай бұрын

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

@efigeniafsilva 2 жыл бұрын

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

@joserobles3582 2 жыл бұрын

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

@willianklein5837 Жыл бұрын

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

@AlekseyGaraev 2 жыл бұрын

required?

@preetismagar163 Жыл бұрын

amzing video, thank you so much it really helped me thank you.😊

@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?

@bramovsk 2 жыл бұрын

Thx .Nice easy beginners guide. helped plenty!

@yasminelmahdi2003 2 жыл бұрын

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

@dwaynerosales3235 2 жыл бұрын

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

@prachisaxena556 2 жыл бұрын

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 2 жыл бұрын

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).

@fabler_ 3 жыл бұрын

good one bro ,God bless you

@adelaide00002 2 жыл бұрын

Extremely helpful 🙌🏻

@tonyvito5062 2 жыл бұрын

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

@0xdba 3 жыл бұрын

Awesome Video 👍

@tipssilog4506 2 жыл бұрын

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

@baneetraisingh1710 Жыл бұрын

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

@emekaihiere1964 7 ай бұрын

Just subscribed. ❤

@RaghavMultiverse 2 жыл бұрын

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

@afpfvd Жыл бұрын

Awsome ❤

@ABelfakirVlogs 2 жыл бұрын

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

@user-ln6li8xl8o 11 ай бұрын

Why code is not working??

@calidadsed4713 Жыл бұрын

Gracias por su ayuda

@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 +

@waqarali-hj2yz 2 жыл бұрын

Can we use this in MVC application?

@Antonio-nn2kq 2 жыл бұрын

Very helpful!

@AntonHilman65 2 жыл бұрын

thank you very muchh

@paulai9686 3 жыл бұрын

Nice one bro

@basirpayenda 3 жыл бұрын

Thanks for the visit

@Nikhil-dq4yl Жыл бұрын

Cool

@pk230039 3 жыл бұрын

Nicely done

@basirpayenda 3 жыл бұрын

Thank you! Cheers!

@galihanggorojati3455 3 жыл бұрын

nice one

@basirpayenda 3 жыл бұрын

Thanks for the visit

@ultronsam1214 2 жыл бұрын

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

@maestrogoldring1094 10 ай бұрын

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()

@RuztomLamundao 2 жыл бұрын

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

@amossegun7059 2 жыл бұрын

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

@noahpaye6863 2 жыл бұрын

Just add html `required` attribute to inputs like

@alila3883 2 жыл бұрын

Thanks 👍

@williesam17 3 жыл бұрын

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

@basirpayenda 3 жыл бұрын

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.

@kumarmondal8977 3 жыл бұрын

Very helpful

@basirpayenda 3 жыл бұрын

Glad it helped

@taniarajput9629 3 жыл бұрын

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

@basirpayenda 3 жыл бұрын

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

@taniarajput9629 3 жыл бұрын

@@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)