Freelancer — 550 | Site build | Contact page

The contact page should be a pretty straight-forward build but it’s really important we get this right. Rebecca told us they get a lot of spam, so we’ll want to include validation and we’ll want to make sure we are clearly presenting all the details like phone number, address, dates of birth, and social security numbers. We’ll split this into two videos. This one we’ll cover a simple hero section, the contact form itself, and some additional contact information for potential clients to get in touch with Hayes Valley. 

Let’s start with the hero section, and to add a hero section, we need to add a page. So let’s call this ‘contact us’, hitting enter, and we can drag in a hero section. Or let’s save some time and choose one of our existing designs. Not this one, not this one, this one. Plain hero section. Copied to our clipboard, let’s move over to contact us, and just paste it right in the body and in this we can just change the text to say, let’s check our content strategy notes, it can say ‘contact our team’ and for the contact text, that paragraph underneath, we’re just going to reach off the screen, copy something to our clipboard and paste it right inside. That looks pretty good. Okay, so, we need two other things for our hero section to look complete. That’s the nav bar at the top of the page and we also need one more symbol. Let’s grab the footer and put it at the bottom of the page. Okay, that took a matter of seconds. Let’s move on to the next step which is contact form, and this’ll be pretty straightforward too. We’ll use a section for this. We have some section classes we’ve already used. In fact if we just type section we can see we have the bio section, centered section, hero section, home, lots of sections. We could start with centered section for our content but really, no, let’s get rid of that. We’re going to create a new section for this. This’ll be ‘contact section’ and in this we’ll do what we’ve done before and add 60 padding to all sides and let’s make it a grid. Let’s do a side-by-side design for this. We’ll only need one row, two columns, that looks good and hit escape to get out of editing our grid and for this let’s set a height just for now so we have some depth here so we can see what we’re doing and let’s grab a contact form. Now a form block comes pre-populated with most of the form elements we’ll need, we can drag that right in here. So we have some labels, actually name is okay, let’s just add a class to it and call it ‘field label’, we’ll add a class to field label here too. And let’s style, maybe a normal with a little bit of letter spacing. We could do all caps. Maybe a little bit smaller. That looks pretty good, and then our text field, we can do the same thing with our text field. We can create a class, ‘text field’, apply it to the other one as well, and style this. Right now we have a little bit of a border on all four sides, that’s the default, we can override, we could create a solid black line, we could increase that border so it’s ridiculous. Or we can just set the style to none and instead go with a background color like a light gray right around here. That looks pretty good. So we have a name field and we can go into this cog and the actual text field itself. We can see its input, its value is name. We can put a placeholder here like ‘John Smith’. Let’s try that again. John Smith, good enough. Close out of this, email address. We go into the cog, this is a required field. If we actually click each of these we can see that the name is not a required field. We could require a name and we could require an email, also we can double click to edit these at anytime. In this case let’s require both of those. By choosing the text type of email it’s going to require validation for that, it won’t let us set something if it’s just a random string of text, it’ll need to be formatted like an email address. So that’s good for an email field but let’s add one more field in. Let’s go and do a long form, a text area field and we can put that right under email address. Just going to grab the field label, hold down option, and drag that. Again that would be option on Mac but alt on PC. You can drag and let go, that makes a copy of it and we can just call this ‘notes’ or ‘note (optional)’, or maybe more appropriately, ‘message (optional)’. The example text… We don’t really need example text here, we can get rid of that and let’s apply that same text field, that same class to this. That looks pretty good. So we have a name field, let’s get rid of that because it looks unprofessional. The name field, the email address, the message, and a submit button. Now this submit button is not exactly on-brand, we could actually grab our button from here and apply that. That looks okay but we could do something different and to build on this and use the button, that class as a base, we could just use a combo class. So let’s click to add a combo class and call it ‘form button’. So it’s going to take all the properties of button and build upon them as we make changes. So first things first, let’s set the width to 100%, that looks pretty good, do we want to left align it, probably not, but we might want to match this field label. We did source sans pro, same font, but we did 413, letter-spacing of 1, let’s try to re-create that here. So let’s drop 13, letter spacing of 1, it’s looking better. I think we also did all caps, that looks pretty good. That might be a good start. One thing to note, these are a little close. The field label and the text field, these are nicely close together but each text field seems awfully close to the next label. So with any of the text fields selected let’s add some bottom margin. Let’s do 30. That clearly groups these things, the proximity of these elements, and the space after each form label, after each text field, creates that visual rhythm. There’s consistency and repetition in this design and when we break that repetition by changing the color here we’re drawing attention to the submit button itself. That might not be what we intend but in this case it looks alright, but that’s the contact form. 

