HTML & CSS FIRST FORM 1:26 => background image cover 1:47, 2:01 => container 2:17-2:59 => form, input html 3:05-3:31 => align the form-input with css 3:44-3:58 => width, margin, padding, etc of input field 4:03 => placeholder 4:20-4:52 => button for the form 5:00-5:19 => styling the button SECOND & THIRD FORMS 5:33- => copy from the first form and make some changes 6:28-7:20 => copy from the second form to make the third form 7:23 => styling the second and third forms 8:15-8:34 => step (row) 8:44-10:34 => steps (text) 10:38 => on click event 11:12 => JS 13:58 => add overlow hidden
The overflow hidden is something so simple, but genius to me. I was always doing z-index or hidden attribute but it brings many problems. Great tutorial and very nice design!
Yes, sir, I'm wondering the same. How will all the inputs at different forms post in a single submit button. Have you figured out the way? If so please sir share with me. Your comment is 2 years old.
Thank you so much for this, I really appreciate them I got two questions 1. How did the progress div have a triangular edge, was it the border top and bottom assigned to the div::after? 2. If I were to use this in my website, would the submit button submit the 3 forms together, or just the last? Thank you. Nice tutorial once again : )
maybe i can help with the question number 1, it's simply build a rectangular shape from the div::after, and then put it right: 20px show it can be seen. for number two, perhaps, it's still my question two, because it work on backend
Sir, one question, here we three seperate forms, when the user presses the sumbit button at the end, will all the tree form get submited or only the one that has the submit button attached to it?, thank you
👍💪 You are great as usual my friend, you explained it in an easy and simple way, I hope you accept my thanks for your wonderful method, but a problem will occur if the user presses the Tab button, because the typing cursor will move to the fields of the hidden parts of this form, I hope My question is clear, in fact it is not a serious problem, but it is not appropriate for this to happen inside the form, and it is considered a bad user experience, please🙏 give us a solution to this problem, thank you again.
when you will add tabindex="-1" in 2nd and 3rd form it will be unreachable from tab key add JS to change tabindex="-1" to tabindex="0" form 2nd form once 1st form is completed
hi, thanks for vid. I was wondering how you handle submission of such a form, coz it's actually three separate forms, and when one of the forms in my case uploads files. what I've tried: I used Fetch Api to send JSON data only, but I couldn't figure out how to send files using Fetch.
How to handle the data submitted? For example I am using Python flask. The data submitted in all the above three forms should be processed by the Python code.
The part of overtlow hidden is not working for me. What can i do now? I have tried seeing your vedio, others have worked but after typing overflow hidden that is not hidden.
1:37 - Here my image wasn't displayed full screen. I had to add the following code to the body class: width: 100%; height: 100vh; overflow: hidden; Anyway, this tutorial was very helpful to me! Could you make a tutorial about submitting the form to some database or gmail. Many thanks!
Hey I have one issue on this form. when I click on next2 button my page is refresh automatically. I have check many times this code is same like yours code.
Thank you very much for the informative tutorial. You made it very simple, and all along I had thought it was a complex thing. 👏👏It will also be interesting to see how you be submitting to some database after all forms have been filled.
But Sir how to add an " IF " condition in java script as the forms are empty and they are being scrolled forward empty only . But in realtime we need user input also while they're being forwarded to next form as "required". Can u pls make a tut on it.
![Multi Step Form With Progress bar Using HTML, CSS & JavaScript [Project 32/100]](http://i.ytimg.com/vi/JFfVilQSius/mqdefault.jpg)
My mind is blown, learning new ways to think about CSS after so many years doing things the hard way. This is an amazing tutorial. Thank you.
HTML & CSS
FIRST FORM
1:26 => background image cover
1:47, 2:01 => container
2:17-2:59 => form, input html
3:05-3:31 => align the form-input with css
3:44-3:58 => width, margin, padding, etc of input field
4:03 => placeholder
4:20-4:52 => button for the form
5:00-5:19 => styling the button
SECOND & THIRD FORMS
5:33- => copy from the first form and make some changes
6:28-7:20 => copy from the second form to make the third form
7:23 => styling the second and third forms
8:15-8:34 => step (row)
8:44-10:34 => steps (text)
10:38 => on click event
11:12 => JS
13:58 => add overlow hidden
tq bro
The overflow hidden is something so simple, but genius to me. I was always doing z-index or hidden attribute but it brings many problems. Great tutorial and very nice design!
This tutorial has made me love to JavaScript. Thanks bro, my greeting for you. I am from Indonesia
It's real video I make this wesite
Very very much thanks sir please make such videos as this video
big like for you. you can teach this subject very well. thank you so much
How do you post all the inputs in different form tags at once with the single submit button into the database
Yes, sir, I'm wondering the same. How will all the inputs at different forms post in a single submit button.
Have you figured out the way? If so please sir share with me. Your comment is 2 years old.
WOAHHH WHAT A GREAT VIDEO IS GREAT ,THIS MADE ME LOVE IN JS❤
Thank you so much for this, I really appreciate them
I got two questions
1. How did the progress div have a triangular edge, was it the border top and bottom assigned to the div::after?
2. If I were to use this in my website, would the submit button submit the 3 forms together, or just the last?
Thank you.
Nice tutorial once again : )
maybe i can help with the question number 1, it's simply build a rectangular shape from the div::after, and then put it right: 20px show it can be seen.
for number two, perhaps, it's still my question two, because it work on backend
Sir, one question, here we three seperate forms, when the user presses the sumbit button at the end, will all the tree form get submited or only the one that has the submit button attached to it?, thank you
make sure everything is inside a so if you submit all will be POSTed or GETed according to what you entered
@@TheTriangle444 what do you mean by that? cuz I also had the same issue. mine only submits the last entry
thank you so much! hope I get a good grade on this project
You are amazing, Thanks for this tutorial. Greetings from Colombia(land of coffee and cumbia)
You're so welcome!
Better than the prev reg & login form 👍🏻🔥
Great Lesson Keep it up!!!❤
It should be "div", not "dvi" at 8:15min.
And the tutorial was awesome 😍😍😍😍
Great Lesson Bro short and simple loved it!!!!
Thank you so much video is very good and I create a form succussfully.
longest 15 min video of my life 😂
Very Good tuto, thank you
I smashed the like button for you. 💚
thanks
It's The Best Tutorial❤️!!! Thank You Sooo Much 👌👌
Thanks for your help ..i recently started my youtube channel in relatable topic..thank's a lot.
It's amazing bro, thank you
Amazing, accept my like!
Thanks for the logic man, love you bro
Nice menu man.Good job. Regards from Poland.
Yes sir 🙏🌹 this video is very helpful for us🙏🙏🙏🙏🌹🌹🌼🌹 thank you so much sir 🌹🌹
👍💪 You are great as usual my friend, you explained it in an easy and simple way, I hope you accept my thanks for your wonderful method, but a problem will occur if the user presses the Tab button, because the typing cursor will move to the fields of the hidden parts of this form, I hope My question is clear, in fact it is not a serious problem, but it is not appropriate for this to happen inside the form, and it is considered a bad user experience, please🙏 give us a solution to this problem, thank you again.
when you will add
tabindex="-1"
in 2nd and 3rd form it will be unreachable from tab key
add JS to change tabindex="-1" to tabindex="0" form 2nd form once 1st form is completed
@@GreatStackDev
✨wow✨, perfect as usual, thank you so much
Can I use it for commercial?
Awesome!!!! This is really helpful! Thank you so much! Greetings from Brazil
Glad it was helpful!
Nice tutorial man! Tks a lot!
You are amazing ❤️
hi, thanks for vid.
I was wondering how you handle submission of such a form, coz it's actually three separate forms, and when one of the forms in my case uploads files.
what I've tried: I used Fetch Api to send JSON data only, but I couldn't figure out how to send files using Fetch.
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
Wow! Excellect work!
How to handle the data submitted? For example I am using Python flask. The data submitted in all the above three forms should be processed by the Python code.
Sorry KV I don't know Python, You will find front end design tutorials on my channel
Awesome video! Thanks so much teacher.
The part of overtlow hidden is not working for me. What can i do now? I have tried seeing your vedio, others have worked but after typing overflow hidden that is not hidden.
I have still problem it anyone uses some details to fill it how would I able to know the details
why did you type dvi on that [step-row]instead of div ? is that not a problem? I just want know about.
thank you.
It was a typo, but his code editor ignored it :)
Thank you nice tutorial though would like to know how to validate this form using java script
thank you very much! you help me so muchhh❤️✨
thanks to you for comment
i am not able to transfer from onepage to anotherpage by clicking next and back button, s give me a tips
1:37 - Here my image wasn't displayed full screen. I had to add the following code to the body class:
width: 100%;
height: 100vh;
overflow: hidden;
Anyway, this tutorial was very helpful to me! Could you make a tutorial about submitting the form to some database or gmail. Many thanks!
thank you
just do like this
background-image: linear gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(banner.jpg)
you could do - background-repeat: no-repeat;
Amazing ❤
Thanks 😄
as we used to professional tutorial from brilliant developer thanks a lot for you . i am very happy to subscript into your channel
how can we save the data of these forms in database using one single submit button. Please help!!
This Is Awesome ❤️
Bro which compiler are you using.
Please give the link which software you use.
Awesome!
Great tutorial, thanks for this! Would love to see the approach with flexbox or css grid. Anybody know how that would work?
Full concept #coderdhruv
I learn tutorial your steps is very easy and set mind.
I request to 1 simple gaming website includes with how to TH-cam's videos added tutorial .
Would be nice to see it on mobile screen as well.
Great lesson! Thank you so much. Another tutorial about how to send the answers from the form to a google sheet would be very helpful too 🙂
Full concept #stepfrom
Nice video 👌👌
NICE VIDEO ITS SO PRACTICE =)
Please make a latest vedio on linear gradient with background url
Still confused how did you make steps pointed in traingle shape
Hello sir , how can we add validation on it , pls make one more video to add validation on multiplestep form
hell.new friend thank you for sharing the video
how can send data using php if i created 3 diffrent forms?
Use isset keyword in php file for correspond button
thank you sir
sir affter submit success message how to print
very nice sir thank you
Most welcome
Very nice project my bro!
Thank you! Cheers!
Very helpful video sir, but video was little bit fast.
Sorry for that, I just try to make video shorter in length.
THANK YOU !! HI , PLEASE ADD DTATA BASE ALSO ....
where the form go when i click submit button? pleasseee answerrr
Hey I have one issue on this form. when I click on next2 button my page is refresh automatically. I have check many times this code is same like yours code.
nice. A good effort !
awesome video
Thanks for your great video, how can we set the next buttons dont work when fields are blank?
Through add validations
please upload tutorial for the back end also.
bro how submission to mail this form
but what if we use backend using this form. i mean we have to add action=".php" file in every form you created. this will show error or not?
Ótimo vídeo parabéns ✌.
I have still problem it anyone uses some details to fill it how would I able to know the details as I have made the website
Great tutorial 😊
Nice video. But I coudn't make the arrow.
how can i set auto height and width?
the explanation is good but i think the code is paid one,after typing if u get error than what will one do
which code editor is this??
Thanks you
You're welcome! 😊
When I create the back and next buttons they stack vertically, how can I get round this?
Typo probably. Check for missing semi colon
Same he skipped some codes I guess
Cool, but the form is moving to next step without filling the required fields
your voice is so sweet
How to access all elements in python django
Thank you very much for the informative tutorial. You made it very simple, and all along I had thought it was a complex thing. 👏👏It will also be interesting to see how you be submitting to some database after all forms have been filled.
Following
div tag in step-row is wrong
Hello sir how you have saved the image I am not able to insert image in background plzz reply sir🙏🏻🙏🏻
Hello sir,I am from india
But Sir how to add an " IF " condition in java script as the forms are empty and they are being scrolled forward empty only . But in realtime we need user input also while they're being forwarded to next form as "required". Can u pls make a tut on it.
It is required to submit, if you want to prevent the user to advance to next step you could use input "value" property.
How to validation this form?
3 form banane se ek sath saare form ka data kese action me use hoga
Name of editor please ! Atom or visual studio or what ?
Brackets Editor.
Thanks bro
Thank you
How can I get the informations?
Sir tab button press karne se sare form idhar udhar unmannage ho jate hai aur work karna band kar dete hai..pls solution bataye sir.
Which editor it is?
Brackets.
bhai javascript ke buttons kaam nhi kr rhe hai urgent bhai help kr do