Multi Step Form with Step Progress Bar in HTML CSS & JavaScript [Part -1]
HTML-код
- Опубликовано: 20 май 2020
- Multi Step Form with Step Progress Bar in HTML CSS & JavaScript [Part -1]
Multi-Step Form with Step Progress Bar [Part - 2]
➤ • Multi Step Form with S...
Animated Login & Signup Form HTML & CSS
➤ • Animated Login and Reg...
Download Codes From Here - codingnepalweb.com/multi-step...
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: Diviners - Savannah (feat. Philly K) [NCS Release]
Music provided by NoCopyrightSounds.
➤ • Diviners - Savannah (f...
Track: Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Dreams pt. ...
ROY KNOX - Blue Eyed Demon [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • ROY KNOX - Blue Eyed D...
Background Image Credit:
➤ colorlib.com
![Multi Step Form with Step Progress Bar in HTML CSS & JavaScript [Part -2]](http://i.ytimg.com/vi/UldBI0fdMJw/mqdefault.jpg)
![Multi Step Form with Step Progress Bar in HTML CSS & JavaScript [Part -2]](/img/tr.png)
thank you very much, i have been searching for this kind of video
Thank you so much...it is very helpful video ..thanks alot !!!!
It's cool bro, i waiting part 2 !!
Part 2 coming tonight... Don't forget to watch.
Your tutorials are really awesome👍🤗
Thank you 💙
thankyou so much bro.. stay healthy
You're welcome bro 💙.... Stay healthy too.
Ótimo vídeo parabéns. Será que funcionaria também adaptando para um modal.
Love it
goooooooooooooooood bro
Watched buddy 👌👌👌👌👌
Thank you 💙
Great video! Is there a way to apply part o this coding to Crocoblock multistep Jetforms? If yes how so?
Awesome music
great job! thankyou!!
Thank you too!
thanks for code :D
Please create a web development course 🙏🙏🙏
And this video is awesome 😍👌😊
Thank you 💙
nice
wow... nice
Thank you 💙
Geret sir
Thank you 💙😁
You are really a true genius
Thank you 💙😁
@@CodingNepal I need help. I have a job website and I want to show the expiry date through coding like wordpress job website have. if you have any idea then please help me.
Nice video.
Thank you 💙
I love this channel
Keep loving
Gracias
Bro from which website do you make webpage like the style side is different and the body side is different
What is the tag for?
The tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
Nice intro song by the way
Thanks sir, I try to make input fields required but it doesn't work. Can you please help me to fix it
Have you ever created a part 2 for this video ?
This is a great form. I wish there was a lesson on the form handler. Kindly suggest any ideas. Ty
what I will do if I have 9 forms and want to do the same process. I have tried 4 forms it's working perfectly fine. but from 5th form its overlapping
Can someone tell me how to connect this form to google spreadsheet.
amazing content and form but how can you make this to look also bigger for screens that are more than 27 inches?i felt that its kinda small size form. Which its fine for a registration form but when its a multi step form that has more choices like checkboxs and more selectors?
You've to give breakpoints in media query. Css media property used to make design responsive.
@@CodingNepal yes i know about media query! thats interesting. Could you give me any suggestions about the changes and the number of media queries entries that i ll have to adjust?!
Another solution that i was thinking and i dont know if its optimal or maybe its too crazy but i was thinking if i could create the same form only Grid CSS Layout so its more adjustable without many changes and code in media queries...
That looks awesome,but what's the point of creating a contact form thats not functional?
Thanks dude, working perfectly!
Is it free to use ? (with credits to you obviously)
Yes, of course
IT would be a lot helpful if you could make a working search bar which can give output anything u search from your website plss try
Okk.. I'll think about it.
@@CodingNepal pls it would a lot helpful plsss
When the user submits the information, where does that form entries go?
Information doesn't goes anywhere just the web page refresh automatically.
Hi thank for tutorial, please make a website tutorial like angkanetdotcom. Thx
Okk.
I am not getting the check/tick mark when executed. Could you please help.
I need help, I have a register form for your videos, but by being responsive it does not allow me to see the submit button or other things that are located far below the form and I cannot scroll down, the form seems to be static and does not allow me to scroll.
How can i fix this? :'(
Contact me on Instagram.
Please can you add validation to the form? VERY IMPORTANT
Can you do a Admin ui with metarial design??? It'll us a lot..
Send me some screenshot on my Instagram of your requested program/design.
@@CodingNepal thanks a lot bro... I'm send you the whole link in Instagram.
I appreciate that you took step on this question...
Chake validation and action page
Okk
what website or application did u use for coding (Sorry I'm beginner)
Atom.. Here is the video - ruclips.net/video/55VjXTeYkTE/видео.html
Hello, im finding problems when i try to add the
u need your own kit
kit code*
He may talking about when he put the script tag in his html file it's not became colourful.. There maybe some mistakes on this tag or maybe atom has this problem so please reopen your files in atom.
Please launch Web development course
Okk.. I'll think about it.
6:45
[ padding: TOP | RIGHT | BOTTOM | LEFT ]
padding: 50px 35px 10px 35px;
=
[ padding: TOP | LATERAL | BOTTOM ]
padding: 50px 35px 10px;
Yes I did this because viewers will not confuse about it.
@@CodingNepal Ok, btw nice form 👌
Response tag पर भी video बनवो
Okk.
Yo hellow very nice video ! Im having a problem... When i click on next it goes back to page 1 form. Im new on js so rly having problems to fix it. Any idea ?
You may did some mistakes.. Please download files from description link.
@@CodingNepal Hey finally i didn't pay att to my type buttons. everything is good i rly apreciate your videos ! Thank You
Bro Upload Video , Audio, Music File tag video बनवो
Upload file tag
Okk bro.
Here the nest button is not working..please help
Hey bro, can u make a tutorial on how to make a full website??
It will be very helpful 😄
Please give a reply 🙏🏻
Okk.. I'll think about it.
@@CodingNepal Yaa bro, thanks 🤟🏼♥️
How to display the progress bar if there is a lot of content
12.56
Leren disek
How do I code this?any hints, suggestions and comments are welcome thank you in advance for your help:
The "Name" field:
When the page loads, the first form field should be in focus, meaning it should have a flashing cursor and/or be highlighted in some way.
Create a variable to reference the “Name” element and log the variable out to the console to ensure the correct element is being referenced.
Use the variable and dot notation to set the focus property of the element to true.
Now save and refresh the page, and the “Name” field should have the focus state.
Ask chatgpt
People are irrelevant now
How to validate the form In each step?
I'll make video on it.. Stay tuned 😁
Next button is not working..please help
Bro i have a request 🙏 i am having trouble in my code. Can you please paste the source code here
Contact me on Instagram... I'll give you.
@@CodingNepal let me do that too
Bro, really you born 2002 ? :D
Yes bro.
@@CodingNepal woow, mee too. How long time you teaching a programming? Whats programming language you know?
overflow: hidden;
not working all form is well but the overflow part is not working
You may did some mistakes... Please check out the codes from description link.
@@CodingNepal overflow works only if you set position of parent
Help me to validate this kind of form please in Js😔
how to make cascade drop down in html?
I'll already made many videos on this topic... Visit channel.
There is part 2 ?
Yes. The part 2 of this video is coming tonight. Don't forget to watch.
@@CodingNepal absolutely man.
That's all? I can't proceed to the next page?
Why can't add another page?
This form is not responsive, you can't add more than 3 input field
what is your twitter account
I've Instagram - instagram.com/coding.np
Why no validation???? useless without
can you send the code
Here you can get www.codingnepalweb.com
Did You Really Born In 2002?
Yes
@@CodingNepal Then You're Only 1 Yr Younger Than Me 😅😅😅
Great 😁