Let’s move on to additional information. Here’s an interesting thing, we can put a grid inside of a grid, just grab a grid element and drag it right inside the grid. Now we have a grid inside a grid and the reason we might want to do this, we’re just gonna try this out, the reason we might want to do this is because organizing this information, let’s actually remove that column, organizing this information into multiple rows, a lot of different types of data are going to be displayed, and we want to follow a format that’s a little bit similar to something we did before. In fact if we go to our client projects, this is the CMS collection page for client projects, we used this. This was a content label and client project detail. We were able to achieve a label for something next to information about that something. So let’s do the same thing over here. Let’s go back to our contact page and we’ll add a text block and we’ll put that text block, if we try to place it inside the grid it’s just going to rearrange content inside the grid because it’s automatically positioned. But if we hold down command we can move it inside the children of that grid. So we are just dropping it inside this grid. Now it’s a child of that grid element. If that’s too tedious, and sometimes it does get that tedious, we can just click and drag, and even if we start dragging on the canvas, we can position things inside the navigator. Let’s just make sure it is inside the grid, and it is, we’re done. So let’s go in and type label, because we had that content label, that’s good. We have some information we have some information we want to type out here. That’s upside down. So, we have… location… and we have a location here, let’s copy and paste. We’re just copying and pasting that content label but we know on the second one it has a different field, that was client project detail. Okay. Then we have another one. Just copying and pasting these elements, we can just hold down option and drag. We can do this one-by-one so that we are getting ourselves the same type of layout as before and we can size this later. We have location, the next thing we want to add is phone number. Under that, hours of operation… and that’s it. Those are the three we want to add. So we can go into our grid, we can delete these extra rows, just delete any two of the rows, and that works just fine. Now, the size of this grid, the reason everything is really, really tall right now, there are two reasons. The first is that the grid itself, remember we set a height, we set a height, let’s go into this, this is actually the contact section itself. We set a height of 600 pixels. Let’s remove that. So we’re going to click this, reset, we no longer have that height constraint so the height is based on the content inside but there’s another thing. The other thing that this is based on is the fact that this grid is set to take up the full height of this grid, because this grid, the contact section, has two cells inside. Let’s go in and edit that grid so we can see what we’re talking about. Since all that content in the left column takes up this much space, it’s making all of the content in the second column take up that much space. There’s a way to override that, let’s hit done. Let’s click this grid, just this second grid, which we can call ‘contact details’. To get contact details to not take up that full height what we can do is distribute that content. We can distribute it to the start, we’re aligning that to the start. So let’s click that and now the contact details align to the top. That looks pretty good. We might want to, for visual consistency here, grab some padding and align it so it looks, let’s just do 20 like this, so it looks like it’s aligned there. We also might want to grab the contact section and add an extra space, maybe 60. We’re doing multiples of 30 a lot. This looks pretty good. Now let’s put some information inside. In fact we’re going to reach off-screen and copy and paste because we have this information typed out in our content strategy notes, just a digital version of this, and copy to clipboard. Let’s paste… that’s pretty good. Phone number, same deal here. In fact we can type this 415.555.1200 and, again, we can copy and paste this content from down here. In fact that might be better. Select all, copy, let’s go in here, and paste. That looks pretty good. So we have the location information, the phone number information, the hours of operation, that looks great. Now what if we wanted to add some space. What if we wanted to add some space in these contact details between each of them. Well with the contact details selected, it is a grid, so we can just increase that row gap. We can bring that to 30. That spaces it out a little more. A little more breathing room for the contact information. And, wait a second, it says 430, it should be 530, let’s fix that real quick. It’s that way down below here too. We can clean most of these things up when we do our review a little bit later. That section looks a lot better now but that’s it. That’s the contact page. In the next video, we’ll make things responsive, and that’ll represent the end of the build work for new pages. Everything after that will be optimizing the existing pages and looking at the site in its entirety.