How To Create Multi-Step Forms In Bubble.io (Complete Guide)

  Рет қаралды 7,116

Building With Bubble

Building With Bubble

Күн бұрын

Пікірлер: 68
@mindforge481
@mindforge481 7 ай бұрын
This guy is absolute genius. Your teaching skills are offfff the charts your the best, Thank you so much for your help💗💗💗💗
@BuildingWithBubble
@BuildingWithBubble 7 ай бұрын
Comments like this mean the world to me ❤
@andersonprofetadebrito7686
@andersonprofetadebrito7686 8 ай бұрын
I am from Brazil. And I haven't found a tutorial like this here. I had to look for it in English and I don't even know English. Watch subtitled. I want to thank you very much because that was exactly what I needed. Thanks
@BuildingWithBubble
@BuildingWithBubble 8 ай бұрын
This means the world to me! I'm glad it could help!
@vibehighest
@vibehighest 7 ай бұрын
i agree, his videos are FANTASTIC
@BuildingWithBubble
@BuildingWithBubble 7 ай бұрын
@@vibehighest Appreciate it 🙏
@CliniTechGmbH
@CliniTechGmbH Ай бұрын
Thanks very much for your great video. I have faced just one issue. My groups can hide and display again by clicking next or back, BUT, my page is big as I created 4 groups in it and so in preview when next group displays, it goes down and needs to scroll down to see the next group. what mistakes I made? thanks for your help in advance.
@BuildingWithBubble
@BuildingWithBubble Ай бұрын
Hey, happy to help. Under the layout tab for the group, you need to select the option to 'collapse when hidden'. This means when a group isn't being displayed, it won't take up any empty space on the page. Hope this helps!
@vibehighest
@vibehighest 7 ай бұрын
i think i am starting to understand now. please correct me if I am wrong....... custom states, in its most basic form/function, allow groups or elements to be visible when an event or action is triggered, as long as it is not visible on page load and collapsed when hidden?
@vibehighest
@vibehighest 7 ай бұрын
like a show hide function, but the function or state is is showing, can theoretically be anything? i.e. java, a work flow, etc?
@BuildingWithBubble
@BuildingWithBubble 7 ай бұрын
In its simplest form, a custom state is just a way of storing data directly in your page, not within your database. It's great for storing information that you only need access to temporarily. In this tutorial, we only need to temporarily know what step of the form to show. Because this information is only relevant to this page, we can store it in a custom state. Hope this helps.
@apmcintyre
@apmcintyre 2 ай бұрын
Great tutorial Lachlan, well presented and a nice clean setup. I'll be using it in my app!
@BuildingWithBubble
@BuildingWithBubble 2 ай бұрын
Genuinely appreciate it 🙏
@MarceloBusiness-tl3gr
@MarceloBusiness-tl3gr 2 ай бұрын
Excellent tutorial, very didactic and ends up teaching a lot about Bubble within a simple theme. Congratulations!
@BuildingWithBubble
@BuildingWithBubble 2 ай бұрын
So glad it could help 🙌
@MounahBizri
@MounahBizri Ай бұрын
This is amazing! What parameters should I put to my page, so that the size adapt (as I will create several groups, my page height will be higher than what I would like to display) ? Thanks a lot
@BuildingWithBubble
@BuildingWithBubble Ай бұрын
Glad it could help! And on each group, if you set the minimum and maximum height to 0px, your groups will automatically adapt to the exact height you need. Hope this helps!
@kayzchronicupturn1015
@kayzchronicupturn1015 9 ай бұрын
Your teachings are gold! thank you!!!!
@peterdouglasross7217
@peterdouglasross7217 10 ай бұрын
Thanks Lachlan! Why not just use Show and Hide elements actions and toggle visibility in layout tab instead of custom states?
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
Great question! Showing and hiding elements would certainly create the same experience, but it would rely on using more workflow actions. This means that it would consume a higher number of workflow units (WU) that Bubble charges your app.
@pandimus7
@pandimus7 Күн бұрын
Why not to make 1 custom state of the type number, the button will increase or decrease this number respectively, and thus there will be only 1 condition for each group in the progress bar. Group 1 actually without condition and always orange, group 2 is orange when custom state is equal or bigger than 2, and group 3 is orange when the custom state is 3
@JamesAFranklinIINY
@JamesAFranklinIINY 8 ай бұрын
new subscriber! Thank you for all the awesome content I am new to building in Bubble and you have been a BIG help. One question that i could not figure out and no one seems to have this, How would you create a login/registration where the account they are setting up is link to a account already in the app. example they would need to match the Account number when registering and they are just adding there own user name to that account already in the database to link to. (hope i made sense, lol)
@BuildingWithBubble
@BuildingWithBubble 8 ай бұрын
Awesome to hear the content has been helpful so far! And good question. In order to create an account in a Bubble app, it's a requirement to at least have an email. So, if for instance, you already had someones email stored in your database, you could prompt a user to claim that account and reset the password, plus add any additional information they'd like. I'd recommend checking out my tutorial that explains how to create an account for someone else. It covers a lot of the concepts I think you're looking for: kzbin.info/www/bejne/pX3NoJ-BlNJgpNk Hope this helps!
@simplenomade
@simplenomade 8 ай бұрын
Cool mate thanks for the video. Quick question, why not using only one state called "Display-State" type text and give it ["Group1","Group2","Group3"] and check for this values instead?
@BuildingWithBubble
@BuildingWithBubble 8 ай бұрын
Both ways would be correct. I personally prefer to use yes/no fields as these are 'structured data'. It just saves your app from having to load and search for more data (although it's a small difference, it can add up over time). Hope this helps!
@Michael-kp4bd
@Michael-kp4bd 3 ай бұрын
@@BuildingWithBubble @simplenomae I did something those lines, but even simpler: I created a custom state with type: number, and set states as 1, 2, 3, etc for the groups. Then, for the progress bar, you only need a _single_ conditional on that group (e.g. ≥1 for the start, ≥2 for the next form, etc.) to display the correct fill-in coloring. This also makes it more future proof: add a 4th page, and you don't have to add more conditionals on each of your 1st, 2nd, and 3rd progress bar conditionals. (For _showing_ the specific group, you still use "when {state} is 1" , "...is 2"... etc. which is essentially the same as you proposed with text)
@patrickokojie3139
@patrickokojie3139 9 ай бұрын
Really great video! How would I setup a conditional form? Like I have questions I want the user to see only if they chose a certain response on a previous form question?
@BuildingWithBubble
@BuildingWithBubble 9 ай бұрын
Great question! All you'd need to do is create conditions on either the workflow that sets the custom state, or the group element you want to show. For example, if you were to add a condition on the workflow that sets the custom state, you would only set the state when an input fields value = something specific. When this is true, you would then set the state that displays the relevant group. Hope this helps point you in the right directioN!
@patrickokojie3139
@patrickokojie3139 9 ай бұрын
You are the man!@@BuildingWithBubble
@KykykyTPTP
@KykykyTPTP 9 ай бұрын
Thank you for the wonderful video! I have two issues. I have everything set as columns. 1. For some reason, nothing is showing when I load the page. Soi made the group 1 to be visible when page is load but then it won’t disappear when I hit next. 2. When I hit next button on my second group, it goes back to the group 1. World appreciate your guidance
@BuildingWithBubble
@BuildingWithBubble 9 ай бұрын
When you mention that nothing is showing on your page, are you referring to when you make changes to the page within your editor, or when you run a preview of your app? If it's when you run a preview of your app, you'll just need to double-check you've added the correct conditions on the groups that determine when they should be shown.
@patrickokojie3139
@patrickokojie3139 9 ай бұрын
If a page on my form is for the user to select between checkboxes, how do i save the checkbox option chosen to the database?
@BuildingWithBubble
@BuildingWithBubble 9 ай бұрын
If you're working with checkboxes, I'd recommend the corresponding data field be a yes/no field type.
@ghvghvhbhjb1943
@ghvghvhbhjb1943 10 ай бұрын
hello. please make a video about creating a scaning app if it is possible with bubble. i have an idea of app which requires scaning feature.
@kennynassen6837
@kennynassen6837 10 ай бұрын
Hello! I'm working in an agency that works with Bubble. Maybe I could help you with your project!
@ghvghvhbhjb1943
@ghvghvhbhjb1943 10 ай бұрын
hello how can you help me? @@kennynassen6837
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
What type of scanning are you looking for? Are you scanning things like QR codes, or are you planning to scan documents?
@ghvghvhbhjb1943
@ghvghvhbhjb1943 10 ай бұрын
@@BuildingWithBubble thank you for replying to me. I would like to know if it was possible to create a feature in an app that can scan face or thumb like iphone or any other phone when unliocking the phone. Thank you
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
@@ghvghvhbhjb1943 While I've never built a feature like this myself, this should definitely be possible with a third-party integration. I'd recommend research which AWS services offer this, then connecting that to Bubble - whether it be through a plugin or an API.
@patrickokojie3139
@patrickokojie3139 9 ай бұрын
I've created my form, but i'm not seeing the option to collapse the group when hidden. I've made sure to have the container set to "column" instead of "fixed", but I can't get this option to appear. Does anyone have a solution?
@BuildingWithBubble
@BuildingWithBubble 9 ай бұрын
Could you just double-check that the container layout of your page is also set to a column.
@LostAndFoundAnywhere
@LostAndFoundAnywhere 10 ай бұрын
Hi @Building With Bubble. I just want to tell you that this is an amazing vid. I really like your content and all what you post on KZbin. But I have a question, can you build a lost and found software using bubble( If somebody lost/found something he would have to sign in then post what he lost/found. if somebody found someone's lost object, they would chat in a built in chat with users page. there is also a search page to search for lost and found items.)? Please that would be absolutely amazing. Thanks!
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
Thanks, it genuinely means the world to me! And I'd be happy to add something like this to my list, although my LinkedIn clone course will cover most of the same features you'll need. By the sounds of it, the application would follow most of the same principles as a social network, but it'd just be used for a specific use case.
@arthurkeller100
@arthurkeller100 10 ай бұрын
Great video! Its possible to create a sales engagement app with bubble? its like a crm but only for pre sales, it show your task with each lead day by day meetime is an example
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
Thanks! And yes, this would definitely be possible with Bubble 👌
@arthurkeller100
@arthurkeller100 10 ай бұрын
@@BuildingWithBubble any chance we have a tutorial like the salesforce one? 😬
@haroldroyceanonuevo531
@haroldroyceanonuevo531 6 ай бұрын
But How can We add a Validation? Ex. Next Button only when all input fields have a value then go on next step
@BuildingWithBubble
@BuildingWithBubble 6 ай бұрын
Good question. You can do this by adding conditions on the 'next' button. For example, your condition would be: Only when 'input A's value is not empty, AND when input B's value is not empty'. When this condition is true, you could make this button clickable. Hope this helps point you in the right direction!
@ColdysOwnage
@ColdysOwnage 10 ай бұрын
Live your Videos! Coud you do a „Typeform no Code clone“?
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
Appreciate it! And I'd be happy to add that one to my list 👍
@haroldroyceanonuevo531
@haroldroyceanonuevo531 6 ай бұрын
Can it work on reusable element with pop - up?
@BuildingWithBubble
@BuildingWithBubble 6 ай бұрын
Absolutely 👌
@sebutilitaire6313
@sebutilitaire6313 10 ай бұрын
Great video! Can I pay premium course with crypto ?
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
Glad it could help! And unfortunately, I don't take crypto as payment at this point
@kennynassen6837
@kennynassen6837 10 ай бұрын
Nice video! It's possible to do it by using the URL too no? Sometiles custom states are a bit tricky hahah
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
Great question! Yes, it's definitely possible, but the downside to using URLs is that they work too well. If the user refreshes the browser, I'm under the impression that the form should refresh back to the start. When you're using custom states, this will happen, but when you're storing values in a URL, it will remain persistent. There's pros and cons to both options!
@w.g.meijer7388
@w.g.meijer7388 5 ай бұрын
thanks dude! great vid
@BuildingWithBubble
@BuildingWithBubble 4 ай бұрын
Glad it could help ✌
@realhercules
@realhercules 10 ай бұрын
Thank you!
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
My pleasure 🙌
@peter_0093
@peter_0093 10 ай бұрын
Thank you
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
I got you 🙌
@getshitdone10
@getshitdone10 9 ай бұрын
collapse when hidden is not availiable in bubble
@BuildingWithBubble
@BuildingWithBubble 9 ай бұрын
You'll need to set the container layout of your page, as well as any other groups on your page to be a column. This option will then become available.
@getshitdone10
@getshitdone10 9 ай бұрын
@@BuildingWithBubble Thanks for replying man you're a G
@Sam-vz7pf
@Sam-vz7pf 10 ай бұрын
Thank Mate. Your serving the bubble community.
@BuildingWithBubble
@BuildingWithBubble 10 ай бұрын
My pleasure ✌
Good database design in Bubble
21:35
Matt Neary
Рет қаралды 41 М.
How to build a Dashboard in Bubble.io
27:55
Fabio Bergmann
Рет қаралды 10 М.
Life hack 😂 Watermelon magic box! #shorts by Leisi Crazy
00:17
Leisi Crazy
Рет қаралды 80 МЛН
Крутой фокус + секрет! #shorts
00:10
Роман Magic
Рет қаралды 41 МЛН
13 Things To Remove From Your Website Immediately
12:33
Orbit Media Studios
Рет қаралды 323 М.
How To Create Horizontal Scrolling Repeating Groups In Bubble.io (Complete Guide)
24:43
Learn Bubble.io in 30 Minutes
28:45
Jesse Showalter
Рет қаралды 99 М.
10 Ways To Use NotebookLM, in Less Than 10 Minutes
10:00
Blazing Zebra
Рет қаралды 83 М.
How To Create Multiple User Roles In Bubble.io (And Restrict Features)
20:14
Building With Bubble
Рет қаралды 6 М.
Learn to Build an AI app with Bubble
1:37:00
Bubble
Рет қаралды 35 М.
How To Build An Overlapping Repeating Group In Bubble.io (Complete Guide)
14:36
How to Design Better in Bubble.io (Tips & Tricks)
40:31
Max Kubanek
Рет қаралды 4,8 М.
How To Build An Email Platform Like Mailchimp With No-Code Using Bubble
3:56:37
Building With Bubble
Рет қаралды 1,3 М.
Life hack 😂 Watermelon magic box! #shorts by Leisi Crazy
00:17
Leisi Crazy
Рет қаралды 80 МЛН