Help figuring out this layout!

FEM Project link: https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ How to plan out this layout? Are steps different html pages? Is the whole app a giant form? Is each step form in itself? I would really love to know how it would work in real-world! Also doing it HTML/CSS/Vanilla JS. So no React or other frameworks. Cheers!
Frontend Mentor
Frontend Mentor | Multi-step form coding challenge
An excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.
9 Replies
MarkBoots
MarkBoots•2y ago
I think i would make it 1 form divided in fieldsets for each section. then toggle visibility with the buttons. You will need some js for that
Dovah
DovahOP•2y ago
Sooo wrap it all up in a singular form?
MarkBoots
MarkBoots•2y ago
yea in the end it is 1 form that will be send to the back end (in the real world)
Dovah
DovahOP•2y ago
Is dividing them in fieldsets mandatory when having a multi-step form?
MarkBoots
MarkBoots•2y ago
no, but it will make it easier. you can have extra validation with fieldsets. for example when a fieldset is not filled completely, don't show the next button
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Dovah
DovahOP•2y ago
@markboots. Ohhh thanks! 🙂 @kjohn Yea will do that. 🙂
MarkBoots
MarkBoots•2y ago
good luck, this is not an easy challenge, take your time
Dovah
DovahOP•2y ago
@markboots. Yeah I'm kinda nervous but excited in the same time. Can't wait to completely get lost in spaghetti code down the road. xD
Want results from more Discord servers?
Add your server