Section 3 (Lesson 5/8): In this video, we’ll create the personal details form, which will allow us to save Hana’s personal details to the database. We’ll cover some new input elements like dropdowns and picture uploaders.

This lesson covers:

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

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

This is where the fun starts, because now we're going to be building our form to be able to collect data from Hana, and a few more concepts will be learned through this. So let's dive in!

So we'll design the form, this left-hand form, in this lesson. So we have two inputs. We have some little labels up here. We have a multiline input that takes multilines of text or paragraph text. We have a dropdown, which looks like it's been populated with some location data. We have a Save button. Then we have this picture uploader UI up here. So quite a lot to do in this lesson.

Okay, so Group setting, I just want to make sure that we do have some gap spacing up here, so let's choose 48 pixels. Now, let's design our card, or our form. Let me grab a group, draw it inside Group setting. Any shape will do. Let's name this "Group Form."

On the Appearance tab, I'm going to set a border style of solid, border color, roundness of 12 this time, not 8 (8 is for smaller elements, 12 is for larger elements). On the Layout tab, no min width, but I am going to set a max width. Let's try 320 for now. Maybe 360. And I do want some space to work within, so I'm going to set a min height of 360 as well. This will naturally grow according to the content that's needed. Now we're going to add some padding, so 32 pixels on all four sides. Looking good!

Okay, let's actually create a style from this now. So I'm going to detach the style, create a new style, and call this "Card large," and then create, because we will be using this particular group design in other places.

Let's grab some text. Drop it inside this group and type "Personal details." We're going to use Heading 6 for this. Just make sure that your styling is the same as mine, which is Inter 18, and I'm going to change 700 to Semi-bold, I'm not actually going to use bold in this course. Okay, with that confirmed, let's go to the Layout tab and just remove the min width and the min height. Now, I'm just going to copy and paste this text element. Yep, that looks good. And then I'm going to change the style to Body Small and then I'm going to paste in some text and I'll enlarge my screen so that you can copy this text: "Complete these questions to start posting jobs to our pool of talent."

Once you've done that, let's just put these in their own groups because distribution is something that we're going to be really good at in this course. So container layout of column, I'm going to call this "Group Title & subtitle," and I'm going to add some gap spacing of 4 pixels.

Okay, now we need some inputs: first name and last name. So first grab some text, drop it inside. Type "First name." This is going to be Body Small, and then let's just sort out the min width and the min height, remove, remove. That's the first name and then we need an input as well. Grab an input, drop it in. Styling is already done. We're going to remove the placeholder. So the signup page we had placeholders because we didn't have text labels. Now, in this particular design, which I want to show you a varied ways of building this, forms, we aren't going to have placeholders because we're going to have labels! So it already says "First name" above it. Going to remove the fixed width, remove the min width and set the min heigh to 44.

Now we need to group these two together because they are like elements, they serve a similar function, and we'll group them in a column container. Going to name this "Group Label & input," and we'll simply copy and paste to create more of these. Lastly, let's add some gap spacing of 4.

Okay, so we need to separate these two groups. This is why we're grouping stuff together, because now on the Group Form, we're going to apply some gap spacing of 32. There you go. Now it's created that separation. From a hierarchy point of view, these two stay together and these two stay together, but those are pushed apart because they have different functions.

So now we can simply go Group Label & input, highlight that, and then use your keyboard shortcut to copy paste. Just going to tidy up the title, and now let's type "Last name."

Also, I just want to make sure that we're naming these inputs. Because we removed the placeholder, you can see that Bubble also removed that from the title. So we're going to name this "Input Name first." And then for the last name, "Input Name last." And obviously, these need to be next to each other on a row distribution. So find Group Label & input, remember, you've also got your elements tree here to see what you're doing, holding down the shift, right-click, "Group elements in" --> a "Row container." I'm going to say "Group Inputs." And we do need some space, okay? So on the Layout tab, apply gap spacing between the elements. Let's try 12 pixels here. Yeah, I like that.

Okay, next we need an "About" section with paragraph text, but what I'm going to do to save myself some time is just Command C and then click back into the Group Form, Command V, on my Mac, I'm going to change "input" in "Group Label & input" to be "Group Label & multiline input." Okay, now I'm going to show you a little bit of a shortcut here after labelling this, which we'll just say is "About." But this shortcut enables us to take an input, right click, and then actually exchange it for another type of similar element, so another type of input, which is a multiline input.

So simply click on Input Name first, down in this section down here, right-click. Let's say, "Replace the element type," this just saves us a bit of time, and now we're going to choose "Multiline Input" and then replace. Fantastic. I'm going to rename this input to "Input About."

