Transcript

Bubble is used across thousands of websites, making every type of application you can think of! From building your own startup, to building something for the company you work for, or something personal, Bubble makes making those applications accessible to anyone. That's what Bubble can do.

Before you jump into the Editor, here are four quick steps to build a working sign-up form so your app can register users.

In the Design tab, drag or draw elements onto the canvas and create the design of your form from scratch. Or, to save time, drag in pre-built components from Bubble's Component Library. Let's drag in a signup form component.

2. Data tab

In the Data tab, view, modify, and create data types to flesh out your app's database. You'll notice the pre-built "User" data type comes with every app. By default, the User data type is set up with built-in fields including "email", so you can store user email addresses when the user signs up. Passwords will be stored on the User as well, but Bubble stores and encrypts passwords behind the scenes to preserve everyone's privacy.

Let's add in our own custom field to the User data type, like "Name", as our pre-built component asks for it in our form. Each field has its own "type", so be sure to set the right one. A "Name" field would be type "text".

3. Workflow tab

Now it's time for the Workflow tab, where we connect our design to our data. Here, you can visually program the functionality of your pages with triggered events and corresponding actions. We can set up any event directly from the Workflow tab, but we can also start them from the Design tab.

Let's start a workflow on the "Sign Up" button. When starting a workflow from the Design tab, the "Element is clicked" event will automatically be created for that element. Let's find the "Sign the user up" action. This action requires us to connect our form from values where the user inputs their email and password, and we can do so by dynamically selecting each Input element's values.

There are other properties on this action that are optional for you to discover, like a password confirmation field. We can also match our custom field "Name" by clicking "+ Change another field" and mapping "Name" to the relevant Input from our signup component.

After this action runs, let's add a Step 2 action to navigate the user to a page in our app that they wouldn't have had access to without being registered.

4. Run-Mode

When you're ready, switch to run-mode for your app by hitting "Preview". Here, you can see the design of your page and test out the signup form functionality. After you sign up, you'll be redirected to the page you defined, and over in the Data tab under "App data", you can confirm that your app has a new registered user!

Alright, now that your app can accept users, you can start building your app functionality. It's your turn to take it from here. Explore the Editor and start building your app now!