How to create a multi-step form

Need help
1

Hi,

I am trying to create a multi-step input form that takes you through the stages one at a time. I am new to bubble and one way i thought of doing this was by using popups and then each time the user clicked on the ‘next’ button they’d be moved to the next popup until they had filled in all the fields.

Firstly i cant see a way to use the workflows to navigate from Popup A to Popup B it only seems to allow for navigation between pages.

Would it also be possible to store inputted information and spit out a result depending on the information that the user inputs?

I am trying to create a price comparison website so when a user enters their energy information our database can complete calculations based on user input and display energy quotes.

I will link an example of what i was trying to do by coding but wanted to try and continue the project on Bubble.

Thanks in advance!

My multi-step input form - Please try it and see how it works and if this is possible in Bubble:
http://kudoschoice.com/

1 Like
2

You need to use the hide and show workflow actions under elements.

When you click the button to move to the next pop-up, hide popup A the show popup B.

Personally, I don’t like using popups for this because they flash on the screen. If you use groups instead, you can do the same thing. Just make all of them, except the first one, not visible on page load and use the same hide/show actions. If you want to make it fancy use the aminate action instead of the hide/show.

1 Like
3

Thank you so much!

4

The best way is using custom states with numbers and assign a value to your buttons for example current tab +1 for the next step or - 1 for back

3 Likes
5

Thank you! Do you have any resources for creating custom states?

6

You can search in the template library multi step form if you don’t want to build from scratch

1 Like
7

This topic was automatically closed after 70 days. New replies are no longer allowed.