Section 2 (Lesson 3/8): In this lesson, we're diving into the essentials of form design. A well-designed form not only enhances user experience, but also plays a critical role in data collection and user engagement.
​

What you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Okay, welcome back. Diving straight in, we're going to deal with the form design now. I'm going to move this to the left-hand side, and I'm going to click on Group Column. I'm just going to change the column appearance back to our white color. And in fact, if we just re-click on "Standard Group," in the "Style Attribute" dropdown, it's better to use an attached style that's not been overridden where possible.

Let's grab some text. So click on the text element, drop it on the page. Now, I am just going to move this across to the center because I'm using "Align to parent" as well. I'm going to type the words "Create an account." I'm going to be using sentence case mostly for this course, this is just a design choice. The style attribute we're after is a H5. (Remember, if you don't have some of these styles, jump back into my app, and you can basically right-click copy a style, and then in your app, you can right-click paste the style, okay?)

And then we're going to center-align this text. Now, you've probably seen the word "Overridden" a few times already, and this basically means that I have a style selected with all of those style attributes, but I might have changed a single attribute, such as in this instance, the alignment. And in this case, Bubble would just let us know that the style doesn't match the exact styles that you've created, but it's a style that you started with and then you changed something. Okay? That's all good.

Next on the Layout tab, I'm going to remove the fixed width, the min width, and the min height. Now I'm going to group this in a group because we need to add other elements much like we did on the left-hand side. I'm going to right-click, and I'm going to choose "Group Elements in" --> a "Column container." I'm going to name this "Group Container" because it's containing our elements, and I'm going to give myself some height to work within: 480. 480 is just a guess at the stage, it will probably be far less than 480. And I'd also like you to change the min width to 480 as well.

Now we're going to grab some more text under Visual Elements. Click once, and then drop it inside this new Group Container. I'm going to paste in text that are copied from our demo app, and then you can type it out. And it reads, "Select company or candidate and set your profile in the next step."

Once you've done that, let's select Body Small, and let's center-align this text. Over on the Layout tab, we're going to choose Horizontal alignment in the center or centered. We're going to uncheck fixed width, remove min width, and remove min height, and do have "Fit height to content" checked.

On the Group Container itself, let's choose a gap spacing of 32 pixels. Now, this will be the gap spacing on this Group Container. We have quite a few elements to drop in this container: we've got the text and the subtitle, then we're going to have the selectable buttons, then we'll have inputs and buttons. And what we'll do is group similar elements together, okay, so inputs want to be closer together, but the button wants to be further away. And this is just great a visual hierarchy to help basically guide the user through this particular process.

So because we applied a gap spacing of 32 pixels, obviously this now pertains to these two text elements. So again, I would like to create a new group with these two text elements and then set the gap spacing just down to 12 pixels. So highlight both of them by holding down the shift key, right-click, "Group elements in" --> a "Column container," top to bottom. We're going to change the title to basically "Group Title & subtitle." And now let's add some gap spacing back. Maybe even 8 would look good here.

Okay, now we're going to grab a button, please. Click the button once and drop it inside this Group Container. Let's change the style attributes to a Secondary Button. We're going to type in here: "I'm a company." And on the Layout tab, I don't want a fixed-width button, So I'm going to uncheck this box and I'm going to remove the min width. And on the min height, I'm going to set it to 40 pixels, 4-0. Now, I'm going to copy and paste this again. Command C and Command V. And for this button, I'm going to say "I'm a candidate."

Now, in terms of the design, this is another reason why we keep grouping things in groups because it gives us granular control over the layout and the spacing. So currently, our Group Container is set as a column top to bottom, but we want these buttons to be side by side. Therefore, we'll group the buttons again and then select a row as a container layout to put the buttons next to each other. So let's do that.

Highlight "I'm a company." Hold down shift. "I'm a candidate." Right-click and then "Group elements in" --> a "Row container." Look at that. Perfect. First thing we do, rename the group. We call this "Group Buttons." On the Layout tab, let's add some gap spacing between these buttons of 12.

Now, when it comes to responsive design, these buttons might actually stack on top of each other. So in that fact, we need to make sure that we also set a row gap as well, because that determines the space on the vertical axis. But you won't see a change when it's set to row.

Let's review the demo app, and I'm going to reveal one of the inputs that is currently hidden through the Elements tree: Group Inputs --> Input company name. Here it is here. So we need an input here, and this is just going to capture the name of the company, and that'll only be visible if they click on the button "I'm a Company." Then we're going to add an input to collect the email address that needs content format email, part of the form validation process. We'll get to that. And then the password, which also has a content format to match.

