Build your own CRM with Bubble.io NoCode - Part 1

Introduction to Building a CRM with Bubble.io

This Bubble tutorial video is the first in a series of how to create a no code CRM built with Bubble.io. We're going to be breaking into a number of different blocks and this first episode of this mini series is going to be about building a login/registration workflow for your users. This is a natural place to start as we're going to be implementing all of the best practices of Bubble including privacy rules, protecting user data as we go along. And so very quickly we'll be getting to a part in the app where we want to be running the app as a user to check that all of our data types or everything in our database is where it should be and it's all nice and secure.

Planet No Code Resources

But before I launch into it, did you know that we have got over 160 Bubble tutorial videos available on our website. Some of them you can only find there. You can search YouTube as much as you like but they are for our members and you can find out more about becoming a member at planetnocode.com.

Setting Up the Initial Page Layout

But here we have a blank canvas in Bubble. I've added nothing to this app. I've simply created a new app and I'm going to start, like I said, with registration and login. So my page here, I'm going to set the layout to align to parent. I'm going to give the background a gray color and I'm going to add in a group. And I'm going to be doing a sort of rough but all right looking UI build as I go along and then maybe later on I'll include a whole video about just improvements that we can make to the UI. So it's not going to be perfect but I'm not going to try and make it look rubbish either.

Creating the Registration Form

So we are going to give this a column and put some padding in there. And this is going to be one of the boxes for one of our forms for login and registration. And I'm building it on index because I'm going to set my app up so that when people visit the domain name that I attach to this Bubble app, they will be taken to login or register. And then actually the actual dashboard for the CRM is going to be a different page. And that's going to help me add in workflows if the user is logged out, send them to index. If they're logged in, send them to dashboard, that sort of thing.

Adding Form Elements

So let's add in some text and I'll use the H2 here, say login. And actually I'll do register first and then I am going to add in some text and I'll call this one, this is going to be my label for my form items. From an accessibility point of view, it is not best practice to simply rely on placeholders because they don't always interact well with screen reader software. So I'm going to add in a label and an input for every field that I'm creating. So we'll have email, get rid of the min height, set the width to 100%. And I'm going to add in my input, my text input. These tend to look good at around 55 or 52. Also going to make that 100% width.

Styling the Form

And I'm going to group these together and you'll see why in five seconds because then I can use the space between. And so I can add in a gap for. Tends to look quite good. And then I am going to duplicate this, right clicking on the group, pasting in the parent of the group. And so this is going to be password. And now I am going to select both groups. We can see, pasting I've selected these two here and I am going to put these into a group and this is going to enable me to put a nice uniform gap in between each of the four elements.

Organizing Form Elements

So group elements in column. I don't think that worked. No, I had the wrong bit selected. So I need to make sure I have group C selected and then I'm holding shift and I make sure I've got group B selected and then group elements in column. That's what I was going for and then I can add in a nice uniform gap for 24. Too much, let's go 18. And I'm also going to add in a name field. So, send this up to the top, right. Let's update our labels. We'll say first name.

Configuring Input Fields

And I am going to update the placeholder because, let me show you. It then updates the internal element label within Bubble and this is really helpful when we're trying to connect our forms to a workflow because we want to know what different bits of our form belong where when we're assigning a form input to a field like first name on current user. Name email, we'll put enter your email. And I'm going to change the content format to email. This means that Bubble will reject and show an error if someone doesn't enter an actual email address. And we'll say enter a password and make sure that this content type is password.

Adding the Register Button

Cool, lastly, I think we need a button. So I'm going to add a button into my form and I'll say register. Okay, yeah, it's not amazing UI design but it's also not untidy either. In fact, I'll add a little border radius to here. Cool, right, let's set this up with a workflow.

Setting Up the Registration Workflow

So when the user clicks register, we add a workflow here and our action is going to be account, sign the user up. And then this is where it's helpful that by replacing the placeholder text with our own, if I type an email, I then get Bubble's automatically renamed the email input to be enter your email. So it helps me match up and we'll go password. And change another field because we're also taking a first name. And so I'm going to create a new field and say first, oops, first name and make this of type text.

Understanding the User Data Type

And so I've created the field on the user data type. Let's have a quick look at that. So in data, I've only got one data type so far because it's a CRM, I'm at least going to create contacts at some point, but right now I just have user. And user is a special data type because the user data type is the only data type that you can put the register user and the sign up user workflows and kind of anything to do with user authentication that is linked to current user, you have to do that through user.

Common Mistake with User Types

And the mistake that I see quite a few people making is that they think, oh, my app's got multiple users. Maybe I've got admins and then I've got team leaders or I've got buyers or sellers, the sort of thing you get in the marketplace. And so they attempt to create a buyer user type and a seller user type with creating a new data type. Now that could be used if you indeed link them all back in to a user type, but you can't give a seller, if you create a new seller type here, you can't give that seller the ability to log in and register, you can only give that to users.

Completing the Registration Workflow

All I was trying to point out here before I went off on a bit of a tangent with that, is that the first name field you can see it's been added in to the user type and we created that back on the workflow screen. Let's link this up to input your first name. And then when the user's signed up, what do we want to do? I think we should send them to another page. So I'll create a new page here, I'll call it dashboard. Oh, my spelling's all over the place today. I'll just click create and it's going to be blank. And we're going to pick that up in another tutorial.

Adding Navigation to Dashboard

