All language subtitles for 1. Section 7 Intro

Section 7 brings us even closer to the completion of the website.

This time starting on our Contact Us page.

This is an important page on the site because anytime your users are trying to get in touch with you

you're going to need to make sure that that's an easy pain free and reliable system.

Luckily for us material UI has some components that will make putting this page together very easy.

And then we'll go into some of the complications around this functionality but let's go look at the

screenshot for this.

And here is our Contact Us page.

The only difference about what we will be building in this screenshot is it on the left side around

the form and all of the information we're going to have a little bit more whitespace and so it actually

won't be so close to the footer in the header or the call to action.

It will have a nice big padding around it that will just make sure that it maintains an open and clean

look we'll start out with this page by creating a grid container with a direction of row here.

So this is a little different than some of our other pages.

Actually I think all of the other pages so far where we've started with a grid container direction of

column.

But this time we're actually going to want the direction of row because as you can see we have two distinct

horizontal sections.

The first item in this container will be a grid item container.

And this might surprise you as well but we're going to have to do this for alignment.

And then the second item will also be a grid item container and that one might be a little more obvious

over in the first item container.

We'll start off with a grid item container.

Now with a direction of column and that is going to hold all of our content on the inside and I didn't

actually have enough space to include this but we'll actually be wrapping that entire item container

within an item as well.

And remember the we can't use the aligned items or the justified properties on a wrapping container.

If we're trying to move a container inside of it we have to be applying that to an item.

And so since this is a grid item container direction of column if we tried to center this container

by putting a justify or a line items on the wrapping item container it won't work.

And so we have to wrap the inner container direction column all of that with an item and that will allow

us to align it but hopefully that didn't just confuse you it'll make more sense in the code.

And this is just one of those grid tricks to be aware of but within the is direction of column container.

We will have first in item wrapping a typography variant H2 for our Contact Us title as has been typical.

And then we will have another typography this time a variant of body one for our text.

We're waiting underneath will then have a grid item container because we will need first a grid item

wrapping an image for the little icon of the phone and then following that a grid item wrapping a typography

variant.

Body one for the actual phone number.

This will be followed by another grid item container.

Following this similar structure with a grid item wrapping an image for the email icon followed by a

grid item wrapping a typography variant.

Body one for the actual email.

I'm going to go ahead and clear some of this out now so that we have room for the next section.

So I'm going to go ahead and clear those guys out.

And if we continue down we'll now have a container for all of those three text fields.

So this will be a grid item container with a direction of column and inside of here we will have a grid

item wrapping each text field the text field component is a new component that we will be learning in

this section and you'll see how material UI packs in a lot of functionality for us just like they do

with all the rest of the components making it easy to set up a page like this.

We'll go over all the options and functionality that they provide for us before we jump into creating

it.

Underneath that container with those three text fields so adjacent to that container we will have an

item with the text field for the message.

And this is a multi line text field and I will show you how we can create those and underneath that

message text field.

We will have finally a grid item wrapping the button for our Send Message button.

All right now we'll jump over to the grid item container with the call to action here.

And this isn't actually our call to action component you might think it is very similar to the call

to action but it has a slightly different structure and it sits to the right of our content instead

of underneath it.

And so I'm probably sure there's a way I could have made an adaptable call to action that could fit

both this situation and all the rest of the pages but I found that it was easier to just copy over some

of the items and then change the style to the look that I want here.

And so within this item container we'll first have an item wrapping all of the text and the learn more

button there on the left followed by a grid item on the right containing our button inside of that first

grid item.

We will have a grid item container direction of column.

And again we're having to wrap this with a grid item for alignment then in the second grid item like

I said that is just wrapping our button component so back to that item container direction column that

we'll be wrapping a grid item typography variant H four for the simple software revolutionary results

text and I know it's getting kind of hard to see with all these boxes on top of it but then underneath

that we have the text for take advantage of the 21st century and that is a typography variant subtitled

to sitting on top of a button compared to some of the layouts that we've just created in the previous

section.

I don't think that this one is too crazy.

So I think that we should be able to tackle this pretty easily and it will really just be about learning

the functionality of the text field component now as well as some of the problems that arise with text

fields such as validation confirmation and styling.

On that note that is a good transition because once we press the send message button here on the Contact

Us page I actually don't want that to immediately jump and send off our message.

What if the user had accidentally type their name in wrong or maybe put in the wrong phone number or

email even though we're going to have validation on the individual text fields to make sure that the

number is valid or that the email is a valid email that doesn't accidentally stop them from misspelling

something or hitting the wrong number.

And so what we're going to do is after we hit the Send A Message button that's going to take you over

to the confirm message page.

And this actually is not a separate page you can see the background around the white box is great out.

That's because this is actually going to be a dialogue or what some of you may know as a modal and no

matter what you call it is essentially a pop up that is going to darken the back of the screen.

So it's going to create a dark little opaque overlay across the screen and it's going to have this box

floating on top of it.

So that you know you have to interact with the box before you can go back to interacting with the screen.

I'm sure all of you are familiar with confirmation boxes.

It shouldn't be anything new.

And here we're going to display the inputs again.

So it will be really easy we'll just be copying over these same inputs and they'll be hooked up to the

same values.

So the user can actually go in and edit it right from there if they have to.

And then after we press they send a message button here that will go off and send the message but that

will be the next section when we get into actually working on doing that and setting that up.

So for now we're just going to be building out this structure and getting all the way to this point

where we have the working form the pop up and the working confirmation dialog and then we'll be ready

to move on from there but that's going to be plenty of work for now.

So I'll see you in the next video and we'll get started.