Section 6 (Lesson 6/9): Next, let’s turn our attention to the job application process. To support that, we’ll create a popup on the job page where a candidate can input their personal details and upload their CV.

We’ll be covering:

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

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

It's time to have some fun. I'm going to split the job application process into two parts. The first one in this lesson, we'll just design the popup. There are a few new elements we're going to be working with. Then in the next lesson, we'll sort out the logic. Also, we need to have another look at the privacy rules because now we're dealing with CVs and user data that is private.

So let's head over to the job page, this is where an Application is made. And it'll be after clicking on the Apply button when we'll show the popup so that Peter can apply to a job. What we're after is a popup. So click once, click again. This will be called "Popup Application." On the Layout tab, we're going to make I'm going to make this a column top to bottom. No fixed width, but let's constrain it to about 380 px. No min width and the height will be determined later on.

So let's grab some text, drop it inside, and I'm going to type, "Are you sure you'd like to apply to this job?" I guess I could have also just said, "Apply to this job." Not that important. Okay, so let's try a Heading 6 here or maybe Heading 5. Yeah, I like that. And then we're going to center-align it. Sorry, let's actually change this back to Heading 6 and then center-align.

I actually want this more evenly distributed, so on the Layout tab, I'm going to set a max width. Let's just try 200 px. Yes, that's what I'm after. And now we can horizontally align as well. That just reads a bit better.

Grab some more text, drop it in. I'm going to paste some text (and I'm going to zoom in so you can see it): "By applying to this job, will be sending your profile and CV to..." and then I'm going to insert dynamic data and choose "Current page Job's Company's Name." So here we're mixing static with dynamic data.

Let's make this style Body Small because there's quite a lot of text in here. And then let's horizontally align. What I might do is I'm going to go back to the Popup Application and choose 420 px here for the max width. This is just a creative choice at the moment. Let's choose a gap spacing of 32 px.

Let's get a Multiline Input next. Paragraph text, drop it in. Placeholder will say, "Write your cover note to" and now we're going to insert dynamic data and say "Current page Job's Company's Name". So the job, let's dive into the Company data type and find the Name. Not going to be any initial content, but let's make sure that on the Layout tab, we are edge to edge. And let's set a bit more space, maybe 120 px min height, and it'll grow as much as it needs to.

Now we want a progress bar beneath that. So go to Visual Elements, and then look for... we might not actually have it. So let's install more here. Type "progress" in the plugin search bar, and look for the first one, the Bubble one that has almost 400,000 apps installed. Install that. Then done. And that's going to then appear on the Visual Elements and it's called "Progress Bar". And this is to monitor the progress of a CSV upload.

Okay, let's design it. So the progress bar is going to be our brand color. Now I just want this to be a really thin slither. I don't actually want to see the percentage because it's actually quite a fast process, but it's nice to show something. And we could leave it like this, really chunky, and display the text. We could do something like 12 px and then make this a bit smaller. But, what I'm going to do is just set the opacity of this text to 0%. Can't change it to blue because there will be at some point at the beginning where it will be on this white background, so it just has to be your opacity 0%. Okay, I'll come back for the rest.

I just want to change the fixed width and remove it altogether. Then let me just try about 8 px. Let's choose 6 px for the height. Fixed width, 6 px. No max width, edge to edge. This is going to be called "ProgressBar File upload". Okay, roundness 6 px, but no borders, none. No horizontal padding, but I do actually want It's a background style of surface. So this just shows the entire element then. Okay, you can see it there, the entire element.

We'll come back to the percentage because we need to actually grab that from the File Uploader, so let's go grab a File Uploader under Input forms --> File Uploader. Drop it beneath. This is going to say, "Attach your CV". Could also say, "Upload your CV". And we're going to check the box that says "Make this file private." Okay, I'm going to come back to this. This is a crucial step.

Let's just finish the design. So we're going to have 8 px on the roundness. We're going to have a dashed border of 2 px. That will be our border color. It's going to be 500 Medium. And the font color, we're just going to make this black. Let's make this 16 px. Okay, we need this edge to edge on the Layout tab. Remove, fixed width, min width and set the high to fixed and 44 px. Let's have a look at that. Yeah, really nice.

Next, we need two buttons. We need a "Cancel" button on the left and an "Upload CV" button on the right. Let's find a button, drop it in. This one will say "Cancel". This is going to be an outline button, no, sorry, a Secondary Button. We should actually delete what we're not using here. And on the Layout tab, no fix width, no min width, but we will fit width to content and make sure that the height is 44 pixels, and we could set that to fixed height.

I'm going to copy and paste this. This one will be called "Upload CV". But this will be our primary action, the most important one. And what I'm going to do now is highlight both of these buttons. Holding down the shift, right-click, "Group elements in" --> a "Row container," so it's in the same row. Rename that to "Group Buttons", please. On the Layout tab, we're going to choose "Space Between" distribution, and we're going to remove the min height, just where we want it. Okay, so we're showing everything by default, but, we are going to be only showing things conditionally.

Now, let's just create some more Groups here. Remember what I said about hierarchy? Similar elements need to be together where it makes sense. So highlight both of the text elements at the top, right-click, "Group elements in" --> a "Column container." This will be called "Group Title & subtitle." And on the Layout tab, we're going to go and add some row gap spacing back of 8 px for that one.

Now we're going to group these two elements together: the progress bar and the file uploader. We're going to group them in a column container. This will be called "Group Upload," and the gap spacing in this one is going to be 8 px. And then let's just remove the min height.

And then we're going to come back to the logic on the Cancel button because it's not just a matter of closing this popup, we do need to reset a few things as well.

Okay, and to launch this popup, let's head over to the Apply button on the page, add a workflow, and simply go to Element Actions --> Show, and show the Popup Application.

All right! Looking nice and professional and consistent with the rest of the application, which is what we want. Let's take a break because when we get back, there's a new concept that we need to learn about, so I'll see you in the next lesson.