And because it's a multiline input, it's a good user experience if we help the user understand that this is paragraph text. So in an input, you can't have paragraphs, so the user knows it's probably going to be a word, a short word. It just really helps. So let's create some more vertical space. And what I normally do is make the multiline inputs as tall as I think they should be in relation to the data that we are collecting. You don't want a huge, tall area because that will scare the user. And they'll think, there's too much work to do here. I'm going to leave it out, okay? So we need to be smart about how we do this.

So I'm going to choose on the Layout tab of Input About, I'm just going to double the height here and choose 88. Okay, and this implies that it is paragraph text but hey, we don't need a huge bio here, we just need a little bit more about you in this input.

Okay, let's just set up the style here, so I'm going to select Standard Multiline Input. It looks like we've already done that, but let's just double-check here. So if your style is different to mine, let's edit the style of the multiline input. We're going to choose 500 with 16 pixels, standard text, and the placeholder is this charcoal color. Then we have 8 on the roundness, solid border with the border color. Once you've done that, check your conditionals. We only want two, first one being focused, change it to our brand color, and the second one being multiline input isn't valid.

Now we need a dropdown with our location data. So I'm going to just pick up or highlight Group Label & multiline input. Copy and paste shortcut. And you can see we've got some overlap problems here, so what we actually need to do is click back on Group Container, so the main group on the page. Remember, you also have the elements tree to find it. Let's actually look at the structure here in the elements tree. It's a good exercise for this. Just going to close this all down.

Okay, so we have our Group Container. Nested inside Group Container, we have our Group setting. So with Group Container highlighted, I'm going to go to the Layout tab and check "Fit height to content." Don't worry about what's just happened now. Then I want you to click down into Group setting and do the same. Fit height to content. Okay, so with both of those selected, it means that those groups together will just continue to grow according to what is inside, okay? Earlier on, we had nothing inside these groups, which is why I didn't have fit height to content because it will just shut the group down. Think about the expression "fit height to content," fit height to content within - so we need something in there so it can fit height to the content, and now it can just grow according to the content within. Okay, I apologize for the mouthful there.

Let's change the text "About" to "Location," and now we need a dropdown. Okay, so for this, I am actually just going to leave this where it is. I'm going to find myself an input form dropdown. Click once, and I'm going to try to squeeze it between Group Location and the multiline input. And once it's in there, just delete the unused Input About.

So let's just check the styling on the standard dropdown, please. We have 500, 16, text - you can see the pattern we're going for - with a placeholder color of charcoal. We've got some flat color. Now, one thing to note is if you are using Safari or a non-Chrome or Chromium style browser, your styling might look different to mine. That's because the browser has influence over the styling, and that's just how we've set things up at Bubble, okay? Not the end of the world, but follow along with me to keep it as close as possible. So primary contrast is white, border style solid, 8 on the roundness, the border color of our natural border color. Then on the Conditional tab, we are going to remove the hovered, we're going to keep the focused, and we're going to keep the "isn't valid."

Let's just finish off the layout here. I'm going to remove the fix width on the Layout tab, and I'm going to set the height to the same as the inputs, which is 44. We've got some left-right padding here, so let's change this to match the inputs, and the inputs are 16 and 16. Now, if we head back to the style of the Standard Dropdown, head over to the Layout, let's update it in this global location: 16 and 16. Top and bottom will never matter because I'll always use a fixed height for dropdowns.

Okay, let's change this name to "Dropdown Location." And now we actually need a list of locations. So the whole premise of Workplace is that it's a tech-related jobs board for US companies. So I've gone ahead in my demo app and just set up an Option Set just with some static text of locations and cities. So what we're going to do is dive into my demo app, and I'm going to show you how to just copy and paste this option set into your own app, and I think we've actually done this recently as well.

Okay, so I'm in the demo app, please do the same with the link above, and I've got all of these Option Sets, and we're going to be creating these Option Sets manually later on. But for now, we've got Location. So in my demo app, I want you to right-click, Copy, and then head back to your app. Now, it needs to be in the same browser, it can't be cross-browsers. Head to the Data tab and Option sets sub-tab and then right-click and paste. Voila. I'm going to change this just so it's nice and clean, so it says "Location." Here we have a remote option and this is just standard text. And again, this is handy because I'm going to need this location data in other parts of the app, such as when a user signs up later on, they also need to select their location. It's a jobs board, so we can start thinking about how do we match people with locations, maybe they want to be remote, and so forth, so it's very useful to have these Option Sets as a global location to basically manage location data.

Back in the Design tab, now we can say that we want a dynamic option in the Choices style. I'm going to just remove "Choose an option" from the Placeholder just so it matches the inputs, we've got a label there that says Location. Type of choices will be Location under Option Sets. Then we're going to say, give us all of the locations and display the display. "Current option's Display." Fantastic.

