So, we’ve built out the majority of our homepage. Remember, you can clone each step of this project at any time to see exactly how we built it. But for this lesson, we want to cover the most critical part of any portfolio, which is a clear call to action, a CTA. And right now, while people can see what our UX Designer here, what Megan has done, there’s no way to actually get in touch. And when it comes to developing a strong CTA, we find it helpful to follow a pattern based on the user’s story. As a person, I want to learn or do something so that I can achieve a specific goal. For a UX Designer like Megan, her ideal person, a user visiting her portfolio might be a business owner or product manager. And what they want to learn or do could be different depending on the motivation, the intention of Megan’s potential clients. Maybe they want to learn about her process, maybe they want to get a price range, or maybe they just want to validate her experience, or explore the quality of her work. And the reason they want to do all those things, the action we want them to perform, is to hire Megan as a UX Designer. And this is what Sara’s design does extraordinarily well. So, what’s the call to action? If they’re visiting this portfolio we want our information architecture, all the content on the site, we want it all set up in such a way that it makes it clear what she does —
[Sara] Above the fold, right in the heroes section.
[McGuire] We wanted to show them the quality of her work --
[Sara] The hero image in the Collection list.
[McGuire] And of course, we want to make it really clear how to get in touch.
[Sara] We didn’t build that yet.
[McGuire] That’s right. And that’s our motivation behind designing and building a contact form. It’s not just a checkbox in web design that we happen to do because others do it. It’s a carefully thought-out decision that's based on Megan’s potential clients. It specifically designed to help them validate Megan’s work and to reach out to hire her. That’s the goal. So, we’ll do this by adding a form block, we’ll do a configuration of our form, and then we’ll style it to be consistent with Sara’s design.
[Sara] Um, I’m not Megan.
[McGuire] We know.
[Sara] I know you know.
[McGuire] Then what’s wrong?
[Sara] It’s just, Grimur’s unsure.
[Grimur] I don't even... Who's the designer?
And finally, just like we did for our navigation, we’ll make the form a Symbol. That way we can use it on different pages throughout the project. So let’s add our form block. We have two sections, we have our top, our heroes section of course, we have our second section, this is the one that has the Collection list with all the client projects inside. Let’s add a third section. We’ll just drag in a third section underneath the other sections, and we’ll apply our section class. We’ve created a section class. So, let’s do that. So we have our padding, sixty on the top, sixty on the bottom. And let’s drag in our container. That’s the second part that keeps everything neatly organized. Of course, we’ve made a very specific container class called container. And once that’s added, we can add the form block inside. Let’s drag the form block into the container itself. And that’s it. Cut to black.
So, by default we have two items in here. We have a name, and an email address, we want to add another field. Let’s go ahead and add a third field. Let’s do a text area, so we can add a message for Megan. And let’s close that out for now, and we’ll add a field label. We’ll add a form field label. We’ll put that above. So we have three things here. Let’s make this one message. Email address is fine. And let’s go ahead and create classes. Again, classes are automatically created when we make a style change on something. So if, for instance, we make this all caps, and we decrease or increase the letter spacing and decrease the font size a little bit, it’s already created this class for us called field label. So we’ll just go over here, and we’ll add field label. Over here, even faster, just hit Command Enter, or Control Enter on Windows, and we can just type field label. There it is. And of course, now that we’ve made each of those classes, we’ve applied each of those classes, we can change any one of them and all are affected. Maybe eleven looks pretty good. Okay.
So, a couple things with our form. Let’s select our entire form block and let’s start changing some colors here. We can change the text color to black. Of course we can’t see anything right now, so let’s change our background color to a lighter color, let’s do kind of a light grey color here. And let’s also, on the form block itself, let’s add some padding. Let’s do thirty pixels on all sides. And let’s also add a heading. Let’s add a heading into our form block. We can put it right up here. And we’ll call this, Let’s work together. Now, we already created a style. All the way up here we created a style for secondary heading. Let’s apply that down here. Notice how this secondary heading is a white color. Our default, if we see where that white color is being inherited from, press color, it’s coming from the body (all pages) tag. So, what that means is we can go here, and apply secondary heading. And notice how it’s pulling that color from the form block. Let’s add one more thing, which is going to be a paragraph underneath that. Let’s go to paragraph, let’s drag in a paragraph underneath that heading, and let’s look up here, see if we have any styles that match what we want to use here. We do have a lower opacity paragraph, probably not. Let’s go ahead and create a lower opacity with the darker color. And let’s take a look at our contrast ratio, anything up here is going to be double A, triple A, if we go up to let’s see, seven point one nine. That looks pretty good. Let’s call this, dark paragraph. And let’s add some more spacing underneath, thirty pixels. And if we want these to be side-by-side we can drag in a grid. So let’s drag in a grid element right here. And let’s delete this second row that comes with this. So we have a side-by-side design. Let’s press Done. And we’ll use a Div block for this. Let’s grab a Div block, and we can drag it anywhere we want. Let’s put it inside that new grid. And the Div block is going to hold each of these items. So we want the Div block to hold the name. So let’s click and drag name into that Div block. And we want that text field also in that Div block underneath the field label. So, these two are in one block, that’s taking up the first cell. We want one more block. So let’s grab another Div block, grab a Div block, in our grid, let’s put it next to it. In fact we want this one first. So let’s grab our email address, drag it into the Div block, and let’s grab that text field, and drag it into that Div block. So, what is our structure? We have a grid, with two cells inside. In cell one we have a Div block with the name, and the name field. The second one we have the email address, and the corresponding field to that. Message is staying outside, that’s looking pretty good. Finally the last thing we want to do here is make the submit button stay on the right side. Just like we used flex box up here in the project details Div block, we can do the same thing down here. In fact, with the form element selected, we can make that flex box. And when we do, everything is kind of messed up here. We want to make it vertical, and then we can take that Submit button and override. We can override it’s full width default. We can go to alignment and order, and we can just set it to go to the end right there. And maybe we want to change the background color, we can set it to #657C3. And, so we can reuse that color in other elements, other styles, let’s call that it the main brand color. And we’ll create a swatch, that’s reusable all throughout the project. And we’ll add some rounding, maybe a radius of five pixels. If we want to push it off from the top here, we can add a little bit of margin on the top. Let’s do fifteen pixels on the top. And that’s looking pretty good.
Now, for our final step, let’s select our form block and we’ll go ahead and make it a Symbol. This time we’ll right-click on the label on the canvas, and we’ll go down and create a Symbol. We’ll call it contact form. So, we added our contact form, we configured the fields, we got everything styled, and we just made the form a Symbol so we can reuse it on other pages later. Up next, we’ll build out the final homepage section, the footer, and after that we’ll wrap up our work on the homepage by making everything responsive.
[Grimur] Wow, guys. That was a really good one. Sorry I can't be in the studio today. It's date night. And I'm cooking. Anyway, I wanted to say two things. One, #21dayportfolio. Seeing some great stuff being shared. I want to see your best contact forms. And the second thing: Annamaria Ward, I cannot even believe it. Way to go. I can't wait to see more. Anyway. [Fire alarm beeping] I gotta go. Oh my. This is embarrassing.