Creating a signup & login widget with a dropdown menu

Creating a Dropdown Login and Registration Form

Here's how to create a drop-down 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 sign-up button at the top here. 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 my attached to sign-up and I then need to apply a slight negative offset and I can click in the box and just use the arrow keys on my keyboard to finally adjust it. So that's in line and looking neat and then let's give it a few down from the top. Perfect!

Adding Input Fields for Registration

Let's now put in some fields so I need to have an email and passwords the bare minimum I need for a registration or sign-up 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 up. Make this 100% width. Some of these principles are just part of building your app with responsiveness in mind. Then let's put in some spacing in between and go on to our input.

Setting Up Email and Password Fields

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 this can't be empty as it's an essential part of our form and then we have password also I've just copied and pasted it so that's also not empty. We'll just change the placeholders 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 setting it up so that it will be easily responsive in the future. This is going to say register.

Creating the Registration Workflow

Okay now let's work on our workflow. So when register is clicked we go into account and we sign the user up and we just match up the fields. I've got a couple of ones called email. I think that's because okay yeah so from a previous demonstration I check out that video I've got how to do as a pop-up. I'm going to delete that for now because it's just creating some confusion. So I've got two email fields labeled the same so let's go back here and input email input 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 and then let's go and see what it looks like on the front end.

Implementing the Registration Workflow

Okay 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 focus registration. Right now we should have something we can test. So click sign up there it is. So let's go. I think I might need to make that unique in case I've tested with this before and register.

Testing the Registration Process

Okay 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 a way to test that and 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, remove that, when the registration process completes this changes from no to yes because I am now logged in. Now 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 going to stay there.

Creating the Login Workflow

Okay right now let's work on login. So I'm just going to 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 hide registration so I'm not confused. Okay right so now we have login so let's rename this and because I copied and pasted it using a keyboard shortcut the workflows are not intact if you want to copy and paste will workflow you have to use the built-in edit button in Bubble yeah copy with workflow.

Finalizing the Login Workflow

So here I would go to account, sign the user up, email address. Alright now I have created for myself multiple fields so I'm going to rename this to login so as to not get confused. There we go matching up the fields and let's add in a similar step from last time of hiding the group focus. Okay so now if 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 again.