Best Way to Build a Multi-Step Form?

Developer corner
1

I’m in the process of building a multi-step form, but before I get too far, I’d like to understand if there is a preferred approach. I’ve seen the multi-step form in the marketplace template and the one in the starter kit. One of them appears to be using tabs to display the different steps, while the other looks like it has the different form containers set up in various divs/dropzones.

Additionally, I’ve seen mentions of building one form container per page and setting up next and back buttons to navigate between pages. I started to build my multi-step form on different pages because I was struggling to customize the library or template components. I have since figured out how to use the multi-step form templates for the most part, but it still feels a little confusing to me how to fully customize them.

So that’s why I’m asking the community what the best approach is. Also, are there any video tutorials or resources I can use to better understand how to approach building multi-steps of any kind in WeWeb?

Thanks for the support and knowledge transfer! Cheers.

2

I had a lot of trouble with the multi step form. I made a video, its not perfect and I have updated my setup since I made this but it might give you an idea of how you might want to approach it…or not.
Something I forgot to mention in the video is that the green div is a form container. The submit button and all the form data has to be inside a form container otherwise it wont work.

https://drive.google.com/file/d/1jUqmImJdSPScBjoGDQpV2o48JgVli3cG/view?usp=sharing

Other things I should have done is instead of turning off the buttons with the “display” I should have used conditional rendering.
I do ramble a bit in the video, sorry lol.

1 Like
3

Thank you for sharing this. I am going to build out a multistep today. I spent yesterday researching and learning and your video was really helpful. It’s similar to the other ways I have seen it setup. I think Im going to try to set my forms in tabs. But also like how you have yours sliding.

1 Like