Now we need a button to basically save this. So let's go find a button, drop it beneath the location, and let's say "Save." I want this to be edge to edge on the Layout tab, and I want it to be 44 pixels fixed height. Now, it's currently the Primary button. Can you see that we also have a similar color, but it's not quite the same? And these brand colors will be changing according to which company is signing up, so we don't actually want to use our brand color here, we'd rather want to use a different kind of button. And in this instance, what I would do is use the tertiary button, which is just black. So it's just a neutral color, so it doesn't clash and distract the user once they're in their own dashboard.

So we're going to detach the style. We're going to create a new style and call it "Tertiary button". The background color is going to be our text color. 8 on the roundness, but no border, and then we're going to have a condition that says when the button is hovered, then just select your text color and change it to zeros across. It's a jet black. Now, when this button isn't clickable, why don't we change it to "Surface," and then font color is "Charcoal," that's fine. Once you've done that, let's create a new style, call it "Tertiary button," and create. Okay, so we have our Primary, we have our Secondary, and we have our Tertiary. Fantastic!

So now we need our little picture uploader on the left-hand side. And that means if we want to place it to the left-hand side, we need it in a row layout. It's not going to work in the current setup. So let's first grab all of these parent groups in here. Sorry, before I do that, I just wanted to make sure that this was named correctly to "Group Label & Dropdown." Okay, so let's grab the Group Title & subtitle, Group Inputs, Group Label & multiline input, Group Label & Dropdown, and Button Save. Holding down the shift key, you got all them together, right-click, "Group elements in" --> a "Column container." Change the name, first of all. Let's just say "Group Column." (It doesn't matter as long as it's consistent naming.) We need to add back some gap spacing, this time, I'm just going to choose 24. And now that we've done that, we can then go back to the Group Form and change the container layout to row. Brilliant.

So let's go grab a Picture Uploader and drop it inside the form to the left, not inside this group, to the left of Group Column. This is going to be named "PictureUploader Avatar." I'm going to change the width and height to 64 and 64. Back on the Appearance tab, let's say "Upload Image" in the placeholder.

Let's just sort out the styling here because we will have this element in multiple parts. Going to choose Inter, medium, 14 is great, and the font color will be our black color. Let's make this a circle, so if the size is 64, then the roundness needs to be at least 32. But it can be higher, sometimes it is set to 100. And with the borders on drop areas or picture uploaders, when users have to click to add data, I usually use a dash border. That's just convention. I don't want to reinvent the wheel here, I just want to follow convention in this instance. So I'm going to change this to dashed. On the width, I'm going to choose 2, and on the color, I'm going to choose my border color. Okay, let's just have a look at the conditional statements. I'm going to remove the hover and just retain the focus and valid. Great.

Back in the Design tab, yeah, looking really good. And I'm going to click back on the Group Form because I want some space here. So Column gap (px) choose 32. And the sizing here doesn't feel quite right. So we temporarily set up a max width of 360. Let's try 400. Maybe even more, maybe 420. Yeah, that feels comfortable.

In the next lesson, we're going to discuss how do we upload images and what is the workflow and the process there, so we do need a button beneath this to be able for a user to change their mind. So I'm going to find myself a button. I'm going to close this up slightly, find myself a button, drop it in the page, change the wording to "Delete," change the Primary button to a Secondary button. We need this to be 64 pixels wide, so I'm going to change the 16 to 12. On the Layout tab, I'm going to set a fixed width of 64, and for the height I'm going to choose a fixed height here of 32. And with that, we can also change the left-right padding to 8 and 8. It doesn't really matter, it's a fixed width.

Now, I just want you to highlight both of these please (Button Delete and PictureUploader Avatar), and then we're going to group them in a column container, top to bottom, and rename it "Group Column."

And let's just sort out the styling of Group Column, so we are going to fit width to content, and we're going to just change the position here so this will be "Make first." PictureUploader Avatar, Make first. And then I'm going to use my elements tree to get back into my Group Column so I can add some row gap of 4. Maybe a bit more, let's try 8. Okay, let's just have a think here. "Upload image" it looks a bit squishy on the text here. 64. Let me try 12 pixels rather. Yeah, that looks a bit better. Definitely. I like that. Okay, I'm happy with this.

Guys, this is a good place to stop. We've done an awful amount of work here on the design side. I know you're eager to get the logic side and capturing data side flowing, and that's what we'll be doing from the next lesson. What we needed to do is just create this form once because from here on, we'll just copy and paste this form and refactor. So we've done most of the design work. I'll see you in the next lesson.