So let's work on this contact page.
There, I of course need to return some JSX code,
but I'll again keep it simple
and create a separate component
which holds the actual content of this page.
For this, in the components folder,
I'll add a new subfolder, contact.
And in there, I'll add a contact-form JS file,
and attached you also find a styling file
for this contact form page,
for this contact form component, I mean.
You find a contact form module CSS file,
which you should add to that folder.
Then, in contact form JS,
we create our contact form functional component,
just as we are used to, like this.
And we can also import the styles already.
Import classes from ./contact-form.module.css
and then return our page content here.
So return a section with a class name
of "classes.contact" here.
And then in that section, let's say a H1,
not H2, but H1 tag,
where we say something like, "How can I help you?"
And then below that, the actual form.
Now, that form will receive a class of "form".
And then in there I came up with a certain structure
which fits the styles I provided to you,
where we have a div with a class of "controls".
So plural.
And in there, another div with a single form control
and hence a class of "control".
And then in there, a label with the htmlFor prop
set to "email", where I say, "Your Email",
because we're prompting the user for an email address.
And below that, a input of type "email"
with an ID of "email", which is required, like this.
And then I'll replicate this control div here
inside of that controls div still.
So the two control divs are side by side here.
And then here we have the name.
And we change htmlFor to "name" and, whoops,
and the ID to "name".
And it's still required, but the type is set to "text".
And then below that controls div,
so not inside of it but below it,
I'll add another div with a class name of "classes.control",
so singular again,
with another label with a htmlFor prop set to "message",
where we say, "Your Message".
And below that, a text area with an ID of "message"
and rows set to "5", like this.
And then below that, another div,
where I set the class to "actions"
where I wanna have my submit button.
So a simple button where I say, "Send Message".
That's my form here.
Now we can use that in the contact page
and output ContactForm like this.
Make sure to import it, of course.
And if you save all of that and reload that contact page,
you should see that contact form here.
Now, that's a basic form.
The goal now is that when we send our form,
we send it to an API route,
and then there, we store it in a database.
We don't directly talk to a database, as we learned,
because if we would do so, if we would add code
for talking to a database in the contact form component,
then we would have to put our database credentials
into this component as well.
And we don't wanna do that for security reasons.
Hence, we'll do it the other way and add our API route
plus the code to talk to that API route in the next lecture.