Now that we have designed our header, we need to add the workflows that will make these buttons clickable.
1. While editing the header, drag a pop up onto the page. Double-click to open its Property Editor to adjust its width and height and name it “Popup Signup.” Next drag a group into the popup. This will act as a container for the other elements in our popup. Let’s go ahead and center it horizontally and vertically.
Now we can drag a text element into this group and select a default style of “Heading 2 Dark.” By clicking to “Edit style,” we can customize this type of text to match the brand of our application. After this, change the content of the text to “Sign Up” so that we can start customizing our form.
Bubble gives us the ability to make forms with all sorts of fields. For a simple sign up, select an input element, draw it within the container group, then copy and paste it. we will adjust the width to match the container group and the height a bit shorter.
Now we can tell Bubble what each input should expect. The first is for emails, so we can set the “Content format” to “email” in the Property Editor, so Bubble knows to only accept text with an @ symbol.
Our next input is for passwords, so once we set the “Content format” to “password,” Bubble will set the text to hidden when the user types their password in. You can adjust the form design as much as you would like, then we can add a button to the form for users to sign up.
2. Drag a button into the container group. Set its style to “Secondary button” and click “Edit style” to customize it for your application. Then you can change its text to “Sign up” and re-center it in our container.
Now we can program the workflow for our “Sign up” button. With the Property Editor open, find and click the button to “Start/Edit workflow.” This automatically starts a workflow for when this button is clicked, and we can add actions to it.
Click to add an action, and from the “Account” section, select “Sign the user up.” Bubble will now tell us we have some issues to be resolved because it’s reminding us to fill out the fields for our sign up form.
If you click into the email field, Bubble will open a list of dynamic expressions that this workflow can find. In this case, we’ll select our “Input Email” and build out the expression to read “Input Email’s value.”
We’ll do the same thing for password, and all of our issues will be resolved. Just like that, our users can now fill out this form to sign up to our application.
Let’s add one more action to this workflow. Under “Element Actions,” we can select “Hide” in order to hide our sign up popup once the user has entered their email and password.
We will return to our Design tab and click to edit our header. Just like we did with the button within our popup, we can select the “Sign Up” button and start a workflow for when it’s clicked.
By searching for the “Show element” action, we can make sure to show our sign up popup when the user clicks to sign up.
3. Repeat this process for a second pop up.
With our sign up functionality ready to go, we can do the same thing for logging in.
Copy and paste the sign up popup, and change the text to reflect logging in. Start a workflow for when the login button is clicked, and this time set its fields equal to the corresponding email and password inputs. Finally, make sure that you have an action to hide this popup as well, then return to the header.
Select the “Log in” button and start a workflow for when it’s clicked. Just like with the workflow for button “Sign up,” this only needs one action to show the login popup.
4. Preview your application.
By refreshing our preview, we can see our sign-up system in action. Try clicking the “Sign up” button and entering a username and password.
Then open your application’s editor and navigate to the Data tab, then to App Data. You can select the view for “All users” to see that our test user has signed up successfully.
Challenge: Create a custom sign up and login system for your application. Try adding features for the user to reset their password or verify their email address.
Built on Bubble