So let's go and grab an input element, please. Click once and drop it or draw it just beneath these buttons. I'm going to say "Type your company name." This will be Content format of type Text, and let's set up the design for the standard input. Let's click "Edit style" underneath the Style Attribute. So it's currently set to Inter and 400. Let's change this to 500 so it's a bit bolder, and let's change it from 14 to 16. The font color for the typed text is our standard black. For the placeholder color, we've got our standard black at 36%. Let's set a background style, just a flat color, and choose your primary contrast. Let's choose a roundness of 8 and on the color, we're going to choose our border color.

Now, let's just double-check our conditional statement for when this input is focused, meaning someone has clicked inside the input. So we're going to remove the hover. I think that's more preferable for buttons and inputs. So we have a condition here, and it reads from left to right: When this input is focused, change the borders, which are currently grey, to blue, our primary color. Perfect. And then on "This input isn't valid," meaning that an error has occurred and would like to feed this back to the user, well, we can set this up via a workflow, but in this section, we're saying that when that workflow determines that this input isn't valid or the condition determines that the input isn't valid, then we'll change it to our destructive red. Okay, I'm happy with that. Let's go back to the design.

On the Layout tab, I wanted it to span edge to edge. We're going to remove the min width, and we're going to use a fixed height of 44 this time. I want you to copy and paste this input. And then do that one more time, copy paste, so we have three.

Let's head over to the second one. Now that the design is sorted, all we need to do is change the content. So we'll say "Type your email." And now please change the content format to "Email." We should also check the box that says "This input should not be empty." And when it comes to setting up our sign up button, we'll go through the various states and form validation pieces to just demonstrate how a user cannot sign up without an email, a user cannot sign up without a password, and if they are a company, they cannot sign up without a company name. And, they also need to check the box so that they agree to the terms of service. And on the last input, we'll say "Type your password." And change the content format to "Password."

And now we're going to group all three inputs by holding on the shift key, right-click, "Group elements in" --> a "Column container." We'll call this "Group Inputs." And on the Layout tab, we're going to add some gap spacing of 12.

So you can see that the three separate sections to this form all have their own groups: Group Inputs, Group buttons, and Group Text, basically the title and the subtitle. And then between these groups, we have our 32 pixels of gap spacing.

So this form is feeling a little bit wide for me. So with Group Container highlighted, let's head over to the Layout tab, go down to min width. And instead of setting a min width, we're going to set 0 and we're rather going to set a max width of 380. That's looking a bit better.

Now we need to drop in a checkbox for our terms of service, so under Input Forms, we have a checkbox and we're going to drop it in. We're going to type the words "I agree to the terms of service," and it's really up to you to decide how you want to word this, okay? Now, in terms of our form validation, we're going to check this box that says "This checkbox should be checked," and we're going to tie that to a conditional on the button itself, which means that the button cannot be clicked, therefore a user cannot sign up, without agreeing to the terms of service. I'm going to change this text size to 14. I'm going to let it span edge to edge from the Layout tab. I will remove the fixed width and the min width and the min height, and then I'm going to choose "Fit width to content" just to bring in the text element itself.

Now for our button, head across to the UI builder section, grab yourself a button, and just drop it beneath. Now we can say "Sign up." And we're going to allow this to span edge to edge. So I've removed the fixed width, so it spans the full width of this parent container. I'm going to remove the min width, and I'm going to set the height to 44. So as you can see, there is a pattern starting to develop where inputs are 44, buttons are 44, and some of the buttons at the top are 40. We'll continue to repeat this pattern just so that our design is really harmonious and well-structured throughout.

And the last thing I'd like you to do is grab a link element, please, and just drop it beneath the button, still inside the container. Remember, you can pick things up, drag and drop, and pull them into the correct positions. In here, we're going to type the words "Already have an account? Log in." And then let's just change the color of this to our black color. I want you to please change the font weight to 500 (Medium). And let's put this in the center by selecting the Layout tab, move it to the center. We can also remove the fixed width and the min width, but fit width to content. Lastly, we can remove the min height as well. Okay, this is looking really, really good.

Last thing we need to do before the break is just remove the min height on the Group Container. Remember, the height is determined by the elements within. Why do we set a min height initially at the start of this lesson? So we had some space to work within. I just created some space, did the work I needed, and then I can close down that space so that the elements and the gap spacing determines the vertical space. But always make sure that we have "Fit height to content" checked.

Okay, so this is looking really good. I think we can stop here and take a quick break, and when we get back, we're going to start looking at the logic to bring this form alive. I'll see you in the next lesson.