How To Make Form (Multi-Step) Using HTML CSS & JS | Create Form With HTML & CSS
HTML-код
- Опубликовано: 25 авг 2020
- Learn How to create a multi-step form using HTML, CSS and JS. Create HTML And CSS Form Design Step By Step
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
In this video you will learn to make a multi-step form design with HTML, CSS and JavaScript. We will create 3 steps form, where after filling the first form user will go for the 2nd form and after that 3rd form. Then there will be form submit button at 3rd step.
We will create this form design step by step in just 15 minutes using HTML, CSS and simple JavaScript.
-------------------------------------
Recommended Videos:
Login and registration form design using HTML, CSS
► • How To Make Login & Re...
Create Login and registration form Using PHP & MySQL
► • How To Make Login & Re...
Create Contact Form Using HTML, CSS, PHP
► • Create Working Contact...
Learn HTML and CSS form Beginning
► • HTML And CSS Tutorial ...
Make Complete Website Using HTML, CSS, Bootstrap
► • Top 5 Complete Website...
-------------------------------------
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Image Credit:
www.pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
![Multi Step Form with Step Progress Bar in HTML CSS & JavaScript [Part -1]](/img/1.gif)
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!
big like for you. you can teach this subject very well. thank you so much
This tutorial has made me love to JavaScript. Thanks bro, my greeting for you. I am from Indonesia
Thanks for your help ..i recently started my youtube channel in relatable topic..thank's a lot.
It's The Best Tutorial❤️!!! Thank You Sooo Much 👌👌
It's real video I make this wesite
Very very much thanks sir please make such videos as this video
Great Lesson Bro short and simple loved it!!!!
Awesome video! Thanks so much teacher.
Better than the prev reg & login form 👍🏻🔥
Thanks for the logic man, love you bro
It's amazing bro, thank you
thank you so much! hope I get a good grade on this project
Great Lesson Keep it up!!!❤
Nice menu man.Good job. Regards from Poland.
Wow! Excellect work!
Ótimo vídeo parabéns ✌.
Yes sir 🙏🌹 this video is very helpful for us🙏🙏🙏🙏🌹🌹🌼🌹 thank you so much sir 🌹🌹
Nice tutorial man! Tks a lot!
Thank you so much video is very good and I create a form succussfully.
This Is Awesome ❤️
Great tutorial 😊
Awesome!!!! This is really helpful! Thank you so much! Greetings from Brazil
Glad it was helpful!
You are amazing ❤️
Amazing, accept my like!
NICE VIDEO ITS SO PRACTICE =)
Awesome!
nice. A good effort !
longest 15 min video of my life 😂
Very Good tuto, thank you
hell.new friend thank you for sharing the video
You are amazing, Thanks for this tutorial. Greetings from Colombia(land of coffee and cumbia)
You're so welcome!
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
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
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.
Thank you
Thanks bro
awesome video
Thank you nice tutorial though would like to know how to validate this form using java script
I learn tutorial your steps is very easy and set mind.
I request to 1 simple gaming website includes with how to RUclips's videos added tutorial .
Nice video 👌👌
your voice is so sweet
thank you
thank you very much! you help me so muchhh❤️✨
thanks to you for comment
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
as we used to professional tutorial from brilliant developer thanks a lot for you . i am very happy to subscript into your channel
THANK YOU !! HI , PLEASE ADD DTATA BASE ALSO ....
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?
Bro which compiler are you using.
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.
Hello sir , how can we add validation on it , pls make one more video to add validation on multiplestep form
Can I use it for commercial?
Hello sir how you have saved the image I am not able to insert image in background plzz reply sir🙏🏻🙏🏻
Nice
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.
Would be nice to see it on mobile screen as well.
Very nice project my bro!
Thank you! Cheers!
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
I smashed the like button for you. 💚
thanks
Hello sir,I am from india
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.
Please give the link which software you use.
Please make a latest vedio on linear gradient with background url
damn man thank you!
thanks Benitez
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
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
👍💪 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
please upload tutorial for the back end also.
thank you sir
sir affter submit success message how to print
It should be "div", not "dvi" at 8:15min.
And the tutorial was awesome 😍😍😍😍
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 :)
i am not able to transfer from onepage to anotherpage by clicking next and back button, s give me a tips
Thanks for your great video, how can we set the next buttons dont work when fields are blank?
Through add validations
where the form go when i click submit button? pleasseee answerrr
Sir ap full website banne ka video he uske andhr ke coading ka text file link do please
👏🔥🔥
I have still problem it anyone uses some details to fill it how would I able to know the details
Nice video. But I coudn't make the arrow.
which code editor is this??
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.
thanks ¡
Thanks Lalo Canario
Very helpful video sir, but video was little bit fast.
Sorry for that, I just try to make video shorter in length.
3 form banane se ek sath saare form ka data kese action me use hoga
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
Cool, but the form is moving to next step without filling the required fields
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
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
How can I get the informations?
How to access all elements in python django
🤩
bro how submission to mail this form
Still confused how did you make steps pointed in traingle shape
Bro pls do JavaScript full course
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
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;
👍🆂🆄🅿🅴🆁👈
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?
what about validation