So we're on the dashboard page, I'm going to go back to index and finish this off by giving a go to step in our workflow. And the destination is dashboard. Quick word on go to steps. If you add in go to steps without conditions, then Bubble knows that if you're going to send the user to another page, it has to come at the end of a workflow. Otherwise you're going to get an issue showing up in the top here. You can use conditions to say if the user is this user type, send them here, if they're that user type, send them elsewhere. In that case, you can like stack, go to workflow actions in the same workflow.

Creating the Login Form

So this is going to sign our user up and send them to dashboard. We're then going to, I'm going to copy and paste this. And because I have my layout set to align to parent, the new one I've created is actually on top. So I have two identical ones, but they're sitting on top of each other because they're both set to center in the parent container type. So I'm going to name this one register so that I can see more clearly in my elementary. And I'm going to name this one login.

Organizing Elements in Bubble

Now I keep renaming elements to the minimum. I know some people, they build a Bubble and they really want to have an ordered elementary here. And so they rename everything as they create it. I tend to only rename if I think it's going to be genuinely useful to me when I'm looking for an element in the elementary. So for example, these groups contain quite a few elements. Now, lots of nested groups, text labels, inputs. And it just helps me be able to tell the difference, especially as they are both visible on the screen at the same time.

Customizing the Login Form

But I'm not in the habit of renaming every single group or renaming every input, especially inputs, because then if you change the input placeholder and you've renamed the input element, Bubble won't automatically update in that case. And you can just end up with lots of duplicates that you can't tell which one's which. But anyway, let me hide by clicking the I button here. The register one, so now I'm definitely looking at login. So I'm going to change this to login, my header here. And I'm going to get rid of the name field. And then email address and password are the same. And so I'll change this to login.

Setting Up the Login Workflow

And I add another workflow. And so this workflow is going to be log the user in. And I match up the email address. Ah, now I do have multiple fields called enter your email address twice. So what I shall do is I'll just change this one to your email. Otherwise you could relabel it. I'll change this one to your password. So this is your email, then your password. And I am going to do the same thing, which is go to page. And set it to dashboard.

Previewing and Adjusting the Layout

Let's preview and just see what's going on. Okay, so I get some rather ugly UI because they're both sitting on top of each other. So I now need to set up a way to only show one or the other. And I would suggest in terms of user experience that you get a little bit more complicated here than what I'm about to show you. Because you might well want to send your users to the same screen, whether they're registering or logging in.

Using URL Parameters for Display Logic

But you could use URL parameters to dictate which one is showing. And that can be useful because if you've got a, if you're, if you've built your landing page through Bubble or outside the Bubble, say Webflow or Framer or WordPress, you might want to have a login and a register button that are separate. And you can use a URL parameter to show to determine which one is shown. But in this instance, I think I'm going to have users showing the login because I want the better experience for my existing users.

Implementing Toggle Functionality

So register, I'm going to say element visible on page load no. And then I'm going to click collapse when hidden. And login, I'm just going to click collapse when hidden. That means that I should now only see login because the register group isn't visible when the page loads. So what you see quite a lot in SaaS applications is we put something down here. And I'll say, so this is the login. It's going to say, need an account, create an account. And I'm just going to export. Huh. Need an account, create an account. Okay, and so when this is clicked, I want to show register and I want to hide login. And then I'm actually going to copy and paste this, go into and hide my login, show my register, paste it in here. And I'll say, already got an account, login.

Using URL Parameters for Toggle

Okay, now there's several different ways I could do this. I could use show hide actions in a workflow, but actually I think I'm going to use the URL parameter instead because it just illustrates something a little bit different and extra in this video. So I'm going to have both of these hidden and I'm going to add a condition. No, in fact, I have it visible and I'll add a condition to register. And so I'm going to say get data from URL parameter and I'll say show register. And I'll say is yes. And then say element is visible.

Finalizing Toggle Functionality

So this is a way of carrying data between even different websites is you can put data in the URL. I'm going to show you how in a moment. But I need to create a mirror image of this on login. So I could do this and then on ticket, but actually whatever was to change this parameter, the when statement here, I then need to update into location. So instead I'm simply going to say when register is visible, hide login. Let's preview that. So we see login by default and the debugger mode here is an example of a URL parameter. It's saying debug mode equals true. And with URL parameters, the first one starts with a question mark, then you give it a label equals and then the value. Any following ones from the first one have to start with an ampersand symbol.

Testing the Toggle Functionality

So it was show, register equals yes. And now we see register. Now how do I swap between them? I'm going to add a workflow to login and say navigate to index, add parameters, show register and then I'm just writing in yes as a text string. And then on register, already got an account login. I'll just say go to page, index. Now I'm counting on this wiping it out. Yeah, you can carry forward URL parameters by clicking this button here, but that would actually mean what we're doing now makes no sense at all.

Conclusion and Next Steps

So let's try that. So I'm going to get rid of the show register URL parameter and then I'm going to click here and then click here and it swaps me between them. And remember, let's get rid of the debug mode to avoid confusion. So this is a smart way to approach it because it means that if I send users to this web address, I know that they're going to get login. If I send users to this web address, I know that they're going to get a register. I also know that if for some reason they have clicked the wrong button, they can easily toggle between the two themselves. So that's the end of part one.

Let me have a look at my notes. Part two is going to be actually building out a dashboard and then in the following parts of this mini series, we will be covering topics such as creating contact, data types, how to add and edit, entries in your database, setting up for your users. We'll cover privacy rules. We'll do a little bit of UI improvement. We're also going to cover adding your fields to contacts, tags, filtering contacts and exporting contacts. So if you're not already subscribed and you've watched this far in this video, subscribe, hit like, it really helps us out on YouTube.