How to create a registration or sign up popup in Bubble.io

Adding a Registration Pop-up to Your Bubble App

Let's add a registration pop-up or modal to this Bubble app. I have my header menu bar here and the beginnings of a homepage. And so I would like something to happen when a user clicks sign up. So in my Bubble app, I'm going to drag in a pop-up and just rename this register. Then so that it's a little bit neater inside. I'm using the new response vengeance. So everything I do is built with responsivity for my app in mind. Responsiveness, that's the word.

Creating the Registration Form

So this is going to be a column and I'm just going to put 30 pixels of padding around each side. Right, what does my registration flow need? Well, at the bare minimum, it needs email address and password, but I'm also going to do a name field. So I'm going to drag in an input here. And again, building with responsiveness in mind, I'm going to set all of these to be 100%. That's 100% of the inside of the element that is containing them. Let's apply a nice gap in between each of them.

Setting Up Input Fields

So right, for email, no, let's go name first, for name. So let's say first name. So first name is a text element, I believe, as it is. I might decide to limit the characters. There we go. And all of those other options are good. So I'm just going to copy and paste this. And you can do that with the keyboard shortcuts you saw on the screen or using the edit menu up here. And so this one is going to be email. Now I'm going to change the content format to email. That way, Bubble will cleverly reject any content that doesn't match the formatting of an email. For example, having an @ symbol somewhere in the middle, followed by like a domain name at hotmail.com or anything like that at the end. So that's my email. Let's rename my placeholder. There we go. And copy and paste that again. And then this one is password. And Bubble can do the same thing with password. There's a number of behind the scenes, like you can do password verification or confirmation. But one of the main things when considering the content format is that password will ensure that the text appears as the circles obscured rather than as text on the screen.

Adding a Sign-up Button

So that's all good. And then I need a button for the user to click afterwards. So again, button is going to be made with... 100%. And let's call this sign up.

Creating the Workflow

Okay, so the workflow. Let's go back to the very beginning. First workflow is display the popup. So clicking on my sign up button, and then go edit, create new workflow. And then elements actions show... Popup. That's all I need to do there. Using the elementary here, I'm just gonna focus back on my popup. And I'm a stickler for things to be neat and tidy. There we go. My button, start edit workflow. So this is an account action, and it is sign the user up. And then I just match up the field. So the email address goes in there. Password goes in there.

Adding a Custom Field

Okay, and then I have to add a field. So create a new field, we'll call this first name. In order to store additional content in the database type of user. And so then I'll just match this up again. So this is input first name. And then I want to hide the popup. So that is an element action, hide. Okay, and so that will sign my user up. And once they're signed up, they're automatically logged in. You don't have to follow step one with a login workflow. No, signing up logs the user in.

Adding Field Validation

Just thought there's one thing that I've missed here. I want to ensure that these fields are not empty. Okay, and let's preview that. So click sign up. Okay, and I get this popup.

Enhancing User Experience

Let's add in one more step actually that's gonna make this a really, we want to be making our apps so easy for our users to use. And here's something that you can do to improve that. So when the popup is shown, let's put the blinking cursor into the first field, which is first name. So I go set focus first name. And we're just being really helpful to our users. We're removing a step.

Testing the Registration Process

There you go, it's ready to go. So I can put in mat and then mat demo at planet. Nocode.com, put in a password. Sign up. Okay, and there you go, I'm signed up.

Checking User Login Status

Now, how can we, when we're developing, last thing I'm gonna show you in this video, when we're developing, how can we know whether a user is signed in or not? Well, a really easy way, I just find somewhere in my app here, is to go current user is logged in. And this will return a yes or a no. Okay, so they are logged in, even though I've refreshed the page because of browser cookies. Like it remembers that I'm a user and I'm logged in.

Logging Out Users

If they want, if you want them to log out, we'll cover that in another video, but it's just a workflow process, again, using the, if I'll show you. So if you wanted to sign the user out, obviously you wouldn't put in this workflow, that makes no sense. There you go, log the user out is in the actions, log the user out. But for now, there you go, they're gonna remain logged in for at least a good few days, depending on how you've got cookies set up with your app.

Conclusion and Feedback Request

If you've got any other suggestions or comments for videos, please leave them in the comments section below. We love to get feedback and it helps us guide the sort of videos that we'll be creating in the future.