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

Did you find this page helpful?