Here's how to create a dropdown login and registration form as part of the header on your Bubble app. So here's my Bubble app as it's coming along and I have a login and a signup button at the top here.
Group Focus
So we do this by using a group focus container and a group focus has to be attached to another element.
So this is going to be attached to sign up. I then need to apply a slight negative offset and I can click in the box and just use the arrow keys and my keyboard to finally adjust it. So that's in line and looking neat. And then let's just give it a few down from the top. Perfect. Let's now put in some fields so I need to have.
A an email and passwords, the bare minimum I need for a registration or signup form. So I'm using the new responsive engine. This is going to be using columns let's add in a little bit of padding all around the side, just to neaten it up make this a hundred percent width.
Inputs
Some of these principles they're just part of building your app with responsiveness in mind. Then let's put in spacing in between and go onto our input.
So this is going to be of type email. That's just so that Bubble can validate whether it is indeed an email that's been entered there. We also need to make sure that this can't be empty as it's an essential part of our form. And then we have password also just copy and pasted it. We'll just change the placeholder. So it's really clear when we're testing it. Okay. And then last thing we do is we need to have a button again, just making, setting up so that it will be easily responsive in the future. So this is gonna say register.
Registration workflow
Now let's work on our Workflow. So when registers clicked we go into account and we sign the user up and we just match up the fields. So. Oh, I've got a couple of ones called email.
I think that's because, okay. Yeah. So from a previous demonstration, check out that video. I've got how to do it as a popup. I'm gonna delete that for now because it's just creating some confusion. Cause I've got two email fields labeled the same. So let's go back here and input, email. Password. Okay. If you want to add any other fields like first name you would do so here, but I'm not planning to do that. Let's go and see what it looks like on the front end.
And nothing happens. I need to have a workflow for when the button is clicked. So sign up is then going to element actions, show This is where I should have labeled things to begin with, call this registration, now I can find it much more easily in here. Group focused registration. Right now we should have something we can test. So click sign up. There it is. I think I might need to make that unique in case I've tested with this before and register.
Debugging
Now we saw that Bubble did something because the loading bar flashed across the top and I know from experience that I'm now logged in and I even have it on this page from a previous demo away to test that. You might have noticed it. I've got this piece of text here saying current user is logged in. And if you rewind the video 10 seconds, you'll notice that when the registration process should move that when the registration process completes this changes from no to yes, because I am now logged in now.
Hide Group Focus
There's one other thing we could do to make that a really good experience, which would be when register is clicked to hide the group focus. Otherwise it's just gonna stay there.
Login Workflow
Now let's work on login. So I'm just gonna copy and paste my registration one and name that as login. Okay. And because I want it to appear in the same place I'm going to have it so that it's still attached. The reference element is sign up. Let's just. Registration. So I'm not confused. Okay.
Right. So now we have login, so let's rename this and because I copy the paste that using a keyboard shortcut, the workflows are not intact. If you want to copy and paste with a workflow you have to use the built in edit button in bubble yeah. Copy worth workflow. So here I would go to.
Sign the user up email address. Alright. Now I have created for myself multiple fields. So I'm gonna rename this to login. So it's to not get confused. There we go. Matching up the fields and let's add in that similar step from last time of hiding the the group focus. So login. Cool.
So now if oh, we need a show. We need a show. Of course. So let's go back into login. Here we go. Element show group focus, login.
Let's test that.