Creating a Form Component

[00:00:00]
>> The next thing that I'm gonna do now that I have my index page is I wanna start writing this form. So let's create a components folder, components, and we'll cal this form.js. And in it, I'm going to import React from 'react'; and let's create a form component.

[00:00:23]
So the first thing that we'll do is we'll just return form. So we're gonna add this form and it needs to have inputs and things. So we're gonna wanna style these and rather than writing out the whole form and then going back and editing it for styles, I'm going to just create an empty form.module.css.

[00:00:49]
The .module signifies that it is a CSS module. So that is required if you're gonna use it the way that I'm about to use it. So by creating a forum.module.css, I can now import it as styles. And what CSS modules does is it lets us use any class names that are defined.

[00:01:09]
So if I create a heading class, I'll be able to call styles.heading. And what CSS modules does under the hood is it creates a hash name so that we don't get scope collisions or any of those things. And it allows us to have really simple names like container, wrapper, heading, text, that would absolutely conflict on a larger app if we weren't using CSS modules.

[00:01:32]
So it just helps us cut down on on boilerplate overhead stress, all those things. So in my form, I want to use the styles and I'm gonna define my classes ahead of time and then we'll go and write them in. So we're gonna use the styles.form for this one.

[00:01:49]
I wanna have a label and this one is going to have a class name of label. And inside of it, we'll say name. And we'll do an input with a class name of input. Turn on wrap before we do this. And then we'll have it's gonna have a type of text and the name of name.

[00:02:16]
And because we're putting the input inside of the label, it should be accessible to screen readers where it will read the name and associate that with this input. Next, I want to add one for email. So this is the email that you'll be sending from. I'm gonna change this one over to use email and let's make it a type of email as well.

[00:02:41]
So that if you're typing on a phone it'll change your keyboard layout and show the @ symbol and, and make it a little more convenient to type. In addition to an email, we need a subject line. That's a text field, it's gonna be called subject. And finally, we need some body, body text.

[00:03:05]
So the body of our email is going to be a text area and that doesn't have a type cuz a text area is a text area. React handles text areas a little specially. And then the final thing, is we need a way to submit this thing. So let's add a button, give it a class name of styles.button.

[00:03:27]
And then we can say send, all right. So we need to export this component so that we can use it, so we'll export it as the default. And now we can go into our index.js and use it. So I'm going to import form from components form. And then down here I can just drop that component in.

[00:03:55]
And if you're not familiar with React, this is kind of the underlying, I guess the underpinning architectural ideology. Is that you package up things into components, which make them easy to drop in elsewhere so that we don't have to worry about the form logic. We just know that the form will work.

[00:04:17]
So then we wanna add some actual styles to this thing. So I'm gonna go through kind of quickly on this. But my goal is to show that we can get a lot of benefit out of learning a little bit of CSS. It'll save us from ourselves in terms of extra JavaScript things that we're gonna end up doing.

[00:04:33]
So let's make this look kinda nice. We'll make it a light gray border, we'll give it a border radius so it looks super sweet. And you may notice that I've been using the rem unit. The reason that I like the rem unit is that it's relative to whatever size we set on HTML.

[00:04:53]
So if we change that, I think we set the HTML to 18 pixels, if we change that to 20, everything will proportionately adjust. And that's a really, really nice feature when you start looking at well if the design system changes and now everybody mandates 16 pixels. You don't wanna have to go through and redo all of that math on what the margins and spacing and padding for everything should be.

[00:05:15]
You can just make it relative to the font size and it'll look good at whatever pixel size. So then, we can do display block. Let's set up a little bit of margins, I will do little bit on top, we'll center it, nothing on the bottom. Set a max-width for this form of 500px and then we'll give it a padding of about 1rem.

[00:05:44]
So then for the label and the input, these are both gonna be display block. And that should immediately clean this thing up a little bit. All right, we're looking better. It's starting to look formish. Then let's make our label look nice. So one trick that I like is to make the labels a little bit smaller but then spread out the letter spacing.

[00:06:12]
And I use relative to itself, so an versus an rem. And then I make them uppercase. And just like I don't know, it looks labelee to me, you can do what you will. Then for the input, let's make these kind of match our thing. So I'm gonna say we'll do 1 pixel solid, set up a border radius on it, and that border radius is gonna be a quarter rem.

[00:06:45]
We'll set up the font size to match the document. We'll have a margin at the bottom of three quarters rem. And then we want a little bit of padding, so that the text isn't smashed against that border. And we'll make it as wide as the form will allow.

[00:07:08]
Hey, this is starting to look like a form, right? And then the last that we wanna do is let's add just a little bit of styling on our button. So for our button, I'm going to give it a standout color. So we'll say it's gonna be dark blue.

[00:07:23]
For the border, we'll give it a 1 pixel solid, dark blue. I could also make that border transparent. I'm not sure that it matters. This is just what I ended up doing. We'll give it a border radius to match the input, so a quarter rem. We'll give it a text color of white, so that text stands out.

[00:07:43]
And buttons, for whatever reason, don't give you the clicky thing, so I'm gonna set the cursor to pointer for when you hover over it. The industry term is clicky thing. Then, we'll make a display block so it won't wrap around anything. And we'll set the font size to a little bit bigger.

[00:08:08]
Okay, it's a form. It's very form looking. And our text in here, that looks okay. So, I'm happy. Let's make this into an actual React form. And the way that we're going to do that is, let's save our work first. Well, I wanna do one thing, cuz right now if I submit this, It's gonna break on me, and it reloads the page, which I don't want it to do.

[00:08:44]
So I'm gonna add one more thing, which is a handleSubmit function. And that gets the submission event, and I'm just gonna prevent it, so I don't want it to do anything. And then, now we have now opted into that responsibility. So we have to handle it. So we need to actually send the message.

[00:09:07]
And then I'm going to add this to the form itself for onsubmit. This is a kind of a convenience thing that allows us to say, hey, whenever this form gets submitted, do this thing and so we're gonna call handleSubmit. So now when I click, it doesn't do anything.

[00:09:25]
So now we're responsible for handling that.